bildirgec.org - oxara - beğendikleri

Bu Web Bileşenlerini Denemek Lazım: Alloy UI

oxara — Thu, 04 Mar 2010 15:12:00 GMT

Html ile yapılandırılmış, Css ile biçimlendirilmiş ve JavaScript'le de hareketlendirilmiş bir kullancı arayüzü (User Interface/UI) kütüphanesi/çatısı olan Alloy UI, bünyesindeki şık tasarımlı ve çok işlevli bileşenleri ile, dinamik ve zengin içerikli web uygulamalarının/sitelerinin, çok daha kısa sürelerde tamamlanmasını sağlamakta.

Web uygulamalarınızda kullanabilmeniz için sadece YUI Library'e ihtiyaç duyan Alloy UI bünyesindeki bileşenlerden bazıları:

AutoComplete: otomatik tamamlama.

Treeview Ağaç görünümlü menü.

Dialog Diyalog/İletişim pencereleri.

Ratings Puanlama.

Loading Mask Yükleniyor maskesi.

Liferay (açık kaynak kodlu portal sistemi) geliştiricileri tarafından geliştirilmiş olan ve şu anda ön sürümü kullanımda olan Alloy UI'nin kararlı (stable) sürümünün 1 Nisana kadar kullanıma sunulması hedeflenmekte.

Henüz eğitici dokümanları hazırlanmamış olan Alloy UI bünyesindeki tüm bileşenleri buradan inceledikten sonra buradan indirip, deneyebilirsiniz.

Bonus+++:
+70 Free Icon Sets

+Google'dan Webmaster'lara İpuçları
+SEO'yu Google'dan Öğrenmeye Başlayın

Kaynak: Alloy UI
Paylaş: Sosyal Medya paylaşım sayfası burada!
algoz Takip Noktaları:
Blog FriendFeed Twitter Facebook E-posta RSS Mobil iPhone

Bu yazı oxara 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ımında sık yapılan 10 hata

oxara — Tue, 15 Dec 2009 17:27:00 GMT

web tasarımıyla uğraşıyorsanız mutlaka tasarımınızı mükemmeleştirmek için çalışırsınız haklısınız da, bir sitenin tasarımı ne kadar güzel olursa sitenin başarısı da o kadar artar, siz de bu yazımı inceleyerek web tasarımında yapılan hataları ve web tasarımı yaparken dikkat edeceğiniz noktaları görebilirsiniz. yararlı olmasını umuyorum.

resmin kaynağı:http://theprodesigner.com/top-ten-mistakes-in-web-design/

1.Arama(search) kısmını iyi tasarlayamamak

Sitenizi tasarladınız arama kutusunu da eklediniz ama hazırladınığınız arama bölümü yeteri kadar kullanışlı mı? arama bölümünü kullanıcılarınızın kolaylıkla ulaşabilecekleri ve aradıklarında uygun sonuçları bulabilecekleri şekilde tasarlamanız sitenizin daha başarılı olmasını sağlayacaktır.

2.İçeriği iyi sunamamak

Sitenize yazı eklediniz fakat yeteri kadar iyi sunabiliyor musunuz? yazdıklarınızın içeriği kadar nasıl göründüğü de önemli yazınızı okuyucuyu sıkmayacak bir arka planda ve uzunlukta okunabilir yazmalısınız.

3.font boyutunu ayarlamamak

web sitenizi tasarlarken varsayılan font seçeneğini kullanmak zorunda değilsiniz, yazınızın okunabilirliği için yazınızın boyutu da önemli bu yüzden rahat okunabilecek bir font seçmelisiniz.

4.başlıkları arama motorlarına göre yazmamak

Web sitenizde bir konu hakkında yazı yazdınız, başlığını eklediniz, yayınladınız peki yazınızda kullandığınız başlık arama motorlarında aranabilecek bir şey mi? buna dikkat ederek yazarsanız arama motorlarından sitenize ulaşan ziyaretçi sayısını artırabilirsiniz.

5.Yazılar için pdf formatını kullanmak

Yazdığınız yazılarda pdf online okumayı kullanmayın sitenizi ziyaret eden kişiler pdf formatında yazı okumayı istemezler yani pdf formatı web tasarımında tercih etmemeniz gereken bir formattır.

6.tıklanan linkleri aynı renkle göstermek

Ziyaretçilerinizin tıkladıkları linkleri farklı renkte göstermeniz daha iyi olur çünkü ziyaretçileriniz tıkladıkları linki unutup aynı linki bir daha tıklayabilir ve aynı sayfayla karşılaşmaları siteniz için iyi olmayacaktır.

7.sayfanın reklam gibi görünmesi

