bildirgec.org

user interface hakkında tüm yazılar

5 Kullanılabilir jQuery Uygulaması

angelsdemos | 09 August 2010 10:00

Aşağıda yer alan basit ama kullanışlı jQuery uygulamaları her web servisinde kullanılabilir. Basit arayüzlü ve kullanımlı olan aşağıdaki tasarımaları web siteniz ile uyumlu hale getirebilir ve ücretsiz olarak kullanabilirsiniz. işte muhteşem 5 jQuery uygulaması;

Image Blur – Demo

Image Blur, her web uygulamasında kullanılabilecek oldukça hoş bir jQuery uygulamasıdır. Resimlere ilginç bir bulanıklık efekti veren bu uygulama resmin üzerine gidildiğinde netleşmeye başlayarak eski haline dönüyor. Tam tersinin yapılması ve geliştirilmesi muhtemel bir uygulama.

SeaHorse – Demo

Seahorse gelişmiş bir form denetim uygulamasıdır. Bu muhteşem uygulama ile web sitenize yerleştireceğiniz tüm formları kontrol edebilirsiniz. En fazla kaç karakter yazılacağı, istediğiniz karakterleri engelleme, metin veya sadece sayı bulunması gibi seçenekleri etkileyebildiğiniz gibi herhangi ek işleme css kodlarına gerek formlardaki yazı renklerini anında değiştirmeniz mümkün. Ayrıca ip adresi, e-mail adresi kontrolü de yapabilmekte. Bu ve buna benzer bir çok denetime bu uygulama ile sahip olabilirsiniz.

Free Vector UI Patterns For Web Apps

aftermath | 21 September 2009 08:01

Here are a set of ui patterns i’ve created for myself. You can download it for free; modify, share, do whatever you want with it. (adobe illustrator cs recommended. tested with adobe illustrator cs, adobe photoshop, adobe fireworks)

Download it: ui patterns.zip (2,3M)

package contains:

  • input box
  • text area
  • buttons
  • golden ratio box
  • links
  • pulldown menu
  • checkbox
  • optionbox
  • image placeholder
  • browse field
  • scroll bars
  • tabbed menu
  • tabbed box
  • header menu
  • search box
  • pagination
  • captcha
  • mini calendar
  • rating stars
  • breadcrumbs
  • uploading indicator
  • logo placeholders
  • volume slider
  • some text blocks
  • icons for: email, search, close, cancel, player actions, settings, information, calendar, fullscreen…

file formats

  • adobe illustrator 9 .ai
  • adobe illustrator cs .ai
  • adobe illustrator 9 .eps
  • pdf

let me know if you need the set in any other format or about the modified versions you make.

Yahoo! User Interface ile Resizable alan yapımı

s4l1h | 03 June 2009 11:56

Öncelikle Merhaba,
EDIT: KODUN BAŞINA 

1
2
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr">

Ekleyin. Kaynak kodlar http://pastebin.com/m28b2b08c
YUI Serisinin 2. dersinde nasıl resizable alan yapacağımızı göreceğiz. Neden jQuery yada Mootools kullanmadığımızı sorarsanız bunun nedeni jQuery ve Mootools’un UI framework’u olmaması. Her ne kadar jQuery UI olsa bile bunun ne kadar gelişmiş olduğu tartışılır. Konuya girelim.

1
2
3
4
5
 
<script type="text/javascript" src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 

<script type="text/javascript" src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script> 

<script type="text/javascript" src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script> 

<script type="text/javascript" src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script> 

<script src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/resize/resize-min.js"></script>

Yahoo! User Interface ile Drag & Drop

s4l1h | 28 May 2009 15:04

Yahoo Developer Network
Yahoo Developer Network

Merhabalar,
Spry Serisini bitirdikten sonra karşınızda bir kullanıcı arayüzü librarysi olan Yahoo! User Interface ile devam ediyoruz. YUI bir Yahoo Developer Network ürünü. Ayrıca başarılı olduğunu söylemek mümkün. YUI’ı LinkedIn gibi sitelerde kullanıyor. Sözü uzatmadan YUI ile Drag&Drop nesneler yapmaya başlayalım.

1
2
3
4
5
 
<script type="text/javascript" src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js" ></script>

<script type="text/javascript" src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js" ></script>

<script type="text/javascript">

var dragg = new YAHOO.util.DD("drag");

</script>

Şimdi koda baktığımızda ilk iki satırda YUI’ı sayfaya dahil ettik. Son satırda var dragg ile draggable olacak yerleri işaretliyoruz.

1
 
new YAHOO.util.DD("drag");

Drag yazılı yere herhangi bir ID yada element girebilirsiniz.

1
2
3
4
5
6
7
 
