bildirgec.org - pis 7li - beğendikleri

photoshop site tasarım dersleri

pis 7li — Wed, 01 Apr 2009 09:08:00 GMT

daha önce photoshop site şablonları yazısında site yapımcıları için hazırlanmış birkaç ücretsiz şablondan bahsetmiştik. şuradaki kaynakta ise kendi site tasarımınızı oluşturmada yararlanabileceğiniz derslerden örnekler sunulmuş.

photoshop üzerine daha fazla kaynak arıyorsanız photoshop dersleri ve kaynakları yazısı işinizi görebilir.

Bu yazı pis 7li tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

çeşitli web tasarım araçları

pis 7li — Thu, 26 Mar 2009 09:45:00 GMT

bir web sayfası için gerekli düzenleme ve eklentileri yaparken kullanılabilecek basit ve kullanışlı araçlara ihtiyaç duyarsınız. bazı gerekli araçları aşağıda listeliyoruz:

color cop
kullanımı kolay, renk seçici, üretici, örnekleme ve dönüştürücü program. RGB ondalık değerlerin dönüşümünü sağlar. büyüteç yardımıyla herhangi bir simge ya da bölgeyi baz alarak bir renk seçiyorsunuz, program size her renk için bir de kod veriyor. bu kodu web sitenizde kullanabiliyorsunuz. Türkçe versiyonunu da ücretsiz olarak indirebilirsiniz.

color cop

Arisesoft Color Set clrst23.zip
en iyi renkleri seçmek için kullanılır. kaptığınız renleri html olarak kaydedebilir favori renklerinize katabilirsiniz. Hex - RGB - HSB renk dönüştürmeyle renk önizlemesini de dahildir.

color set

Texture Processor
Doku İşlemci çeşitli doku oluşturmak için benzersiz bir programdır. Doku İşlemci 3d için de tasarlanmıştır-sanatçı ve web tasarımcıları için. Ayrıca, diğer kullanıcıların çeşitli grafik editorler çizmek için zevkle ilgileneceği ücretsiz bir araç.

texture processor

neophoto
ücretsiz fotoğraf sitesi oluşturun. tüm dijital fotoğrafları düzenleme, boyutlandırma, kırpma, döndürme işlemlerini yapın, başlık ekleyin. gezinme bağlantıları, açıklamalar eşliğinde pratik olarak bir fotoğraf web sayfası oluşturma kolaylığı sağlar.

neophoto

Button Maker Freeware
tabii ki bu da ücretsiz. sitenize 3 boyutlu buton oluşturun. 8 temel düğme stilleri, metin rengi ve tipi, arka plan rengi, düzleştirme ve daha birçok efekt sunuyor. butonların bağlantı noktalarını düzenleyin.

button maker freeware

super simple rss
hızlı ve kolay "newsfeed" oluşturma aracıdır. tüm rss alanlarını desteklemez ama en önemlilerini destekler. ücretsiz ve küçüktür.

super simple rss

fazlası burada

Bu yazı pis 7li tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Web Tasarımcıları İçin 10 Kullanılırlık İpucu

pis 7li — Mon, 05 Jan 2009 12:13:00 GMT

Basitçe, kullanılırlık, ziyaretçilerinizin web siteniz üzerinde ihtiyacı oldukları bilgiye ihtiyacı oldukları zamanda ulaşabilmelerini kolaylaştırır.

Kullanılırlık üzerine web şirketlerinin ortak yanılgısı, onun pahalı olduğu yönündedir. Evet, piyasada bazı uluslararası şirketler bulunuyor ve bu şirketler on binlerce dolar parayı kullanılırlık üzerine araştırma ve test yapılması için harcayabiliyorlar. Fakat küçük ve orta ölçekli işletmeler için kullanılırlık, alanında uzmanlık ve test için pahalı ekipman gerektirmeden ulaşılabilir.

Web tasarımcılarının günümüzde işi daha da kolay. Sadece bu ve bunun gibi makaleleri okuyarak bazı temel kuralları öğrenebilir ve onları kendi web sitelerinde uygulayabilirler.

1. Etiket Satırı (Tagline) Kullanın

Etiket satırı, şirketlerin ya da web sitelerinin filozofisini ya da görevini açıklayan söz öbekleridir. Web sitesinin ana sayfasındaki en dikkat çeken element olmalıdır ve web sitesini tek cümlede özetleyebilmelidir.