Web sayfanızda kullandığınız resimlerle ziyaretçilerinizi yönlendirebilirsiniz fakat bunu yaparken kullandığınız resimlere dikkat etmelisiniz bu resimler reklam gibi görünmemeli kullandığınız resim ziyaretçilerin gözden kaçıraçacığı kadar da olmamalı dengeyi bulmak size kalıyor.

8.değişik bir tasarım yapmak

Değişik bir tasarım derken tabii ki özgün bir tasarımı kastetmiyoruz. tasarımınız elbette özgün olabilir fakat ziyaretçilerinizin sitenizde gezmesini, menülere ulaşımını zorlaştırmamalı.

9.Tıklanan sayfaları yeni pencerede açmak

Sitenizdeki linkleri yeni pencerede açılacak şekilde ayarlamayın çünkü ziyaretçiler birden ekrana fırlayan pencelerden hoşlanmazlar.

10.yeterli bilgi vermemek

Ziyaretçileriniz web sitenizden bilgi almak için web sitenizi ziyaret ederler. siz de web sitenizde yazdığınız bir konuda ziyaretçilerinizin merak edebilecekleri bilgileri vermelisiniz örneğin bir dizi hakkında bilgi veriyorsanız dizinin hangi gün, saat kaçta yayınlandığını da yazmanız yararlı olacaktır.

kaynak

Bu yazı oxara 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ım ve Evrim

oxara — Wed, 02 Dec 2009 12:51:00 GMT

Yıl 1990. İlk web tasarımları yayınlanmaya başlandı. Web tasarımcılar (ki sayıları şimdiye göre çok daha az) sadece metin tabanlı sayfalar hazırlıyorlardı. Metinler ve linkler haricinde görsel olarak herhangi bir şey görmek olanaksızdı. Ancak bu uzun sürmedi. Sonunda css tabanlı tasarımlar ve flaş keşfedildi, buraya kadar gelindi ve daha da ilerleyeceğe benziyor.

İlk web sayfaları
Sıcak bir ağustos günü Tim Berners-Lee içinde birkaç link olan sadece metinden oluşan ilk web sayfasını yayınladı. Birkaç paragraf dışında pek bir şey olduğu söylenemez. İnsanlara World Wide Web (www)'in olduğu hakkında bilgi içeren bir sayfaydı bu.
Html (HyperText Markup Language) biraz daha gelişince paragraf, başlık, link vb. özellik geldi. Sonraki sürümlerinde sonunda görsellik eklenebiliyordu.
1994 yılında ise World Wide Web Konsorsiyumu (W3C) kuruldu.

ilk web sayfası (1992)

Yahoo! (1996)

Altavista (1996)

Tablo tabanlı tasarımlar
Html'de tablo özelliği gelince yeni tasarımlar oluşmaya başladı. Birbirinden farklı tablo tasarımları oluşturuldu ve arkaplanlarına resimler koyuldu. Bunların estetik görüntüdeki ilk adımlar olduğunu söyleyebiliriz.

Bu dönemde gif'ler boşluk kontrolü için idealdi. Büyük şirketler bile tasarımlarında boşluklar için gif ile sağlardı. (Bakınız; Spacer GIFs)

Fakat tüm bunlar tasarımcılara yetmiyordu. Daha karmaşık daha görsel tasarımlara adım atmak istiyorlardı.

W3C (1998)

yahoo! (2002)

Altavista (2002)

Flaş tasarımlı tasarımlar
Flaş (FutureSplash Animator , önce Macromedia Flaş daha sonra Adobe Flash) 1996 yılında geliştirildi. html'den daha güçlü tasarımlar yapılmaya başlandı ve giderek yayıldı. Flaş ve html birlikte tasarımcıları daha çok tatmin etmeye başladı.
Flaş öncelikle CD-ROM için içerik oluşturma amacı ile yapıldı. Daha sonra web sitelerinde bazı video vb. gibi yayınların daha az alan kaplaması için kullanıldı ve giderek gelişti.

Flaş ve animasyon özellikleri ile görsellikte bir adım daha atılmış oldu.

Dinamik HTML (DHTML)

Flaş gelişirken ve animasyonlu tasarımlar modayken html'e yenilikler getirildi. Flaş ile yapılan bazı interaktif özellikler dhtml ve javascript ile web sayfalarında uygulanabilmekteydi.

3DML, 3 boyutlu web siteleri oluşturmak için geliştirilen az bilinen bir dildir. 1996 yılında Michael Powers tarafından yapıldı. Michael Powers aynı zamanda XML dilini bulunmasıyla bilinir. 3DML günümüzde hala var fakat tarayıcılara yüklenmesi gereken bir eklenti ile çalışmakta. Fakat günümüzde flaş tasarımlar daha ağır basmakta.

