bildirgec.org - toprakbuken - beğendikleri

gerçek zamanlı görsel CSS editörü "Stylizer"

toprakbuken — Sat, 22 Nov 2008 14:34:00 GMT

CSS temelli biçimlendirmenin, son yıllarda profesyonel web tasarımcılarından ziyade, her kesimden insanın kullanımı için, gerek Web 2.0 modasının, gerekse de W3C konsorsiyumunun standardlarında şart koşmasından ötürü kullanımının artık kaçınılmaz olduğu bir gerçek. (Ki Web konusunda kulağını hep ters taraftan tutan Microsoft'un SharePoint Portal Designer ve Expression Web adlı yazılımlarında da üstüne basa basa durulmaya başlanmış olması bunun bir göstergesi.)

Ancak "slice"lar, "div"ler ve "style" ların yerleşimini yapmak, veyahut bunları sonradan düzenleyerek, tasarımda değişikliklere gitmek; eskiden FrontPage'de olduğu gibi metin kutularını açıp,düzenleyip, içerisine HTML bileşenleri ve formlar atıp, onları birer frame gibi kullanmak kadar kolay olmuyor. Blogunun temasını düzenlemek isteyen biri veya kurumsal sitesinde yerleşim planını düzenlemek isteyen bir yönetici, ya metozori bir şekilde çarşaf çarşaf dökümanlar okuyor ve "ASCII Editor" üne çalakalem girişiyor, veya Dreamweaver yazılımını sökmek için işi gücü kenara koyuyor, kafayı kırana kadar CSS ve div kasıyor.

Ya da benzeri zorluklar, CSS de tanımlanan yerleri görsel olarak göremediğinden defalarca deneme yanılma yoluyla CSS düzenleyip, 3. parti programlarla önizlemeler yaparak zaman kaybeden web tasarımcıları veya kullandığı içerik yönetim yazılımında (portal,blog,forum,galeri,anket vb.) başlık,yazı gibi alanları düzenlemek isteyen kullanıcılarda da karşısına çıkıyor.

Özellikle sitelerin çoğunda popüler içerik yönetim yazılımlarının kullanıldığını ve hızlı görsel düzenlemeye ihtiyaç olduğunu gören Mozilla vakfı ve iş ortağı Skybound software, bu yaraya merhem olacak güzel bir yazılım ile çıkagelmiş : "Stylizer"

Yazılım, içerisinde gömülü olarak bağımsız bir "Firefox 3" web tarayıcısı barındırıyor ve doğrudan bu yolla yaptığınız düzenlemelerin Gecko temelli tarayıcılarda önizleme alınması sağlanıyor. (Seçenekler içinde IE7 ve Firefox görüntüleme seçilmiş) Aynı zamanda program, tamamen portatif olarak tasarlanmış. Yani istediğinizde tek bir exe dosyasını flash diskinize atıp istediğiniz yerde kullanabilirsiniz. Toplamda da sadece 9,2MB yer kaplıyor.

Birçok içerik yönetim yazılımı ile uyumlu olan yazılım, aynı zamanda kendi yazdığınız web sitelerinin de CSS biçimlendirme dosyasını kolayca düzenlemenize, ve yaptığınız değişiklikleri de olduğu gibi kaydetmenize olanak tanıyor. Bu özellik, özellikle Wordpress, Joomla! gibi içerik yönetim sistemlerini kullanarak site hazırlayan webmasterların çok işine yarayacak.

Aynı zamanda yazılım içerisinde yaptıklarınızı gerçek zamanlı görebilmeniz, CodeGrid sistemi ile hataları anında düzeltebilmeniz, çift tıklama ile herhangi bir alandan renk seçim renklendirmede kullanabilmeniz, Şerit metre ile piksel cinsinden ölçüm yapabilmeniz gibi hoş özellikler var.

Ha tabi bir de düzenlemeyi istediğiniz bölgenin kodlarını tek tıklama ile bulmanızı sağlayan Bullseye aracı, özellikle yeni başlayanlar ve zaman kazanmak isteyen tasarımcılar için hayat kurtarıcı bir araç.

Tüm düzenmelerin yapılmasından sonra, ister dosya sisteminize, ister programdan çıkmadani FTP nize giriş yaparak web sunucunuza düzenlenmiş CSS dosyanızı anında kaydedebilir ve değişiklikleri hemen hayata geçirebilirsiniz.

Tabi düzenlenen biçimlerin, bütün web tarayıcılarında sorunsuz çalıştığını ve W3C uyumlu olacak şekilde kaydedildiğini sanırım söylememe gerek yok.

Programın iki ayrı türü bulunuyor.
Kısıtlı özelliklere sahip "Basic" ve tüm özellikleri kullanabildiğiniz "Ultimate" sürümü.

Aslında Mozilla'nın projeler kısmında bahsetmesi üzerine bedava olacağı düşünülse de, her işe yarayan ve hayat kurtaran yazılımda olduğu gibi, bu yazılım için de Ultimate sürümü için 140 USD kadar bir bedel ödemeniz gerek. ancak özellik kısıtlaması olmadan, 14 gün boyunca bütün özelliklerini kullanabiliyorsunuz.

Yazılımı incelemek, ekran görüntülerini görmek ve tanıtım videosu için BURADAN

Yazılım özelliklerine bakmak için ise BURADAN

Dipnot : Site, QuickTime videosu içeriyor, İzlemek için QuickTime eklentinizin kurulu olması gerekmekte.

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

Adobe Flash kullanmadan sIFR yapımı

toprakbuken — Mon, 03 Nov 2008 12:22:00 GMT

Son zamanlarda web tasarımcılarının alet çantasında en önemli bölmede bulunan sIFR uygulaması ile tasarladığımız siteler artık göze daha güzel görünüyor. İsterseniz demosuna bir göz atın!

CoffeeCup - sIFR Font Maker

sIFR nedir?
Eğer bir web tasarımcısı olarak bu uygulamayı henüz duymamışsanız siteleriniz biraz eski moda görünüyor olabilir. sIFR, ziyaretçilerde bulunmayan yazı tiplerini sitenizde kullanabilmenizi sağlıyor. Bu konu hakkında Muhammet Sevim'in kullanım kılavuzu makalesini ve sIFR tanıtım makalesini okuyabilirsiniz. Ayrıca uygulamanın fikir babası olan Mike Davidson'ın konu hakkındaki makalelerini de buradan inceleyebilirsiniz.

Flash Neden gerekli?
Bu tasarımcının hayatını kurtaran uygulama basit bir swf dosyası içeriyor ve bu dosya tüm karakterleri tanıyarak sitenizin yazıtiplerini değiştiriyor. Bu swf dosyasını açıp içine kullanmak istediğiniz yazıtipiyle 3 harf yazıyorsunuz ve kaydediyorsunuz. Tabi Bu dosyayı açabilmek ve kaydedebilmek için Adobe'nin paralı Flash programı gerekiyor. Eğer Flash programına sahip değilseniz sizi ücretsiz bir sIFR yaratıcı programıyla tanıştırayım:
CoffeeCup - sIFR Font Maker!

sIFR kullanılan bir sayfa

Ücretsiz bir çözüm
CoffeeCup'ın sIFR Font Maker programı tüm tasarımcılar için ücretsiz indirmeye sunulmuş. Resmi siteden programı indirdikten sonra ufak bir kurulum yapıyorsunuz ardından kullanmak istediğiniz yazı tipinin normal, kalın ve italik tarzlarının dosya yolunu programa göstererek Save As butonuna basıyor ve sIFR'de kullanacağımız swf dosyasına sahip oluyoruz.

Web tasarımcıların alet çantasında kesinlikle bulunması gereken sIFR Font Maker'a şu an için tek alternatif online hizmet sunan sifrgenerator sitesi. Fakat bu sitede sadece TrueType yazıtiplerini kullanmak zorunda kalıyoruz. Oysa CoffeeCup bize Opentype ve diğer yazıtiplerini de kullanma imkanı sunuyor.

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

etkileyici ışıkla boyama örnekleri

toprakbuken — Tue, 21 Oct 2008 14:15:00 GMT

şu bildiride de bahsi geçen ışıkla boyama sanatı, genellikle karanlık ya da fazla ışığa maruz kalmayan bir ortamda, bulb modunu kullanarak veya uzun pozlama yaparak herhangi bir ışık kaynağı (genellikle fener) ile, çalışılan konuda istenilen yerlere ışık düşürülerek filme (sensöre) yansıması şeklinde uygulanıyor.

lightmark

Bu sanatı uygulayan iki fotoğrafçı Cenci Goepel ve Jens Warnecke, dünyadaki birçok yeri gezmiş ve bu yerlerde uyguladıkları ışıkla boyama sanatının muhteşem örneklerini sergilemişler.

lightmark

sonuç:
ışık, karanlık ve hareketin etkileyici birleşimi.

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

ışıklı origami ve yapım aşamaları

toprakbuken — Mon, 24 Mar 2008 17:50:00 GMT

origami başlı başına muhteşem bir sanatken, bunun bir de eletkronik ile birleştirildiğini gördüm. hem de ev yapımı.

kağıttan yapılmış bir feneri andıran bu origami kübünün içinde batarya ve ufak bir led mevcut. led ve batarya arasında ki bağlantı ise origaminin yapılacağı kağıdın üzerine esnek alüminyum folyo yapıştırılarak (ısı yardımıyla) sağlanmış. iki farklı alanın birleştirilmesi ile göz alıcı ve haliyle yaratıcı bir ürün ortaya çıkmış. eğer sizde yapmak isterseniz yapılışının aşamaları ve resimli anlatımlarına buradan ulaşabilirsiniz.

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

21 yeni web servisi

toprakbuken — Mon, 13 Oct 2008 19:14:00 GMT

atmail php ile yazılmış, sade ve güzel, ajaxlı açık kaynak kodlu bir mail client. demosu için

Graphsy web üzerinden yeni bir grafik çizme servisi. İhtiyacınız olan tek şey bir web browser. Şimdilik alpha yayınında ve her geçen gün yeni özellikler ekleniyor.

Fx: effect generator

Fx online flash tabanlı efekt üretgeci. bu üretgeç ile fotoğraf slaytları (yaklaşık 15 farklı efekt), yazı efektleri (15 örn), introlar (7 örn.), bannerlar (7 örn), kutlamalar, butonlar, kaydırmalı animasyonlar, efektler (kar, gece yıldızları, disko zemini) ve video (isterseniz eski stilde (çizgili) üretebilirsiniz. Ayrıca editöründe yazı, fotoğraf, şekil, kaydırma çubuğu, youtube'dan video ekleyebilme imkanı var. Publish diyerek, hızlı posta bölümünden MySpace, Friendster, Facebook, Orkut, Bebo, Hi5, Piczo, Xanga, MiGente gibi sitelere posta yapabilirsiniz. ya da isterseniz javascript veya javascript ve Fxml kodları olarak alabilirsiniz.

PlanningWiz3: Online oda planlayıcısı. odanızın ebatlarını giriyorsunuz, daha sonra,
mobilya kısmından bir kategori seçerek (Aile odası, salon, ev sinema sistemi, çocuk odası, yemek odası, mutfak, ev ofisi, bahçe vs...) odanızı yerleştiriyorsunuz.

Ayrıca hazır ev planları da var. bir zemini seçerek onu ahşap yapabiliyorsunuz (bolca çeşidi var).
yine kapılar, duş kabini, pencere vs... eklemeler yapılabiliyor.

podipodi kutusunu web sitenize değişik fonksiyonlar katmak için kullanabilirsiniz. bu kutuyu sitenize ekledikten sonra shift space tuş kombinasyonundan sonra bir metin girdisi isteniyor. buraya yazabileceğiniz komutlar ve yapacağı işlevler şöyle:
Shift Space: Open/Close Podipodi box
ESC: Close Podipodi box ve açık olan bütün servisleri kapatır.
calculate [expression]: basit matematiksel işlemleri hesaplamak için.
clocks: Italya, Amerika ve Japonya'daki saatleri Google'ın saatlerinden gösterir.
credits: web site credits
date: bilgisayardaki zamanı güzel bir takvim şeklinde gösterir.
find [text]: Sözkonusu sayfada arama yapmayı sağlar. Aranan kelime renklendirilir.
flickr [terms]: Flickr'da fotoğraf aramayı sağlar.
google [terms]: google'da arama yapmayı sağlar.
google images [terms]: google'ın görsellerinde arama yapmayı sağlar.
help: söz konusu site için yazılabilecek komutlar
info: site hakkında ayrıntılı bilgi
open [section]: Sitenin bir bölümünü açmayı sağlar.
say [words]: yazdığınız kelimeleri gösterir.
send comment: site sahibine yorum gönderir.
sitemap: site haritası
tell a friend: arkadaş davet etmeye yarar.
track my ip: IP address, hostname, proxy server, country name, Internet service provider görüntüler.
twitter: Twitter hesabındaki son 20 durumu gösterir.
weather: lokal hava durumunu gösterir (bende çalışmadı).
yahoo [terms]: yahoo'da arama yapmayı sağlar.
yahoo images [terms]: yahoo görsellerinde arama yapmayı sağlar.
youtube [terms]: youtube üzerindeki videolarda arama yapmayı sağlar.

comfypage, ücretsiz online web site oluşturucu. örnekler için

mutapic, online resim, grafik üretgeci.

mixxt: kendi sosyal ağını kurmayı sağlar. türkçe dil desteği de var.

deyey; isim kartı oluşturucu.

10-

ourbania; yapıların ansiklopedisi, wikipedia'sı.

11- mimoa; modern mimarlıkla ilgili olanlar için.

12-

designerpages; mimar ve tasarımcı sayfaları.

13-

maxtango: E-card'ınızı yükleyin, herkesle paylaşın.

14- pixelnovel; Fotoğraflarınızı Flickr'a atmak için Adobe Photoshop plugin'i.

15-

jukepix ile sevimli fotoğraflar oluşturun!

16-

frenzoo ile kendi 3 boyutlu karakterinizi oluşturun.

17-

idiomag; your magazine.

18-

subhub: kendi web sitenizin içeriğinden para kazanmanızı sağlayacak bir site.

19-

icharts.ne: grafik hazırlama ihtiyacınızı karşılayacak bir site. xls dosyasından veya el ile bilgi girişi yapılabiliyor. Ayrıca birçok kategoriye dağılmış halde diğer kişilerin hazırladığı grafikler bulunuyor.

20-

clutterme ile saniyeler içinde web sayfası oluşturun.

21-

cli.gs : kendi adresi de epey kısa olan bir istatistikli link kısaltma servisi. kısa domainlerin hepsi alınmışken, herhalde en kısa bağlantı oluşturanladan biri olacak burası.

Bu yazı toprakbuken 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 ile sayfa zeminine hükmedin!

toprakbuken — Thu, 16 Oct 2008 09:14:00 GMT

XHTML'in cazibesinden gözlerinizi kamaştırabilmek için size, CSS kullanarak ne gibi zemin işlemleri (css background) yapabileceğinizi anlatmak istiyorum. Artık HTML etiketlerinde klasik olarak kullandığımız "background" etiket özelliği (property) yerini CSS'in güçlü background tanımlarına bıraktı.

Sayfa zeminine tam ekran resim yerleştirme:
Mesela sayfanız zemininde tam ekran olarak görüntülenecek bir görsel kullanmak istiyorsunuz. Ayrıca bu görselin tüm çözünürlüklere göre kendini sayfaya tam olarak yerleştirmesini de bekliyorsunuz. Hiçbir javascript kodu yazmadan sadece buradaki örneği şablon olarak değerlendirerek bunu yapabilirsiniz. Nasıl birşey elde edeceğini tam olarak burdan ve şurdan görebilirsiniz.
CSS ile filigran (watermark) kullanımı
CSS tanımları sayesinde artık filigranlı (watermark) görseller oluşturmakta çok kolay. Burada, bu konuda çok detaylı ve PHP destekli olarak hazırlanmış bir örnek bulabilirsiniz. Burdaki eğitsel notta ise (tutorial'da ise) PNG resim kullanarak CSS ile nasıl filigran görseller yapabileceğinizi görebilirsiniz.Bu yazıda ise direk filigranlı zemin hazırlamanın yöntemi mevcut.
CSS'de zemin konumlandırma (background position)
CSS tanımlarının bize sağladığı en büyük kolaylıklardan biri ise zemin üzerinde tam hakimiyet kurmanızdır. Tanımladığınız zeminin bulunduğu bölge (division) içersindeki X ve Y konumlarını belirtebilirsiniz.

Bu özellikten faydalanarak yine hiç javascript kullanmadan yanıp-sönen (roll over) butonlar hazırlayabilirsiniz. Son olarak konu hakkında özet bilgi niteliğindeki bu yazıya da göz atın.

Bu yazının BONUS BİLGİSİ:
CSS etiketlerinin neler olduğunu hatırlamakta güçlük çekiyor ve neyi nasıl yapacağını tam olarak hatırlayamıyorsanız, imdadınıza Cheat sheet'ler koşuyor. Bunları yazıcıdan yazdırıp her an göz hizasında bir yere asın. İşte size kapsamlı bir kaç cheat cheet;

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

büyüleyici ışık sanatı performans fotoğrafçılığı

toprakbuken — Mon, 06 Oct 2008 17:25:00 GMT

ışık sanatı performans fotoğrafçılığı, ışıkla oynamanın ve onun büyüsüne kapılmanın yepyeni bir boyutu. fotoğraflar denklanşörün uzun bir süre açık kalması ile elde ediliyor (bulb modu).

İki yetenekli Alman sanatçı olan Jan Leonardo Wollert ve Jorg Miedza tarafından geliştirilen lapp (Light Art Performance Photography) yeni bir sanat formuna imzasını atıyor. bize ise bu muhteşem güzellikteki kareleri izlemek kalıyor.

tavsiyem:
ışığı kapatın, tam ekran boyutuna geçip, play tuşuna basın.

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

goanimate kaliteli çizgifilm oluşturma servisi

toprakbuken — Fri, 03 Oct 2008 08:29:00 GMT

goanimate çizgi film şeklinde animasyon oluşturabileceğiniz bir site.

site animasyonlar için bir çok karakter, konuşma balonları, arkaplanlar, eşyalar (gitar, kılıç, testere, tabanca vs..), sesler ve özel efektler sunmakta. böylesine kaliteli bir animasyon oluşturma servisi az bulunur.
yazamadığım birçok özelliğini ve nasıl harika birşey olduğunu tanıtım videosunu izleyerek görebilirsiniz.

Bu yazı toprakbuken 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ı İle İlgili 15 Photoshop Dersi

toprakbuken — Sat, 04 Oct 2008 08:16:00 GMT

Photoshop dipsiz bir kuyu. Bir çok işimze yarayan photoshop web tasarımında da imdadımıza yetişiyor. Şu sitede web tasarımı ile ilgili 15 harika photoshop dersi derlenmiş.

Çizgi Film Web sitesi tasarla

Bir Fotografçı Web Sitesi tasarla

Grungy Web tasarımı yapımı

Tüm dersleri şu adresten görebilirsiniz.

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

herkesin sahip olmak isteyeceği yepyeni ücretsiz fontlar

toprakbuken — Tue, 30 Sep 2008 18:43:00 GMT

fontları ailecek çok seviyoruz ve elimizden gelen her yerde kullanıyoruz. (hatta daha önce onları kişileştirmiştik bile) sizin de fontları sevdiğinizi düşünerek, yepyeni ve birbirinden güzel onlarca ücretsiz fontu sizinle paylaşmak istiyorum.

King and Queen Font

Docteur Atomic

idiot

Hurricane

download selfish font

download broken 15 font

Turbo Ripped

marcelle

diğerleri ve hepsi için şun - la - ra ve bunlara da bakabilirsiniz.

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