İstatistikler, bir web sitesinin, ziyaretçinin ilgisini çekebilmesi ve onu sitede tutabilmesi için 8 saniyesi olduğunu gösteriyor. Belirgin bir etiket satırı olmadan ziyaretçilerinizi sitenizde uzun süre tutmak ve onların alt sayfaları gezmesine önayak olmak oldukça zordur.

2. Site İçi Arama Motoru Kullanın
Tıpkı etiket satırlarında olduğu gibi site içi arama da bir web sitesinde yer alan çok önemli bir elementtir. Kullanıclar bir şey aradıklarında, gözleri aradıkları terimi girebilecekleri bir alan arar.

Jacob Nielsen'in web kullanılırlık ipuçlarına göre arama kutusu, metnin kolayca görünebilmesi ve kullanılabilmesi için 27 karakter genişliğinde olmalı. Arama kutusunu sayfanın üst kısmına yerleştirin çünkü ziyaretçilerinizin gözleri F yapısına göre, yani sol üstten sağ alta doğru sitenizi takip eder.

3. Çok Fazla Grafik Kullanmayın
Tasarım elementlerinin ve grafiklerin gereğinden fazla kullanımı bir web sitesi için daima kötüdür, tek yaptıkları şey ziyaretçilerinizi yanıltmaktır. Web sitenizi geliştirmek için de tasarlayın, sadece dekore etmek için değil. Kullanılırlık açısından daha az her zaman daha verimlidir.

4. Site Haritaları (Sitemap) Kullanın
Site haritaları görece yeni bir özellik olup web sayfa navigasyonunu ve arama motoru optimizasyonunu (SEO) iyileştirir. Site haritaları esas itibariyle websitenizin sayfalarının ve mimarisinin yapısal sunumudur. Herhangi bir biçimde bir belge, ya da web sitenizdeki sayfaları listeyen bir sayfa olabilir ve genellikle içeriği hiyerarşik olarak listeler.

Son zamanlarda Google, Yahoo! ve MSN gibi arama motorları Sitemap protokolleri sunmaya başladılar. Bu protokoller web sitenizin site haritası sayfası ile aşağı yukarı aynı olsa da veriler XML biçiminde depolanır. Internet üzerinde bu belgeleri sizin vereceğiniz adres için XML biçiminde oluşturabilecek bazı araçlar bulunuyor.

5. İş Akışını Kesmeyin
İş akışı derken kullanıcının sitenizde attığı her adımdan bahsediyoruz.Örneğin form doldurmak, web sitesine kayıt olmak, kategorilere, arşivlere gözatmak vs. Bu iş akışlarını kesmeyin ve kullanıcının istemesi durumunda herhangi bir işlemi iptal etmesine izin verin. Kullanıcının bir iş akışını kesmesine izin vermememiz durumunda, kullanıcı istemese bile onu bir şeyi yapmaya zorlamış oluruz.

Bir web sayfasındaki her işlem kullanıcılar için anlaşılır olmayabilir, bu sebeple onlara açıklayıcı ipuçları ile rehberlik edin (örneğin form doldururlarken). Javascript bağlantıları genellikle iş akışlarını keserler, bu sebeple onları websitenizde kullanmanız önerilmez.

Bir diğer sık yapılan hata da ziyaret edilen bağlantıların renklerini değiştirmemektir.

6. Kolayca Taranabilir Sayfalar Oluşturun
Kolayca okunabilir web sayfaları oluşturmak, ziyaretçilerinizin sitenize olan bağlılığı, onları sitenizde tutabilmeniz ve içeriğinizi okutabilmeniz açısından önemli rol oynarlar. Kullanılırlık testleri gösteriyor ki kullanıcılar web sayfalarını okumazlar, sadece göz gezdirirler, başlıklara, koyu renkle yazılmış yazılara, öne çıkarılmış metinlere ya da listelere bakarlar.

Jakob Nielsen tarafından yapılan göz izleme deneyleri, kullanıcıların içeriği F yapı modeline göre okuduklarını gösteriyor, bunun anlamı kullanıcılar web sayfasının sol üst köşesinden okumaya başlıyorlar ve ardından gözlerini biraz aşağı kaydırarak tekrar okumaya devam ediyorlar.

Nielsen ayrıca bu okuma modelinin detaylarını şöyle listelemiş:

Kullanıcılar web sayfasının içeriğini kelime kelime okumazlar. Sadece önemli paragrafları, koyu renkli metinleri vs algılarlar.
İlk iki paragraf web sayfasında önemli yer tutar. Bu iki paragraf web sitenizi ziyaret eden kullanıcıların aradıkları bilgiyi içermek zorundadırlar.
Alt başıklar ve listeler, diğer paragraflara oranla daha dikkat çekicidirler. Bu elementleri önemli bilgileri vurgulamak için kullanın.