<style type="text/css">

.pref {

width:90px;

height:75px;

background-color:FFFF66;

}

</style>

ile de 90*75 Sarı renkte bir kutu oluşturduk. 

1
 
<div id="drag" class="pref">HEY! DRAG ME!</div>

ile de “Drag” id’li bir div oluşturduk. Herşey bukadar. Bundan sonrası sizin yaratıcılığınıza kalmış.
Dış bağlantılar:
YUI anasayfası
YUI blog

İyi Bir Kullanıcı Arayüz Tasarımı İçin 12 Kullanışlı Teknik

pinkfloyd | 27 March 2009 09:40

Bir süre önce, modern web uygulamalarındaki trendlere yönelik yazı dizisinin ilk bölümü olan 10 Kullanışlı Web Uygulama Arayüzü Tekniği yazısını yayımlamıştım. Diğer şeylerin yanısıra bu yazıda gömülü video blogları, özelleştirilmiş kontrol ve içeriğe göre değişen gezinti elementlerine dair bazı ipuçlarına yer vermiştim. Yazıda ayrıcı basılı düğmelerin durumu, modal pencerelerin çevresinde gölge kullanmak ve giriş sayfası üzerinden kayıt sayfasına bağlantı verilmesi gerekliliğinden de bahsetmiştik.

Bu yazı ise incelemenin ikinci bölümünü oluşturmaktadır: Web Uygulamalarında İyi Kullanıcı Arayüz Tasarımı İçin 12 Kullanışlı Teknik. Yazımızda ayrıca bu tekniklerin doğru bir şekilde kullanılması için uygulamalara nasıl entegre edilmesi gerektiğini de bulacaksınız. Eğer sizin de bu konuda paylaşmak istediğiniz görüşleriniz ve önerileriniz varsa yorumlarınızda belirtmekten çekinmeyin.

1. Önemli Değişiklikleri Belirtin

İyi kullanıcı arayüzü tasarımı için en önemli elementlerden birisi de sistem durumunun görünürlüğüdür. Kullanıcılar sitenin görünmeyen kısmında olan şeylerden ve eylemlerinin oluşturacağı sonuçlardan derhal haberdar olabilmelidirler. Daha sofistike bir sistem görünürlüğünü uygulamalarda kullanabilmek için web siteleri günümüzde, elbette, AJAX kullanmaktadırlar. Bildiğiniz üzere AJAX sayesinde kullanıcılar, web sayfalarının tamamını yeniden yüklemek zorunda kalmadan sadece belirli bölümlerinde değişiklikler yapabilmektedirler. AJAX, web uygulamalarının etkileşimliliğini ve yanıt verme yeteneklerini masaüstü uygulamaları ile neredeyse aynı seviyeye getirebilmektedir.

Yammer
Yammer, besleme üzerindeki yüm mesajlara bir değil üç adet efekt uygulamaktadır: Yavaşça belirme, aşağı kayma ve öne çıkarma.

Bu dinamik oluşumun anlamı, bir düğmeye tıkladığınızda sayfa yeniden yüklenmemesi ancak sayfada bir şeyin olmasıdır. Pek çok web sitesi halen AJAX’ı etkin bir şekilde kullanmamaktadır, bu sayede bazı kullanıcılar halen bir düğmeye tıkladıktan sonra bir şeyin olup olmayacağını ya da düğmelerin doğru şekilde tıklanıp tıklanmadığını bilememektedirler. Bu sorunun önüne geçebilmek için kullanıcı etkileşimlerinin her birine görsel geribildirim uygulamalısınız.

10 Web UI Kütüphanesi

pinkfloyd | 17 March 2009 18:56

Apple Interface Builder Icon

Bir sonraki web siteniz ya da zengin İnternet uygulamanız için bir Web Kullanıcı Arabirimi Kütüphanesi mi arıyorsunuz? O zaman yazının devamında bulacağınız 10 Adet Güzel Web Kullanıcı Arabirimi Kütüphanesi hem geliştirme süresini kısaltarak çalışmanızı basitleştirmeyi hem de daha kullanışlı ve güzel kullanıcı arabirimlerine sahip olmanızı sağlayacak.

1. IT Mill Toolkit

IT Mill Toolkit

IT Mill Toolkit açık kaynaklı bir çatı olup özellikle zengin İnternet uygulamaları geliştirmek için gereken widgetler ve araçlar için bir altyapı sunuyor. Standart Java araçlarını kullanarak tarayıcı uyumsuzluklarını, DOM’u ve JavaScript kütüphanelerini dert etmeden web uygulamaları geliştirebilirsiniz.

10 Kullanışlı Web Uygulaması Arayüzü Tekniği