CSS tabanlı tasarımlar
CSS tabanlı tasarımlar popülerliğini 2000'li yıllarda kazanmaya başladı. Sade sayfalara göre daha hoş görünüm. Flaş içeriğe göre daha hızlı yüklenmesi avantajlarıydı. Ayrıca içeriğe dokunmadan tüm tasarımı değiştirme olanağınız bulunmakta.

W3C (2003)

W3C (2009)

Yahoo! (2009)

Altavista (2009)

Web tasarım hala gelişmeye devam etmekte olan bir sektör. Peki ya gelecekte neler olacak?

Kaynak ; sixrevisions

Bu yazı oxara 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ı için Hatırlatıcı Notlar

oxara — Wed, 02 Dec 2009 17:25:00 GMT

Birçok web tasarımcı satırlarca kodu aklında tutamaz. Bu yüzden kendilerine ait notları ya da baktıkları birkaç yer bulunur. Burada wordpress,html,css,jquery,photoshop vb. gibi birçok konuda notlar,ipuçları ve hileler bulunmakta ;

Liquidicity (Wordpress yardım notları)

WP-The Loop (Wordpress yardım notları)

Theme Development Check List (Wordpress Tema Geliştirme Kontrol Listesi)

jQuery ( jQuery yardım notları)

jQuery 1.2 Cheat Sheet (jQuery Hileleri)

PHP reference sheet (Basit php hatırlatma notları)

GoSquared (Php notları)