Gazetelerden öğrenebileceğimiz bir diğer önemli yöntem de yazarların genellikle insanların dikkatini çeken bir manşet ve ilk paragrafta yine dikkat çeken cümleler kullanıyor olmalıdır. Bu sayede okuyucuların makalenin tümünü okuma ihtimallerini güçlendirirler. İçeriği ters dönmüş piramit şeklinde organize ederler. Ters dönmüş bir piramiti hayal edin. Üstteki geniş kısım tüm makalenin en önemli bilgisini içerirken alttaki incelen kısım daha az önemli kısımları içerir.

En önemli parçaları sayfanın en üzerine, daha az önemli olanları da sayfanın alt kısmlarına yerleştirerek sitemizi organize ederken bu yöntemi kullanabiliriz, ancak hangi bilginin önemli olup olmadığını nasıl bileceğiz? Haber değerlerinin yardımı ile.

7. Yanlış Yönlendiren Kullanıcı Arabirimi Kontrolleri Tasarlamayın
Kullanıcı arabirimi (UI) kontrolleri ile web sayfa elementleri, öğeleri, widgetleri gibi kullanıcıların iletişim kurabileceği öğeleri kastediyoruz (düğmeler, açılır listeler vb.)

Düğme gibi görünen ancak düğme olmayan grafik elementleri tasarlamayınGenellikle tıpkı birer bağlantı gibi görünen, ancak bağlantı olmayan altı çizili metinlerle karşılaşıyoruz.

Kullanıcıların umduğu eylemi kullanmayarak, onların sitenizin çalışmadığı hissine kapılmasının ve bunun ardından da bir süre sonra sitenizi terk etmesinin önünü açmış olursunuz. UI kontrollerine yönelik bir diğer önemli kullanılırlık ipucu da tutarlılık üzerine: UI kontrollerinin tutarlı olduğuna emin olun.

Yukarıdaki resimden de görebileceğiniz üzere Yahoo!, tutarlı UI kontrol tasarımına güzel bir örnektir. Sayfadaki her sekme aynı şekilde görünür ve işler, her bir bağlantını altı fare ile üzerine gelindiğinde çizlir, her düğme aynı şekilde görünür vs.

8. Anlamlı Geribildirimler Verin
Anlamlı geribildirim bir web sitesi için önem arz eder. Bu siteniz ve kullanıcıları arasında bir iletişim kanalıdır ve geribildirimler yardımı ile kullanıcıların sitenizde neler olup bittiğini anlamasının önünü açarsınız. Diyelim web sitenizde bir hata var. Doğrudan Hata oluştu yazmak yerine neyin yanlış gitmiş olabileceğini ve kullanıcının bu hatayı gidermek için neler yapabileceğini listeleyin.

Geribildirimler her iki yönde işler. Bir kullanıcı sitenizdeki formu doldurduklarında aslında bir yandan size geribildirim yapmış oluyorlar. Kullanıcılardan aynı bilgiyi iki kez girmesini istemeyin. Örneğin bir kullanıc web sitenizin halihazırda kayıtlı bir kullanıcısı ise ve bir form doldurması gerekiyorsa, onlara adını ya da üye olurken size verdikleri herhangi bir bilgiyi yeniden sormayın, çünkü bu bilgiler zaten veritabanında ya da bir dosyada bulunuyor. Bu verileri doğrudan veritabanından alarak tüm işlemi basitleştirebilirsiniz.

9. Çok fazla Javascript Kullanmayın

Javascript ve AJAX tekniğinin gelmesi ile web tasarımcıları ve geliştiriciler karşılık verebilen ve esnek web siteleri oluşturabiliyorlar, ancak tüm bu yeni teknolojilerin de bir fiyatı var. Bizim durumumuzda bu tarayıcı tutarsızlığı. Her kullanıcının tarayıcısı en son sürüm olmayabilir ya da öntanımlı olarak Javascript aktif edilmemiş olabilir.

Bir websitesinde çok fazla JavaScript kullanarak bu kullanıcıları engellemiş oluruz. Bunun yerine daha mütevazı ve yalın Javascript kullanın.

CAPTCHAlardan Kaçının