pinkfloyd | 19 January 2009 19:02

Gün geçtikçe daha çok web uygulaması Web’e geçiş yapıyor. Platform sorunları ve kurulum gereksinimleri olmadan, bir hizmet olarak yazılım (software as a service) modeli oldukça çekici görünüyor. Web uygulama arabirimi tasarımı, özünde, web tasarımı iken, aslında daha çok üzerine tasarlandığı uygulamanın özelliklerine odaklanır. Masaüstü yazılımları ile yarışabilmek için web uygulamaları basit, yenilikçi ve karşılık veren kullanıcı arabirimleri sunabilmeli ve bunlar da, onları kullanan kullanıcıların ulaşmak istediklerine en kısa yoldan ve onları yormadan ulaşabilmelerine aracılık edebilmelidirler.

Geçmişte web uygulamalarını olması gerektiği kadar dikkate almıyorduk ancak şimdi, web uygulamalarını daha güzel ve daha kullanıcı dostu kılacak bazı tasarım çözümleri ve kullanışlı tekniklere bakmanın zamanı geldi. Bu makale, modern web uygulamalarında kullanışlı tasarım çözümleri ve tasarım öğelerine yönelik yaptığımız derinlemesine araştırmanın ilk bölümünü oluşturmaktadır. Yazının devamında, pek çok başarılı web uygulamasında kullanılan 10 kullanışlı arabirim tasarlama tekniklerini ve en iyi deneyim örneklerini bulacaksınız.

Lütfen yazıyı okuduktan sonra siz de kendinize özgü fikirlerinizi, yaklaşımlarınızı ve kodlama çözümlerinizi bizlerle paylaşmaktan çekinmeyin. Yazının ikinci bölümü de pek yakında yayınlanacaktır.

1. İsteğe Bağlı Arayüz Elementleri
Sadelik, kullanıcı arabirim tasarımında önemlidir. Ekranda ne kadar fazla kontrol elementi gösterirseniz, kullanıcılarınız onları anlamak için o kadar fazla zaman geçireceklerdir. Daha fazla seçenek olduğunda, kullanıcıların kullanabileceği seçenekler onlara daha belirgin gelecek ve onları taramaları daha kolay olacaktır. Bir arayüzü sadeleştirmek burada yazıldığı kadar kolay bir iş değildir, özellikle uygulamanızın özelliklerinden kısmak istemiyorsanız.

Microsoft’tan Küresel Ekran Prototipi

zabun | 05 August 2008 04:21

Microsoft’un bizi Surface ile tanıştırmasının üzerinden kısa bir zaman geçti. Şimdi bizlere Surface’ye benzer bir uygulamayı, küre biçimli bir ekran üzerinde sunuyor. Global Imagination şirketinin donanımını geliştirdiği sisteme, Microsoft el atarak küresel bir ekran arayüzü eklemiş. Küre, içerisinden projektör aracılığıyla yansıtılan görüntüler ile bir ekrana dönüşüyor. Uygulamalar, küre yüzeyine dokunulmasıyla kontrol ediliyor. Sistem multi-touch özelliği sayesinde, birden fazla noktadan dokunularak verilen komutlara aynı anda tepki veriyor. Küre yüzeyinde dokunmaya duyarlı bir katman bulunmuyor, bunun yerine kızılötesi kameralar temas edilen noktaları saptayıp, buna göre işlem yapıyor. Ekrana yansıtılacak görüntü verileri düz ekrandakilerden biraz farklı. Küresel ekranda normal biçimde izlenen aynı görüntü verileri, düz

ekrana verildiğinde deforme bir şekilde gözüküyor. Çünkü görüntüler küresel bir alanda bozulmayacak şekilde yazılımsal olarak bükülüyor. Ekran üzerinde yapılabilen; fotoğraflar üzerinde oynamalar, fiziki dünya haritası ve 360 derece video uygulamalarında, ekranın şeklinden gelen getiriler kullanılmış. Ekranın bir tarafından diğerine, çalışılan uygulamayı “ışınlayabilme” kabiliyeti ise hayli ilginç.

[engadget] [video]

Ücretsiz simgeler

eburhan | 25 December 2007 19:55

Web sitenizde birşeylerin eksik olduğunu mu hissediyorsunuz? Web sitenize biraz daha şıklık mı katmak istiyorsunuz? O halde bu sayfada bahsedilen 50 simge kaynağından simgeler indirerek işe başlayabilirsiniz.

Kendisini yazılım ansiklopedisi olarak tanımlayan downloadpedia sitesinin Free Icons and Buttons sayfasında birbirinden güzel simge ve buton setleri bulabilirsiniz. Hepsi de ücretsiz.