bildirgec.org - syris - beğendikleri

psd'den css/html'e tasarım çevirme

syris — Tue, 21 Apr 2009 16:15:00 GMT

daha önce photoshop site tasarım dersleri ve photoshop site şablonları yazılarında site tasarımında photoshop'tan nasıl istifade edebileceğimize dair kaynaklar vermiştik. o yazılardan ediğindiğiniz şablonları ya da sizin photoshop kullanarak oluşturduğunuz tasarımları html'e nasıl uyarlayacağınıza dair anlatımlar da şurada listelenmiş.

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

PSD'leri HTML'e çevirme rehberi

syris — Fri, 20 Jun 2008 11:27:00 GMT

PSD'den HTML'e adım adım dönüşüm rehberi

Birçok tasarımcının kullandığı mükemmel araç Photoshop hakkında internette birçok rehber bulunuyor. Fakat bu adresteki rehber bambaşka. Nettuts, psd formatındaki bir anasayfayı adım adım bir wordpress temasına dönüştürmüş ve gerekli tüm html ve css kodlarını da bu esnada sunmuş. PSD formatındaki sitenin adım adım HTML'e dönüşümünü görmek ve örnek olarak kullanmak istiyorsanız bu kaynağa göz atmalısınız.

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

psd'yi html'e çevirebilmeniz için 21 adet ders!

syris — Mon, 25 May 2009 08:45:00 GMT

Birçok kişi o ya da bu şekilde; dersleri kullanarak, hazır dosyaları indirerek vb. yollarla photoshop'da web sitesi oluşturabiliyor. Ancak pek azımız bunu iyi bir şekilde harmanlanmış bir web sitesine dönüştürebiliyor. Bu yazıda Psd'yi HTML'e dönüştürmeyi öğrenebileceğiniz 21 adet ders bulacaksınız. Dilerseniz daha önce yayınlanmış şu bildiriye ya da buna da bakabilirsiniz.

1. the design lab: psd conversion

Psd çevirme

2. from psd to html, building a set of website designs step by step

adım adım psd'den html

3. coding: design lab tv styled layout

Televizyon Layoutlu Tasarım

4. psd to css/html in easy steps - part 1

Basit adımlarla Psd'den css - html çeviri

5. slice and dice that psd

psd bölümleme (slice)

6. converting a photoshop mockup: part two, episode one

psd çevirme

7. build a sleek portfolio site from scratch

çizimden siteye, portfolyo sitesi

8. portfolio layout - learn to code it

portfolyo tasarımı kodlamak

9. converting a design from psd to html

bir tasarımı psd'den html'e çevirmek

10. how to convert a psd to xhtml

psd'den xhtml'ye çeviri

11. how to convert psd to html

psd'den html'e çeviri

12. creating a css layout from scratch

çizimden css'ye tasarım aşamaları

13. psd > html/css

psd'den html - css'e çeviri

14. encoding a photoshop mockup into xhtml & css

psd'yi xhtml ve css olarak kodlamak

15. css template tutorial

css şablon dersi

16. portfolio layout 4: the code

portfolyo tasarımını kodlamak

17. tutorial coding a layout

bir layout'u kodlamak

18. converting a photoshop mockup

psd çevirmek

19. killer site - from illustrator to xhtm to drubal

illustrator'den xhtml'ye, oradan da drupala!

20. from psd to html

psd'den html'e çeviri

21. coding a car sales layout

Araba satış sitesi kodlamak

Kaynak

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

5 Muhteşem jQuery Uygulaması

syris — Thu, 18 Nov 2010 08:31:00 GMT

jQuery, web sitesi geliştirmek için harika bir kütüphane. Web sitenize önceden yapılması oldukça zor olan birçok uygulama, efekt ve benzer şeyler ekleyebilirsiniz. Aşağıdaki 5 muhteşem jQuery uygulamasını ücretsiz olarak kullanabilir ve ayrıca geliştirebilirsiniz.

Slider Gallery with jQuery

Slider Gallery with jQuery, diğer galeri uygulamalarından tamamen farklı bir slider uygulamasıdır. Kategorilenmiş başlıklardan birini tıkladığınız taktirde yatay olarak o kategoriye ait fotoğraflar sayfada yayınlanır. Alttaki imleç ile sağa veya sola doğru hareket edebilir ve diğer fotoğraflara bakabilirsiniz. Ayrıca yer alan tooltip eklentisi sayesinde fotoğrafları büyük boy olarak görebilir ve bu şekilde diğer fotoğraflar arası geçiş yapabilirsiniz.