Türkçe'si "İnsanlarla Bilgisayarları ayırt edebilmek için Tümüyle Otomatikleştirilmiş Yerel Turing Testi" (Completely Automated Public Turing Test to tell Computers and Humans Apart) olan CAPTCHA'nın adı bile karmaşık. CAPTCHA'nın en yaygın kullanım şekli bir metnin imaja edilmesi ve bu metnin ilgili alana doğru yazılıp yazılmadığının test edilerek kullanıcının gerçek bir insan mı yoksa bir spam robotu mu olduğunu anlamaya çalışmak şeklindedir.

CAPTCHAların sorunu her insan doğrulama metodu, kullanıcının beyninde karmaşık işlemleri yürütür (yamutulmuş metni anlamak, iki rakam eklemek vs).

CAPTCHAlarla ilgili bir diğer problem de farklı kültürler arasındaki tutarsızlıktır. Örneğin Çince semboller, numaralar pek çok batı dilinden ve Arapça'dan farklıdır. Çinliler CAPTCHA kullanılan web sitelerinde latin alfabesini kullanan ülkelerin insanlarına oranla çok daha zor zamanlar geçiriyorlar.

Özet

Daima web sayfanızdaki en dikkat çeken element olarak konumlandırılmış bir etiket satırı kullanın.
27 karakter genişliğinde bir arama kutucuğu oluşturun ve onu web sitenizin üst kısmına yerleştirin.
Çok fazla grafik ve tasarım elementleri kullanmayın.
Site haritası sayfası hazırlayın ve site haritası XML verisini arama motorlarına kaydedin.
Kullanıcının iş akışının önünü tıkamayın. Gerektiğinde her işlemin iptal edilebilmesini sağlayın.
Kolayca taranabilir web içeriği oluşturun ve en önemli içeriği sayfanın üst kısmına yerleştirin.
Düğme gibi görünen ancak düğme olmayan grafik elementleri tasarlamayın.
Anlamlı geribildirimler sunun ve geribildirimlerin iki taraflı işlediğini unutmayın.
Daha mütevazı Javascript kullanın ve verim düşüşünün kabullenilir miktarda olmasına dikkat edin.
CAPTCHAlardan kaçının ve daha kullanışlı yöntemler kullanın.

Siz de bu yöntemlerden bir veya daha fazlasını kullanıyor musunuz? Kendi ipuçlarınızı ve görüşlerinizi yorumunuzda belirtmeyi unutmayın

Bu yazı pis 7li tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Yerli web geliştirme platformu

pis 7li — Tue, 24 Feb 2009 17:47:00 GMT

Türkiye'de üretilmiş ama adı yeterince duyulmamış bir yazılımdan bahsedeceğim. Yazılımın adı Moremotion Aplication Studio. Daha önce bildirgec'de 2002 yılında burada, 2003 yılında da burada konu olmuş. Ama o zaman daha çok gelişme aşamasında olduğu için fazla ilgilenen olmamış. O günden bu yana Mor Yazılım firması boş durmamış ve sistemi sürekli olarak geliştirmeye devam etmiş.
Moremotion A.ş, Java tabanlı olarak geliştirilen Moremotion framework'ü üzerinde açık kaynak kodlu web uygulamaları geliştirme ortamı sunuyor.

Moremotion

Diğer geliştirme ortamlarından farklı olarak XML/XSL teknolojileri kullanılarak Java tabanlı web uygulamalarını çok kısa sürelerde çoğu zaman tek satır kod yazmadan geliştirebilirsiniz. Özellikle Ajax uygulamalar için de hazır araçlar entegre olarak bulunuyor. Tam olarak tasarım ekranında ne görürseniz onu alıyorsunuz.

Programın yardım dökümanları oldukça detaylı ve Türkçe. Sadece yardım dökümanlarını okuyarak gelişmiş uygulamalar yapılabilir.
Kod yazarak yazılım üretenlere pek cazip gelmeyebilir ama kodlarla pek uğraşmak istemeyenler için biçilmiş kaftan. Lafı daha fazla uzatmadan sizi aşağıdaki linklere davet ediyorum :
Mor Yazılım Ana Sayfa
Mormotion Özellikleri
Forum
Tanıtım Videoları
Download

Bu yazı pis 7li tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

15 Otantik Fotoğraf Efekti

pis 7li — Mon, 09 Mar 2009 10:00:00 GMT

Şüphesiz, Photoshop'un tasarımcılar için sunmuş olduğu birçok nimet var. Bu nimetleri kullanmakta tabii ki biz tasarımcılara düşüyor. Herkes profesyonellik adına birşeyler tasarlarken bizler niçin yerimizde oturalım? İşte sizi Photosop'ta profesyonelleştirecek 15 hakiki efekt.

