bildirgec.org

ui hakkında tüm yazılar

cu3er: 3D Slayt Uygulaması

angelsdemos | 22 November 2010 09:30

Cu3er, Flash ile hazırlanmış gelişmiş bir 3 boyutlu resim slayt uygulamasıdır. Tamamen özelleştirilebilen ve çok gelişmiş bir yönetim paneli bulunan Cu3er ile web sayfanızda eşsiz slaytlar hazırlayabilirsiniz.

Klasik 2D geçişlerin aksine Cu3er size 3 boyutlu efektleri sunar. Kullanacağınız her türlü görsele istediğiniz şekilde 3D efetk verebilirsiniz. 3D geçişler haricinde klasik 2D geçiş efektlerini de kullanmanız mümkün.

XML ile uğraşmak yerine Cu3er size cManager‘i sunuyor. Çevrimiçi yönetim paneliniz cManager ile uygulamanızı kısa zamanda hızlı bir şekilde yapabilirsiniz. Ayrıca yapacağınız slayt uygulamasını istediğiniz gibi kişiselleştirmeniz mümkün. Projelerinizi daha sonra kullanmak üzere saklayabilirsiniz. Bu sayede yeni görseller ekleyebilir, farklı efektleri deneyebilirsiniz.

Tasarımcıların Twitter’ı: Dribbble

algoz | 07 April 2010 14:54

Bir volkan patlaması gibi web alemine giriş yapan Twitter’ın bu göz alıcı halini seyre dalan web girişimciler/geliştiriciler, bu şok karşısında uğradıkları hipnotize halden kendilerini biraz olsun sıyırarak düşünmeye başladıkları ve Twitter’dan esinlenerek oluşturdukları yararlı bir uygulama olan Dribbble, Twitter’ın tematik bir modeli görünümünde.

Kullanıcılarına (Player), Twitter’ın “Ne yapıyorsun?” sorusunu (What are you doing?/What’s happening?) biraz daha özelleşetirerek/daraltarak, “Ne üzerinde çalışıyorsun?” (What are you working on?) sorusunu yönelten Dribbble, Başta görsel tasarım işleri ile uğraşanların olmak üzere, geliştiricilerin veya farklı alanlarda çalışanların, o anki çalışmalarının bir gıdımlık (shots) ekran görüntüsünü paylaşmaları üzerine kurulmuş bir düzene sahip.

Kullanıcı çalışmalarını; logo, illustration, typography, iphone, ui, design, website, icon, rebound, icons, web, blog, type, helvetica ve texture etiketleri ile kategorilendiren ve özellikle tasarım işleri ile uğraşanlar açısından oldukça kullanışlı bir Sosyal Medya aracı olabilecek olan Dribbble ile tasarımcılar; hem kendi çalışmalarını paylaşıp diğer kullanıcılardan geri dönüşüm alabilecekler hem de diğer kullanıcıların paylaştıklarından alacakları ilham ile hayal dünyalarını genişletebilecekler.

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

algoz | 04 March 2010 17:12

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.

Yaratıcı jQuery uygulamarı

admin | 05 January 2010 19:17

Birçok jQuery sitesinde sürekli aynı tarz uygulamalar bulunmakta. Galeriler, menüler gibi klasik jQuery uygulamarının dışında tasarımcılar tüm bunları kullanarak sıradışı uygulamalarda yapıyorlar. işte birbirinden farklı yaratıcı 5 jQuery uygulaması;

WebalonDemo

jQuery ile hazırlanmış sıradışı bir slider uygulaması. Allta bulunan iki buton ile neredeyse tüm sayfayı kaydırarak diğer sayfanın gelmesini sağlıyorsunuz. Kimlerle çalıştığınızı, mekanınıza kimlerin geldiği gibi birçok şekilde kullanılabilen hoş bir uygulama.

Bonadies ArchitectDemo

Bu uygulamayı herhangi bir sitede görseniz kesinlikle flash olduğunu düşünebilirsiniz. Farklı tasarımı ile hazırlanmış bu jQuery uygulaması tam küçük sitelere göre. Kişisel bir site veya küçük bir şirket sitesi için ideal bir uygulama.

Google’dan Webmaster’lara Yep Yeni Araçlar!

algoz | 16 November 2009 09:39

Günümüz web uygulamaları, statik HTML sayfalarından, zengin içerikli ve ziyaretçi ile etkileşimi ön planda tutan, interaktif bir yapıya dönüşmüş durumda.Bunun, istemci tarfındaki en büyük sağlayıcısı ise; istemci tarafa hızlıca yüklenebilen ve tarayıcı markaları farklı da olsa, yüksek perfonmans alınabilen, JavaScript ile hazırlanmış kullanıcı arayüzlerdir.


Google, web geliştiricilerin JavaScript ile; yüklenme ve çalışma hızı yüksek ve perfonmansı çok daha yüksek olan web uygulamaları geliştirebilmeleri için, Google Code Labs bünyesinde, Closure Tools adı ile, bir projeyi hayata geçirdi.

Google tarafından, Closure Tools bünyesinde sunulan araçlar:

Closure Compiler: Web geliştiriciler Closure Compiler ile; hazırlamış oldukları JavaScript kodlarını çok daha yüksek perfonmans alabilecekleri bir yapıya dönüştürebilecekler/derleyebilecekler.
Closure Compiler; hazırlamış olduğunuz JavaScript kodlarındaki ölü ve tekrar yazılmış kodların temizlemesi, sözdizimi(syntax) kontrolü yapılması ve değişken referanslarının kontürolü gibi bir dizi işlemi gerçekleştirmekte.

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 Tab

admin | 28 July 2009 02:48

Selam arkadaşlar,
Öyle gözüküyor ki uzun bir süredir yazmıyorum. YUI serisine devam edeyim dedim. Bu sefer başka frameworkle karşılaştırmayacağım tamam!
Çok uzatmadan konuya girelim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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">
<head>
<!-- Skini include ediyoruz. ;) -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/tabview/assets/skins/sam/tabview.css">
<!-- YUI a ait tablerin görünür olabilmesi için gerekli js dosyaları -->
<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/element/element-min.js"></script>
<!-- TAB için dosya-->
<script type="text/javascript" src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/tabview/tabview-min.js"></script>
<!-- yui-skin-sam -->
<script type="text/javascript">
var tabim = new YAHOO.widget.TabView("tabornegi", { activeIndex: 1 });
// şey activeIndex varya 0 koyarsan ilk tab gözükür 1 koyarsan 2.
</script>
</head>
<body class="yui-skin-sam">
<div class="yui-navset" id="tabornegi">
<ul class="yui-nav">
<li class="selected"><a href="#yerli"><em>Yerli Diziler</em></a></li>
<li><a href="#yabanci"><em>Yabancı Diziler</em></a></li>
<li><a href="#tumu"><em>Karışık</em></a></li>
</ul>
<div class="yui-content">
<div><p><li>Selena</li><li>Sihirli Annem</li><li>Kayıp Prenses</li></p></div>
<div><p><li>Lost</li><li>Prison Break</li><li>Ugly Betty</li><li>Super Natural</li></p></div>
<div><p><li>Selena</li><li>Lost</li><li>Prison Break</li><li>Ugly Betty</li><li>Super Natural</li></p></div>
</div>
</div>
</body>

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

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]