Apple-like Retina Effect

Apple-like Retina Effect, fotoğrafların sadece bir bölümünü yakınlaştırmaya yarayan küçük bir uygulamadır. Büyük boyutlu resim yayınlayan web siteleri tarafından uygulanabilir.

jQuery Page Curl

Benzerini birçok web sitesinde görebileceğiniz sayfanın küçük bir kısmını yırtılmış şekilde gösteren hoş bir uygulama. Diğerlerinden farklı olarak bu uygulamada sayfayı siz kendiniz çekip arka planı görebiliyorsunuz.

Overscroll

Büyük genişliğe sahip olan resimleri küçük boyutlara sığdırabilen Overscroll ile imleçler sayesinde tüm görseli görmeniz mümkün. Görseli, yer alan 2 imleç ile veya mouse ile tıklayarak hareket ettirebilirsiniz. Ayrıca uygulama sadece o sayfadayken ve mouse ile görselin üzerine geldiğinizde aktifleşiyor.

Custum Animation Banner

Alışılmışın dışında burada yer alan hareketli banner'lar tamamen jQuery ile hazırlanmış. Flash ile yapılan birçok benzeri görmüş olduğumuz bu bannerleri ve daha fazlasını jQuery ile yapabilirisiz. Sayısız efekt uygulayabilir ve hareketli imajlar oluşturabilirsiniz.

Ayrıca Bakınız :

angelsdemos: Blog | FriendFeed | Twitter | Email | RSS

Kaynaklar : tympanus, wdl

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

Eylül 2010'un En Popüler CSS3 Dersleri

syris — Mon, 18 Oct 2010 06:32:00 GMT

Sürekli gelişen ve hergeçen gün farklı tasarımlar yapılan web teknolojisinde css3 günümüzde oldukça önemli bir yer tutmaktadır. Bu ayın en popüler css3 uygulama derslerini aşağıdan inceleyebilirsiniz. Bu en popüler 5 dersde farklı teknikleri inceleyerek benzer çalışmalar yapabilirsiniz. Eylül 2010'un En Popüler CSS3 Dersleri;

Simulate Realism with CSS3
(CSS3 ile simüle Gerçekçilik)

CSS3 Speech Bubble
(Css3 ile Konuşma Balonu)

How To Create Depth And Nice 3D Ribbons Only Using CSS3
CSS3 ile Nasıl Derin ve Güzel 3D kurdela yaratma

Creating a polaroid photo viewer with CSS3 and jQuery
(CSS3 ve jQuery ile polaroid fotoğraf görüntüleyicisi yapımı)

Create a Color Changing Website Using CSS3
(CSS3 Kullanarak Web Sitesinin Rengini Değiştirme)

Ayrıca Bakınız ;

angelsdemos: Blog | FriendFeed | Twitter | Email | RSS

Kaynak : ajaxline

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

Gelişmiş Çevrimiçi Metin Editörü: elRTE

syris — Thu, 14 Oct 2010 09:46:00 GMT

elRTE, web sitenizde kullanabileceğiniz açık kaynak kodlu WYSIWYG editördür. Javascript ve jQuery kütüphanesi kullanılarak hazırlanan bu muhteşem HTML editör ile web içeriğinizi istediğiniz gibi kontrol edebilirsiniz.Studio 42 tarafından geliştirilen elRTE'yi ticari olan veya olmayan bloglar, forumlar ve benzer birçok serviste ücretsiz olarak kullanabilirsiniz.

Zengin içeriği ile metin düzenlemenize her yönü ile olanak veren bu editörü kolaylıkla web sitenize entegre edebilir ve sonrasında rahatlıkla kullanabilirsiniz. Ayrıca dilerseniz yazılarınızın biçimlendirilmiş şekildeki html kodlarını görebilirsiniz. Hafif, hızlı ve kolay kolay kullanıma sahip elRTE üzerindeki düzenlemeler css olarak da kaydedilebilir.

Demo modu, Word'den kopyanan yazıları temizleme, ifade ekleme, gelişmiş tablo ve resim ekleme eklentileri ve tam ekran modu ile muhteşem bir derleme aracı olan elRTE ile masaüstü programlardaki tüm özellikleri bulabilir, Gelişmiş bir şekilde metinlerinizi düzenleyebilirsiniz.