İğne Deliği Fotoğrafçılık - Biraz sepya, biraz blur efektiyle fotoğraflarınızı iğne deliğinden bakılıyormuşçasına değiştirin.

Çapraz İşlem - Renkleri karıştırın, film afişlerinden bir farkı kalmasın.

Sokak Fotoğrafçılığı - Tertemiz bir yüzü, dramatik bir hale nasıl getirebilirsiniz?

Split Tonlama - Evinizin 50 yıl önceki halini görmek ister misiniz?

Rock Fotoğrafçılığı - Gitar ve kıyafetler tamam, sıra efekt vermede.

The Dave Hill Look - Dave Hill'den benzersiz bir efekt!

Lomo Fotoğrafçılığı -Fotoğraflarınıza 90'lı yılların icadı Lomografi efektini ekleyin.

Kızılötesi Fotoğrafçılık - Fotoğraflarınıza rüya hissi verin

Velvia Efekti - Manzara fotoğraflarınızı canlandırın.

Karanlık Grunge Efekti - Fotoğraf renklerini sessizleştirin!

HDR Fotoğrafçılık - Fotoğraflarınızda HDR'ın kalitesini yaşayın

Yumuşak Odak Fotoğrafçılık - Belirli yumuşak odaklama özelliği ile rüya biçiminde bir efekt verin.

Film Foto Efekti - Hani korku filmlerinde ürkütücü ekran renkleri olur ya...

Vintage Foto Efekti - Hayallerinizi resme dökün

Tilt Shift Fotoğrafçılığı - Şu günlerde oldukça popüler bir efekt.

Bu yazı pis 7li tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

33+ Flaş ve Javascript fotoğraf galerisi

pis 7li — Fri, 20 Mar 2009 09:50:00 GMT

Merhaba arkadaşlar, internette kendim için bazı fotoğraf galerileri araştırırken çok güzel galeriler buldum fakat kendim için bir tanesini beğendim. Ben de kendi zevkime göre bulduğum bu sitedeki foto galerileri sizinle paylaşmak istedim. İlk olarak Javascript galerilerinden başlayalım. İşte onlardan birkaç örnek

Galleria

Bu gördüğünüz galeri jQueri ile yazılmıştır. Alt tarafında resimlerin küçük görüntüleri bulunmaktadır ve harika bir görünüme sahiptir.
Demosu İndirin

minishowcase

Gördüğünüz bu galire de Javascript tabanlıdır ve görsel açıdan çok zengindir. İçine istediğiniz resimleri albüm olarak gruplara ayırabilirsiniz.
Demosu İndirin

İmago

Diğer verdiğim foto galerilere benziyor fakat bunun tasarımı flaşla yapılmış gibi. Yani Görsel açıdan diğerlerinden daha güzeldir. bunda da Javascript kullanılmıştır.
Demosu İndirin
Ve şimdi de Flaş Galerilere geçiyoruz:

Flash Gallery

Gördüğünüz bu flaş galeri Xml ile kontrol ediliyor yani istediğiniz resimlerin bulunduğu konumlarını xml dosyasına giriyorsunuz böylelikle daha kolay düzenleyebiliyorsunuz bunun dışında resimleri tam ekran görüntüleyebiliyorsunuz.
Demosu İndirin

Flash Foto Stack

Bu Flaş galerinin diğerlerinden farkı çok güzel resimler arası geçişlerde kullanılan animasyondur.
Demosu İndirin

Photo Viewer

Gördüğünüz bu flaş galeriyi üç renkte kullanabilirsiniz bunu dışında resimlerin alt bölgesine de çok güzel bir yazı tipiyle önbilgi ekleyebilirsiniz.
Demosu İndirin
Daha Fazlasına burdan ulaşabilirsiniz

Bu yazı pis 7li tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

CSS Sprite kullanmak artık daha kolay!

pis 7li — Thu, 19 Mar 2009 11:48:00 GMT

Daha önce CSS Sprite tekniğinden "css sprite'ların kullanış alanları" başlıklı yazımda bahsetmiştim. Eğer bu yazıyı okumadıysanız bu tekniğin yararını kavrayabilmeniz için okumanızı tavsiye ederim. Bu yazıda ise bu tekniği satırlarca kod yazmadan nasıl uygulayabileceğimizi anlatacağım.

1. adım: Kullanılacak Resmin Yaratılması
Matt Varone'un yapmış olduğu CSS Navigation Bar Code Generator uygulamasına önceden yaptığımız sprite dosyamızı yüklüyoruz. Ben rehberde örnek olarak aşağıdaki butonları kullanacağım.

örnek sprite