Creative Tip (Photoshop'ta pen tools için ipuçları)

Adobe Photoshop CS4 Keyboard Shortcuts ( Photoshop CS4 klavye kısayol listesi)

CSS Cheat Sheet (V2) (Css notları)

RGB Colour codes (RGB renk kodları)

GoSquared(Html notları)

HTML character entities (html karakter listesi)

HTML Elements and Attributes (html elemanları ve özellikleri)

Fireworks CS3 (adobe fireworks cs3 notları)

Illustrator CS3 (adobe illustrator cs3 notları)

Kaynak ; webanddesigners

Bu yazı oxara 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

Yüzlerce uyarı işareti - ikon setleri

oxara — Fri, 04 Dec 2009 10:14:00 GMT

Her web tasarımcının arşivinde bulunması gerektiğini düşündüğüm, website tasarımları ve bloglar için kullanışlı, yüzlerce uyarı işaretinden oluşan ikon setleri .

50 adet uyarı işaretinden oluşan ikon seti

50 Adet işaret sembolleri ikon seti

300'den fazla trafik işaretinden oluşan ikon seti

102 sembollük ikon seti

100 adet yeniden boyutlandırılabilir vektörel ikon arşivi

27 Uyarı İşareti - İkon seti

125 Uyarı İşareti - İkon Seti

Kaynak>>

Bu yazı oxara 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

Tooltip uygulamaları - 1

oxara — Sat, 05 Dec 2009 08:02:00 GMT

tooltip, metinlere,görsellere site içerisinde açılan bilgilendirme penceleridir. Küçük popuplar şeklinde açılan bu uygulama sayesinde bir konu hakkında ipucu, resim ya da reklam yapmanız mümkün. İşte popüler tooltip uygulamaları;

Prototip 2

Kolay ve basit şekilde istediğiniz kelime ya da kelime grubuna tooltips oluşturmanızı sağlar. Javascript ile hazırlanan bu uygulama ile görsel nesne, yazı link vb. ekleyebilirsiniz.

Coda Popup Bubbles

Coda ile Küçük bir popup açarak bilgi formu hazırlayabilirsiniz.

Advanced Tooltip

Fotoğraflarda insanların yüzlerini işaretleyip açılan popup'ta onlar hakkında bilgiler verebilirsiniz.

Easiest Tooltip

Belli bir link veya görsel içerikli bir yazı yazdığınızda açılan popup ile görsel nesneleri gösterebilmenizi sağlayan tooptip uygulaması.

Easy Tooltip jQuery Plugin

Yazınızda yer alan kelimelere açıklama, reklam vb. için tooltips açabilirsiniz. Ayrıca jQuery ile hazırlanmış bir uygulama.

jTip

HttpXMLRequest nesnesini kullanarak önceden hazırladığınız sayfayı tooltips'e çekebilen hoş bir uygulama.

Nice Titles

Bahsettiğiniz konu hakkında ipuçları, linkler vb. yazabileceğiniz transparan olarak popup açılan hoş bir uygulama.

Tooltip to Forms

Sitenizde hazırladığınız formlarda bilgi için popuplar açmanızı sağlayan tooltip uygulaması.

jQuery Tooltips

jQuery ile hazırlanmış, resimlere bilgi metinleri ekleyebileceğiniz bir uygulama.

Ajax Tooltip

Ajax ile hazırlanmış metinlere popup açmanızı sağlayan tooltip uygulaması.

Kaynak ; vandelaydesign

Ayrıca Bakınız ;

Bu yazı oxara 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

facebook tarzı jquery eklentiler

oxara — Wed, 09 Dec 2009 07:45:00 GMT

facebook kullanıcı arayüzü çekici ve popüler aynı zamanda kullanımı en kolay arayüze sahiptir. tasarımcılar için bu tür kullanıcı arabirimi oluşturmak büyük bir mücadeledir. aşağıda belirtiğim jquery eklentiler, tasarımımızı kolaylıkla facebook arayüzü oluşturmak için yardımcı olacaktır.

1-facebook
facebook`daki gibi video ve fotoğrafları görüntüleyebileceğiniz bir lightbox uygulaması.

2- facebook üyelik formu eklentisi
facebook`un sade ve gösterişli üyelik formu

3- dropdown açılır menü jquery eklentisi
profilinizdeki aşağı doğru açılan menüler (ayarlar çıkış vs.)

4- facebook stilinde jquery tooltip eklentisi

5- facybox
fotograflarınızı görüntüleyeceğiniz bir ligtbox uygulaması.

6- facebook complete
facebook arkadaş listenizdeki gibi otomatik tanımlama formu eklentisi.

7- facebook stilinde jquery chat online arkadaşlarınızla anlık mesajlaşma imkanı sağlayan chat uygulaması.

8- facebook gizlenen yorumları göster eklentisi
sayfada yorumların çok yer kaplamamasını istiyorsanız yorumları belli aralıklarla gizleyebilirsiniz.

9- facebook textarea eklentisi
bu jquery eklentisi sizin metin alanını büyümek ve içeriğine uygun küçültme yapar. elastiki bir yapısı vardır.

10- facebook duvara yazma uygulaması
bu eklenti sayesinde duvara yazılanları denetleme yetkisine sahip olursunuz.

11- facebook tanıyor olabileceğiniz kişileri sildiğinizde kaybolması

12- textboxlist jquery eklentis (metin kutusunda öneriler)

13- metin içerisinde otomatik öneri
metin kutusuna yazdığımız metin hakkında metinin yeri önemli olmaksızın tavsiye uygulaması.

14- facebook tarzı profil düzenleme (profil photo edit)

facebook'daki gibi çok kullanılan jquery eklentileri görmüş olduk eğer hepsini görmek isterseniz buraya bakabilirsiniz.

Bu yazı oxara 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

Photoshop İle İlgili Her şey...

oxara — Tue, 30 Sep 2008 11:38:00 GMT

Photoshop ile ilgili her şey olmasa da gerçekten birçok şey şu yazıda derlenmiş.

Piyasadaki dersler, video dersler, ücretsiz psd dosyalar, brushlar, texturesler, patternslar, shapesler, Gradientler ve daha bir çoğu..

Dersler

70 Güzelleştiren rötuşlama dersi

15 Harika Yazı Efekti

41 Güzel Fotoğraf Efekti

45 Foto Manipülasyon Dersi

11 Sinema Posteri Dersi

15 Reklam Afiş Tasarım Dersi

70 Korkunç Yüz Efekti

18 Video Ders

53 İllustrator Yardımıyla yapılan Photoshop Efekti

45 Menü Tasarım Dersi

20 Güzel Web Tasarım Dersi

27 Web Tasarım Dersi

15 Yazı Efekti

25 Vectörel Karakter Tasarımı

Photoshop ile Tipografi çalışması

Artık gerisine siz bakarsınız.

Bu yazı oxara 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

İlham Verici 3D Tipografi Çalışmaları

oxara — Sat, 20 Sep 2008 10:04:00 GMT

Tipografi sanatı aşıkları için hazırlanan bu bildiri, üç farklı tasarım bloğunda yer alan 3D tipografi listelerinin bir derlemesidir. Xara 3D, Maya 3D, Photoshop ve Illustrator gibi programlarda hazırlanan çalışmalar fazla söze gerek bırakmıyor.

38 Adet Güzel 3D Tipografi Çalışması

25 Adet Güzel 3D Tipografi Çalışması #1

25 Adet Güzel 3D Tipografi Çalışması #2

22 Adet Güzel 3D Tipografi Çalışması

Ayrıca, tipografi sanatı aşıkları için: 21 Adet İlham Verici Tipografi Çalışması.

Bu yazı oxara 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

Yaratıcı reklamcılığa dair 39 şaheser

oxara — Mon, 15 Sep 2008 06:00:00 GMT

"Bir reklamdan ne beklenir?" diye sorduğumuzda cevabımız tabiki ; İlgi çekici, Şaşırtıcı, Özgün ve Bir kere kullanmaya yönlendirici olmasıdır. İşte bu bildirimde sizlere reklamcılık alanında şaheser olarak kabul gören 39 çalışmayı paylaşacağım.