16 farklı dil desteğine sahip Firefox 3.5+, Internet Explorer 7, Safari 4, Opera 10 ve Chrome üzerinden rahatlıkla çalışabilen elRTE; BSD, MIT ve GPL lisanslarına sahip. elRTE'i sourceforce üzerinden buradan indirebilir veya demosunu buradan inceleyebilirsiniz.

Ayrıca Bakınız ;

angelsdemos: Blog | FriendFeed | Twitter | Email | RSS

Kaynak : elRTE

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

Tüketici Hakları Nelerdir; Neler yapabileceğinizi biliyor musunuz?

syris — Wed, 09 Dec 2009 18:34:00 GMT

Her birimiz onlarca teknolojik cihaz alıyoruz ve bu cihazların bir kısmı haliyle arızalanabiliyor. İşte böyle bir durumla karşı karşıya kaldığımızda bir çoğumuz yasal haklarımızın neler olduğunu bilmediğimizden teknik servislerin ve satıcıların insafına kalıyoruz. Oysa yasal haklarımız bize öyle geniş imkanlar sunuyor ki...

Ben bu yazıda yaşanan sorunlardan değil, yasal haklarımızdan ve neler yapabileceğimizden bahsedeceğim.

Diyelim ki teknolojik bir cihaz aldınız ve ürün arızalandı. Bu durumda yasal haklarınız neler?

İmalatçı-üretici, satıcı, bayi, acente ve/veya ithalatçıdan;

1- Ürününüzün onarımını,
2- Ürününüzün yenisiyle değiştirilmesini,
3- Ürüne ödediğiniz paranın geri ödenmesini,
4- Arıza oranında verdiğiniz paradan indirim yapılmasını talep edebilirsiniz.

(Not: Genellikle satın aldığınız yere gittiniğizde size diğer haklarınızdan bahsetmeden direkt olarak onarıma gönderirler.)

Onarıma verdikten sonra azami tamir süresinin aşılması, onarımın imkansız olması veya aynı arızanın süreklilik arz etmesi durumunda da yasal haklarınız var. Bu durumda ise yine yukarıda bahsettiğim haklarınızı kullanabiliyorsunuz. Yani onarımının tamamlanması için bekleyebilirsiniz; ya da para iadesi, ürünün yenisiyle değiştirilmesi veya fiyat indirimi talep edebilirsiniz.

(Not: Azami tamir sürecini aşmış ürünlerde genellikle servis sizi arayıp haklarınızı kullanmak isteyip istemediğinizi sormaz.)

Peki bu azami tamir süresi kaç gündür?

Bu garanti belgenizde gün veya işgünü hesabından yazar. Fakat işgünü hesabından yazıyorsa pazar günlerini ve resmi tatil günlerini bu gün hesabına katmamanız gerekiyor. (Cumartesi günlerini de hesaba katıyorsunuz.) Bu süre genellikle 30 işgünüdür.

Arızanın süreklilik arz etmesi nedir?

Cihaz aynı arızayı üç defa veya farklı arızaları beş defa vermişse yine yukarıdaki seçimlik haklarınızı talep edebiliyorsunuz.

"İyi güzel ama iş talep etmekle bitmiyor ki, kimse beni sallamıyor talep ettiğim yerde." diyenler vardır.

Eğer ki talebinizi ilettiğiniz halde cevap alamıyorsanız, yani sallanmıyorsanız olayı mahkeme sürecine taşıyabilirsiniz. Eğer aldığınız ürünü 2000 TL'den daha az bir fiyata almışsanız her ilçenin belediyesinde veya kaymakamlığında bulunan Tüketici Hakem Heyeti'ne, 2000 TL'den fazla bir fiyata almışsanız Tüketici Mahkemesi'ne dava açabilirsiniz. Davayı İmalatçı-üretici, satıcı, bayi, acente ve/veya ithalatçıdan her birine açma hakkınız var. Hepsine birden de açabilirsiniz.

(Not: Bu 2000 TL'lik tutar her sene tekrar karara bağlanıp belirlenmekte ve değiştirilmekte.)

Dava sonuçlandı ve elinizde davayı kazandığınıza dair bir belge var; bu durumda ne yapmanız gerekiyor?

1) Hakkınızı almanıza hükmedilen yerden söz konusu belgeyle birlikte paranızı/yeni ürününüzü/fiyat indiriminizi talep edebilirsiniz. Bu durumda büyük bir olasılıkla hakkınızı verirler.