2. Adım: Ayarlamalar
Resmi yükleyip ikinci adıma geçiyoruz. Bu sayfa Menü tasarımı için yapıldığından dolayı uygulama sizden menünün ismini yazmanızı ve horizontal (yatay) ya da vertical (dikey) özelliklerinden birini seçmenizi istiyor. Bu seçimi yapıp bir sonraki adımda menümüzün sayfa yüklendiği anda gösterilecek halini seçmemiz isteniyor.

3. Adım: Ana Katmanı Seçmek
Bu adımda yatay menü yapıyorsanız yatay, dikey olarak tasarladıysanız dikey olarak menünün ilk elemanlarını seçmeniz gerekmekte. Eğer uygun bir seçim yaparsanız uygulama size onay mesajı göstererek bir sonraki adıma geçmenize izin veriyor.

Ana Katman

4. Adım: Ana Katmanı Bölümlere Ayırmak
Bu adımda Seçtiğiniz Ana katman size gösterilir. Butonları tek tek belirlemeniz isteniyor. İlk butonu belirledikten sonra Confirm tuşuna basarsanız bir sonraki tuşu seçmeniz sağlanıyor. Tüm tuşları bu şekilde seçtiğinizde uygulama otomatik olarak son adıma geçiyor.

Tuşların Seçimi

5. Adım: Kontrol ve Download
Buraya kadar tüm işlemleri doğru gerçekleştirebildiyseniz sistem size demo sayfasını gösterecek ve onaylamanız halinde zip'li dosya içinde kodunuzu indirmeye sunacak.

Notlar
Bu uygulama CSS Sprite'lar sayesinde Menüler oluşturmaya yarar. Bu yüzden liste koduyla uygulama yazılmıştır. CSS bilginiz yeterli seviyedeyse ufak bir düzenleme sonucunda değişik amaçlarla da kullanmanız mümkündür.

Bu yazı pis 7li tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

CSS Sprite'ların kullanış alanları

pis 7li — Sun, 22 Jun 2008 11:33:00 GMT

Birçok resim tek bir resim dosyasında

CSS Sprite'ları konusunda daha önce bir yazıyla karşılaştınız mı? Sprite'ın bir içecektan olmaktan başka web tasarımından nasıl bir terim olduğunu biliyor musunuz? Eğer bilmiyorsanız Sprite nedir hep beraber öğrenelim...

Sprite nedir?
Sprite bir imaj dosyasıdır. Ama bu imaj dosyanın diğerlerinden tek bir farkı vardır o da birçok imaj dosyasını içinde bulundurmasıdır. Örneğin ülke bayraklarının herbirini tek tek kaydetmek yerine düzgün bir biçimde 1 imaj dosyasının içine kaydedebilirsiniz. Daha sonra css kodlarında bazı derlemeler yaparak her ülkenin bayrağını tek tek o dosyanın içinden ayırabilir ve sitenize ekleyebilirsiniz.

Performans Kazancı
Daha büyük bir imaj dosyasının daha çok hacim kaplayacağı doğrudur fakat tek tek kaydedilen her imajda aslında büyük dosyalardakine oranla daha çok bandwith kaybı vardır. Ayrıca sadece 1 imaj dosyası sunucudan ükleneceği için http request'lerinin sayısı azalarak sayfamız daha çabuk kullanıcıya sunulur.

Nasıl kullanılır?

#nav li a {background:none no-repeat left center} #nav li a.item1 {background-image:url('../img/image1.gif')} #nav li a:hover.item1 {background-image:url('../img/image1_over.gif')} #nav li a.item2 {background-image:url('../img/image2.gif')} #nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}

Örneğin yukarıdaki gibi bir css kodumuz olsun. Gördüğünüz gibi her linkin arkaplanına bir resim yerleştirilmiş. Bu resimler toplam 20.5 kb yer kaplamakta ve 10 http-request'i ile sayfaya çağrılmakta.

#nav li a {background-image:url('../img/image_nav.gif')} #nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px;}

Üstteki örnekte ise her imaj toplam 13 kb yer kaplayan bir imaj dosyasının için konulmuş ve CSS dosyası sayesinde bunların tek tek konumları belirlenerek linklenmiş. Bu sayede 1 http-request'i ile sayfalar daha da hızlandırılmış.

Gördüğünüz gibi sitelerin hem hızlanmasını hem de daha az bandwidth kullanmasını sağlayan Sprite'lar sitelerin üstündeki yükü bir nebze olsun azaltmakta. Eğer kolayca Sprite yapmak isterseniz Sprite Generator adlı siteyi kullanabilirsiniz.

Ayrıca konuya örnek olarak gösterilebilecek olan Tek bir resim dosyası ile yuvarlak köşeli kutular yapmak yazısı eburhan tarafından yazılmış.

Not: Bu bildiri Css-Tricks kaynağındaki bu yazıdan yararlanılarak yazılmıştır.

Bu yazı pis 7li tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Bilmeniz gereken 20 harika php kütüphanesi

pis 7li — Thu, 19 Mar 2009 19:05:00 GMT

Bildiğiniz gibi projelerde günümüzde zaman oldukça dardır. ve sizden en kısa zamanda işi en iyi şekilde yapmanız beklenmektedir. tabii iş çok zaman az olunca yazılımcılarımız da saç baş yolmaya başlar.

Bu süreci kısaltmak ve hızlı sonuç üretmek isteyen yazılımcılar tabii ki kütüphanelere baş vururlar. işte başucunuzdan eksik edeyemeyceğiniz müthiş php kütüphaneleri.

Charting Kütüphaneleri

pchart

Belki basit grafikler için php gdi işinizi görebilir ama işler karmaşıklaştıkça daha farklı şeylere ihtiyac duyacaksınız. işte grafik kütüphanelerinden birkaçı.

pChart - çizelgeleri oluşturmak için bir PHP sınıfı.
Libchart - Basit PHP ile grafik çizim kütüphanesi.
JpGraph - Nesne yönelimli bir grafik PHP kütüphanesi oluşturmak için ideal.
Open Flash Chart - Flash tabanlı charting kütüphanesi.

Küçük resim Oluşturucu
Küçük oluşturmak için sadece değişik bir çözüm.
phpThumb - PHP Küçük yaratıcısı.

RSS Ayrıştırıcısı Kütüphaneler

RSS Çözümleme yapmak eğlenceli bir şey. bunu kolay yoldan yapabileceğiniz harika kütüphaneler olduğunu biliyor muydunuz?

MagpieRSS - Php için rss ayrıştırıcısı.
SimplePie - Süper hızlı, kolay kullanımlı, RSS ve Atom destekli php kütüphanesi.

Ödeme
Bir e-ticaret sitesi ile başa çıkmak mı istiyorsunuz? ödeme çözümü mü arıyorsunuz? Merak etmeyin. Bu kütüphane size yardım edecektir.

PHP Ödeme Kütüphanesi - Paypal, Authorize.net ve 2Checkout (2CO) uyumlu.

Veri tabanı kütüphaneleri

Bazen SQL sorgusu yazmak gerçekten sıkıcı oluyor. Bu kütüphaneler bir nebze olsun sizi gülümsetecektir.

ADOdb - PHP Veritabanı soyutlama kütüphane.
Doctrine - PHP 5.2.3 için ORM (Object relational mapper) ilişkisel haritalama aracı. En çok kullanılan veri tabanı erişim katmanıdır.

Propel - Başka bir ORM aracı.

Outlet - Açık kaynaklı bir veri tabanı kütüphanesi.

PDF Oluşturucular

FPDF - PHP ile PDF dosyaları oluşturmanıza olanak sağlayan PHP sınıfı.

Excel Dosyası oluşturucular
Excel dosyası olarak rapor oluşturmaya mı ihtiyacınız var? Her şeye çözüm bulunabilen bir platform olan phpde bunu da unutmamışlar.

php-Excel - Excel dosyaları oluşturmak için en basit kütüphane.

PHP Excel Reader - Ayrıştırma ve XLS dosyalarından bilgi almak için ideal bir kütüphane.

E-mail kütüphanleri
Php mail fonksiyonunu sevmiyor musunuz? o zaman daha kapsamlı işlemler de yapabileceğiniz kütüphanleri projenize ekleyin.

Swift Mailer - Ücretsiz Özellik zengini bir PHP Mail sınıfı.
Phpmailer - özellik zengini ve meşhur php sınıfımız php mailer.

Unit testleri ve analiz

SimpleTest - PHP unit testi ve web test için kütüphane.

PHPUnit - xUnit ailesinin ve test işlevleri kolaylıkla çalıştırmak ve sonuçları analiz etmek için bir kütüphane.

Bu yazı pis 7li tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

+20 Harika Flash Resim ve Fotoğraf Galerisi

pis 7li — Mon, 16 Mar 2009 14:48:00 GMT

resim ve fotoğraf galerileri konusunda hem javascript hem css hem flash teknolojilerini sıklıkla kullananlarımız vardır. bu yüzden favori seçeneğim olan flash galerileri konusunda ek bir kaynak olarak bu bildiriyi yazmak istedim.