2) Eğer halen size hakkınızı vermemek konusunda diretiyorlarsa İcra Mahkemesi'ne başvurabilir, hakkınızı icra yoluyla alabilirsiniz.

Tabii ki tüm mahkeme ücretlerini de karşı tarafın ödemesini sağlayabilirsiniz.

Mahkemeye vermeniz için dilekçe örnekleri;

Tüketici Hakem Heyeti için

Tüketici Mahkemesi için

İnternette bu konuda kapsamlı türkçe bir kaynak bulamadım, bu yüzden bu süreci uzun araştırmalarımdan ve büyük emeklerin ardından sizinle paylaşmak istedim. Umarım yararlı olmuştur.

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

Farklı Geçiş Efektleri için: AviaSlider

syris — Fri, 08 Oct 2010 06:35:00 GMT

AviaSlider; birçok farklı benzersiz geçiş efektine sahip birçok projede farklı amaçlarla kullanabileceğiniz harika bir jquery slider uygulamasıdır. Interaktif olarak kullanabileceğiniz AviaSlider, diğerlerinin aksine farklı efekler sunarak ziyaretçilerinizi etkiler.

8 benzersiz geçiş efetli olan aviaslider'ı web sitenizde manşet veya resimleriniz için küçük bir galeri olarak kullanabilirsiniz. jQuery 1.32 ile hazırlanan bu uygulamayı istediğiniz gibi biçimlendirebilir html5 ve css3 ile renklendirebilirsiniz.

Sadece 8KB boyuntaki bu ufak uygulama içerisindeki farklı efektleri farklı sayfalarda kullanabilir ve tooltip eklentisi sayesinde resimlerin büyük hallerini sayfa içerisinde açılan küçük bir pencereden ziyaretçilerinize gösterebilirsiniz. Bu pencere açılırken resim harici sayfaya uygulanan karartma efekti sayesinde ziyaretçilerinizin resime dikkat çekmelerini sağlayabilirsiniz.

Internet Explorer 6+, Safari 3, Firefox 2+, Opera 10+, Google Chrome 3+ desteğine sahip ve sadece 3kB olan bu uygulamayı dilerseniz buradan indirebilirsiniz. Orjinal web sayfasına ve 8 farklı efektinin de gösterildiği demo sayfası için buraya göz atın.

Ayrıca Bakınız ;

angelsdemos: Blog | FriendFeed | Twitter | Email | RSS

Kaynak : aviathemes

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

blogunuzu farklı kılacak 13 adet ücretsiz wordpress teması

syris — Tue, 03 Feb 2009 12:47:00 GMT

gün geçtikçe daha da büyüyen bir içerik yönetim sistemi olan Wordpress'in bu büyümesine bağlı olarak Wordpress tema ve eklentilerinde de bir artış söz konusu. hiç şüphesiz, internet üzerinden kolayca bu tema ve eklentilerin binlercesine ulaşılabilir.
bu bildiride, o kolaylıkla ulaşılabilen sıradan onlarca temaya nazaran tasarımıyla göz kamaştıran ve herkesin kullanmak isteyebileceği 13 adet ücretsiz Wordpress temasına yer vereceğiz.

Renkli Kağıt: ücretsiz wordpress teması

DreamTemplate ekibi tarafından oluşturulan ve SmashingMagazine tarafından yayımlanan bu ücretsiz profesyonel Wordpress temasında kullanılan sade tipografi ve canlı tasarım öğeleriyle göze hoş görünen bir tasarım amaçlanmış.

Infinity

tema 3 sabit sütuna ve çekici bir görsel tasarıma sahip. temanın psd dosyaları da mevcut.

CreativeArt Theme

Widget destekli olan bu tema, css ile hazırlanmış menü, Flickr için alt menü ve LOGO psd gibi özelliklere sahip.

Seabreeze tema

bu tema da WordPress'in son sürümüyle çalışmakta. bunun yanında flickr desteği, hazır reklam kolonları ve düzenlenebilir header(PSD) özelliklerini de bünyesinde barındırıyor.

FREEmium WordPress teması:

Paul Kadysz tarafından tasarlanan tema Dariusz Siedlecki tarafından geliştirilmiş.

Deskspace Tema

WordPress'in son sürümü ve Widget Ready ile birlikte çalışan bu temanın en güzel tarafı Photoshop PSD dosyalarını barındırması.

ZinePress: Wordpress magazin tema

2 sütundan oluşan Widget destekli hoş bir tema.

Remedy

magazin içerikli bloglar için kullanılabilecek güzel bir tema.

Zinmag Futura

3 sütundan oluşan, dergi tarzı ücretsiz hoş bir WordPress teması.

Versatility

Versatility Lite profesyonel Wordpress teması thinkdesignblog tarafından tasarlanmış.

Magaling

Twitter eklentisi, popüler yazılar eklentisi, ajax tab menü ve ekstra birçok özelliğe sahip bir tema.

Orijinal premium haberler teması

temanın güzel yanı yerleşik, web tabanlı flash videoları yayınlayabileceğiniz video paneline sahip olması.

WordPress Theme Statement

sade bir tasarıma sahip hoş bir tema.

Bu yazı syris 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 Faydalı 5 Araç

syris — Thu, 07 Oct 2010 09:36:00 GMT

Web tasarım işi oldukça uzun sürebilir. Bu yüzden yapılan birçok uygulama bulunmakta. Bu uygulamalar size zaman kazandırmakla beraber birçok açıdan da yardımcı oluyorlar. Aşağıdaki ücretsiz uygulamaları siz de kullanabilirsiniz.

Flowplayer

Web sitenizde bulunan videoları kullanışlı ve ücretsiz bir flash arayüz olan flowplayer ile yayınlayabilirsiniz. FLV, SWF, MP3, MP4, H.264 video, JPG, PNG gibi formatları destekliyor. ayrıca video içeriğine reklam yerleştirebilme, çalma listeleri oluşturabilme, tam ekran gibi birçok özelliği bulunmakta. Ücretsiz sürümünü kullandığınız takdirde sadece tam ekran modunda sağ alt köşede Flowplayer logosu olmasının dışında herhangi bir eksiği olmayan bu muhteşem arayüz, gpl lisansına sahip ve oldukça gelişmiş.

FancyBox

FancyBox, web sitenizde kullanabileceğiniz gelişmiş bir resim görüntüleme aracıdır. Web sitenizdeki resimleri tooltip şeklinde büyük veya orjinal halini ziyaretçilerinize gösteren bu uygulamayı isterseniz galeri şeklinde de kullanabilirsiniz. swf, iframe gibi desteğe de sahip olan uygulama, oldukça kolay bir kullanıma sahip.

Wordpress için yapılmış bir eklentisi de bulunmakta.

Firebug Lite

Web sitenize yerleştireceğiniz muhteşem uygulama ile web sayfanızdaki kodları yeniden düzenleyip hataları ayıklayabilirsiniz. Bütün tarayıcılarla uyumlu olan Firebug Lite ile html, css, js kodlarını tamamen düzenleyebilirsiniz. Web sayfasının altında çıkacak olan düzenleme editörü ile rahatça düzenleme yapmak mümkün. Ayrıca konsolun html, script, css, dom gibi sekmeleri sayesinde işlemlerinizi karıştırmazsınız. Google Chrome için bir eklentisi de bulunmakta.

Ultimate IE6 cheatsheet

Web tasarımcılar Internet Explorer 6'dan nefret etseler ve Microsoft dahi geliştirilmesini bırakmış olsa bile hala IE6 kullanan oldukça fazla kişi var. Bu yüzden web sitelerimizi hazırlarken IE'yi de işin içine katmalı, en azından bu tarayıcı için basit sayfalar hazırlamalıyız. Bu yüzden yazılan bu muhteşem makeleyi kullanarak web sitelerinizi IE6 için uyumlu hale getirebilirsiniz. Hata Çözümleri, alternatif yöntemler ve birçok şey bulunan işe yarayan bir kaynak.

Zen Coding

Html, css ve js kodlarını yazarken tırnak işareti, eşittir, büyüktür ve küçüktür işaretleri ile oldukça fazla zaman harcadığımızı düşünülerek hazırlanan Zen Coding, mac ve windows tabanlı bir tasarım aracı. Küçük bir formül yapısı ile çalışan bu uygulama ile normalden çok daha hızlı sitenizi biçimlendireceksiniz. Ayrıca notepad++ gibi uygulamalar için de eklentisi bulunmakta.

Ayrıca Bakınız ;

angelsdemos: Blog | FriendFeed | Twitter | Email | RSS

Kaynak : queness

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