daha önce yazdığım javascript resim galerisi, flash resim galerisi ve hollanda kökenli şu sitede bulduğum html ve flash örneklerini hala çok beğenmekle beraber flash teknolojisini kullanan +20 flash galerisini daha uzun uzun inceleyeceğinizden eminim.

%100 ücretsiz olan flashgaleri örneği daha önce bildirgec'te incelenmiş ve büyük beğeni almıştı. 11kb'lık boyutu da dikkat çekici.

tonyyoo'nun sayfasında da güzel bir flash galeri örneği var, demosunu izleyebilir direkt olarak indirebilirsiniz.

dezinerfolio sitesindeki flash galeri çalışmasında Flickr , Picasa desteği bulunmak, galeriyi izleyenlere printscreen tuşunu kullanıp kullanmamasına karar vermek, arkaplan müziği (mp3) ekleyebilmek gibi önemli özelliklerin bulunması yanında ücretsiz olması da ayrı bir güzellik.

yine hollandadan bir site. paulvanroekel in sitesinde cidden güzel örnekler var. picasa desteği olan bu örnek benim çok hoşuma gitti ancak ana sayfasında önemli "framework"leri kullanarak yapılmış yüklemeye izin veren çalışmalar bulunmakta. bu örnek aslında kendi içinde birçok örnek barındırıyor. çok detaya girmek istemiyorum ancak incelemeye değer bir site.

kart biçimli flash galerisi için ilgili sayfasına gidebilir galeri dosyasını çekebilirsiniz.

harici bir xml dosyasını kullanarak dinamik resim yükleme gibi bir işlem yapacaksanız, klasikleşmiş polaroid flash galerisi işinize yarayacaktır. yanılmıyorsam daha önceki flash galeri örnekleri içerisinde en çok beğenilen tarz polaroid idi...

basit sade ve işlevsel bir galerim olsun istiyorsanız photo viewer tam size göre. 3 seçenekli arka plan rengi var. (sitede ek olarak ipod şeklinde mp3 player da bulunuyor.)

flcarousel sitesinde 2 tür örnek var, flip ve carousel. ancak sitenizi ilk ziyaret edenler ilk etapta kullanmakta zorluk çekebilirler. klavye ayarları bulunmakta.

flash-gallery sitesinde 4 çalışma var. mega pack haricinde diğerlerinin ücretsiz versiyonları bulunmakta. stack-photo versiyonu polaroid örneğine benziyor. incelenmeye değer bir site.

simpler viewer da gayet hoş ve tanıdık bir stile sahip. indirebilir, uygulama detaylarına ilgili sayfasından bakabilirsiniz. 17 kb gibi bir boyutu var.

tiltviewer da gerçekten beğendiğim özgün bir uygulama. basit bir mantığı var ve hızlı bir uygulama. nasıl çalıştığına bakabilir, bilgisayarınıza indirebilirsiniz.

autoviewer ücretsiz bir flash galerisi. sitenizi ziyaret edenler açısından bakıldığında kullanımı en kolay olan galerilerden birisi olduğunu düşünüyorum. uygulama sayfası gayet hızlı çalışıyor.

postcardviewer adından anlaşılacağı üzere posta kartları şeklinde saçılmış bir ekran görüntüsü vermekte. eğlenceli...

flashimagegallery de yine basit bir flash galeri ancak pop-up da açtırma özelliği bulunuyor. çoklu galeri ve tekli galeri versiyonları var. indirme sayfasında güncellemelerden haberdar olabilmeniz için e-posta adresinizi de istiyorlar ama vermeden de indirebilirsiniz.

ücretsiz, esnek bir diğer flash galerisi de flashgallerygenerator 2 tür çalışma versiyonu bulunuyor, birinde mp3 ekleme şansınız bulunmakta. ayrıca fotoğraflarınızı watermark denilen kendi damganızı basma olanağı da sunuyor.

agilegallery picasa ile entegre olarak çalışıyor ve xml kullanıyor. flash desteği yanında ajax desteği de mevcut.

ideaography ile çoklu flash galerileri oluşturmak için önce incelemek ve beğeninize göre indirmek gerekiyor bence.

flash-gallery sayfasında 3 değişik versiyonda galeri bulunuyor. indirme sayfasında eğer belli bir ücret öderseniz galeri üzerindeki linklerini kaldıracaklarını söylüyorlar, tercih sizin.

Bu yazı pis 7li tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage