960 GS‘den bahsetmek istiyorum biraz. Bilenler, duyanlar vardır elbet bunu fakat oturup da bu 960 GS’nin nasıl çalıştığını anlatan yoktu ben burada görene kadar. İzlen Öğren sitesinin blogunda yer alan bir kaç videodan bahsedeceğim size. Sitede şuanda 3 farklı video ile Dreamweaver ve 960gs ile Çalışmak başlığı ile eğitim videoları başlamış durumda. Birinci, ikinci ve üçüncü videoları izleyerek 960 GS hakkında başlangıç seviyesinde bilgi edinebilirsiniz. Videolar oldukça eğitici. Aslında videolarda size bir yol gösteriliyor ve o yolda baya bir ileriye gitmek de sizin hayal gücünüze bırakılıyor.

Videoları izlemenizi ve devamını beklemenizi öneririm. (Umarım devamı daha profesyonelce çalışmalar oluşturmamıza neden olur.) Aynı zaman da sitede başka konularda da video destekli eğitimler mevcut.

204 views

Evet, başlıktan da belli olacağı üzere bu bir davettir. Ücretsiz olarak değerlendirebileceğiniz mükemmel bir davet. Sadece bir gününüzü ayırarak çok güzel bilgiler edinebilirsiniz. Kendiniz için bir gününüzü feda etmenize değer bir davet.

Müşteri web tasarımcısından web sitesi ister. Web tasarımcısı da tasarımı hazırlar html formatına dönüştürür. Fakat müşteri “yönetilebilir” bir web sitesi istediği anda web tasarımcısında kayışlar kopar. Kodlama bilgisi pek olmadığı için işin içinden çıkmak için uğraşır. Ya bir kodlama yapabilecek bir arkadaş  bulmalıdır ya da ücretsiz sistemlerden faydalanmalıdır. İşte tam bu noktayı anlatıyor bu davet. Diyorlar ki, gelin sizinle beraber oturup bir web site tasarımı hazırlayayım. Daha sonra bunu WordPress’e uygun hale getirip müşteriye yönetilebilir bir web sitesi sunalım. Hem siz rahat edin hemde müşteriniz.

Canlı yayın Adobe Günlüğü üzerinden olacaktır. 8 Temmuz günü sabah saat 10:00′da başlayacak ve tahmini olarak 17:00′de bitecektir. Adobe günlüğünde okuduğuma göre böyle bir şeyi ilk defa yapıyorlar ve bitiş saatinin değişebileceği söyleniyor. Erken de olabilir daha geç de olabilir.

Aşağıda ufak bir öneri ve hemen ardından günün programı mevcut.

Son olarak teknik gereksinimlerinizi belirtmemizde fayda var. Yapacağımız çalışmayı 8 kamera ile yayınlayacağız. Bilgisayar başından takip edenler bunları 2 ayrı ekrandan izleyecekler. Birinde sürekli olarak bilgisayar ekranını görüntülerken, diğerinden de konuları anlatan ve izleyen kişileri yayına vereceğiz. Dolayısıyla sağlıklı bir izleme için minimum 1 Mbit bağlantı hızına ihtiyacınız olacak. Eğer hattınız 1Mbit ve üstü ise lütfen bu sırada başka amaçlarla kullanılmadığından emin olun.

“Dreamweaver ve WordPress ile dinamik siteler tasarlamak” Canlı Yayın Taslak Programı

• TARİH: 8 Temmuz 2010, Perşembe,
• SAAT: 10:00 – 17:00,
• YER: AdobeGunlugu.com
• KONUŞMACILAR: Barış Özcan (Adobe), Halid Özgür (Medyasoft), Hakan Çamoğlu (Vidobu.com), Erhan Meydan (Vidobu.com)

1. Açılış

Barış Özcan, 15 dakika

· Canlı yayın projesi tanıtımı ve amacı

· Ekip ve Stüdyo

2. Dreamweaver Nedir? WordPress ile ilişkisi nasıldır?

Barış Özcan, 30 dakika

· Dreamweaver tanıtımı

· WordPress tanıtımı

· WordPress kaynakları

· WordPress örnekleri

3. WordPress Kurulumu

Erhan Meydan, 30 dakika

· Local PHP kurulumu

· Local MySQL kurulumu

· WordPress paket kurulumu

· WordPress tema kurulumları

· WordPress eklenti kurulumları

4. Blog Arayüz Tasarımı

Halid Özgür, 90 dakika

· Blog tasarımında dikkat edilmesi gereken konular

· Tasarım sürecinde kullanılabilecek programlar

· Program entegrasyonları

5. Arayüz Tasarımının HTML’e dökülmesi

Hakan Çamoğlu, 45 dakika

· Temel DIV yapısı oluşturmak

· CSS ile menü tasarımı

· Alt sayfaların oluşturulması

6. Hazırlanan HTML tasarımın WordPress ile Entegrasyonu

Hakan Çamoğlu, 45 dakika

· Ana sayfa hazırlanması

· Alt sayfaların hazırlanması

· Modüllerin oluşturulması

7. HTML5 ile Hazırlanan Tasarımı İnteraktif Hale Getirmek

Hakan Çamoğlu, 45 dakika

· HTML5 ile degrade kullanımı

· HTML5 ile yuvarlak köşeler

· HTML5 ile animasyon

8. Tamamlanan Projenin Yayınlanması

Hakan Çamoğlu, 30 dakika

· Hosting ve Domain ile ilgili temel bilgiler ve ayarlar

· Dosyaların upload edilmesi

· MySQL database oluşturmak

· SEO çalışmaları

Bu konunun Adobe Günlüğünde ki genel açıklaması ise burada.

102 views

CSS galerini görmüşsünüzdür. Herhangi bir web tasarımcısı kendi çalışmasını hazırlar, müşterisine sunar. Hazırladığı çalışma güzel olduğu için müşteri tarafından benimsenir, internet ortamında yayımlanmaya başlar. Web tasarımcının işi burada biter. Site çalışır, müşteri memnundur. Belki web tasarımcısının yaptığı en güzel site odur. Kendi hazırladığı çalışmayı birçok kişinin görmesini, yorumlamasını ister. İşte tam bu nokta da bu tarz galeriler koşuyor imdadınıza.

CSS web site galerileri diyebiliriz. Ağırlıklı olarak CSS tabanlı tasarımlar var. Zaten eskisi gibi hiç kimse oturupda tablolarla boğuşmuyor. Şimdi size bir siteden bahsedeceğim. Sitenin ön plana çıkan özelliği şu; hazırladığınız çalışmayı bir galeriye değil de 5-10 tane galeriye(tam olarak kaç tane galeri olduğunu bilmiyorum) eklemenize yardımcı olur. Sizden standart bilgilerinizi(ad,soyad,email,site adresi vs) istiyor. Daha sonrasında sırayla tek tek galerilere ekliyorsunuz sitenizi.

Aşağıdaki resimde galerilerden sadece birisine eklenirken ki durumu görebilirsiniz. Resime göre konuşacak olursam; sağdaki bilgileri bir önceki sayfada giriyorsunuz. Sol tarafta da siteler tek tek geliyor. Aslında gelmiyor, siz sayfanın sağ en üst köşesinden nextsite diyerek diğerine geçiyorsunuz. S oldaki verileri sürükleyerek sağ alandaki sitede bulunan form alanlarına ekliyorsunuz. Burada ki mantık şu: Her siteye tek tek oturup yamıyorsunuz. Kopyala/yapıştır olayıda yok. Sadece sürükle/bırak.

Sitelerinizi hemen buradan eklemeye başlayabilirsiniz.

23 views

Djdesignerlab‘da gördüğüm en güzel paylaşımlardan bir tanesi. Düzenlenmiş, derlenmiş, tam 50 adet, ücretsiz web site tasarımının Photoshop formatını vermişler. İşinize yarayabilir bu tasarımlar. Ücretsiz olduğu içinde istediğiniz gibi kullanabilirsiniz. Buradan bu güzel tasarımlara ulaşabilirsiniz.

236 views

Adobe ImageReady ile nasıl gif hazırlayabiliriz bunu öğreneceğiz bu yazıda. ImageReady Photoshop ile beraber yüklenen bir program. Ben şuanda bu programın CS sürümünü kullanıyorum. Yeni sürümlerinde de ImageReady olması gerekiyor. Eğer bilgisayarınızda yüklü değil ise yükleyebilirsiniz. Aşağıdaki adımları sırasıyla yaparak gifimizi hazırlamaya başlayalım.

1. Adım

İlk olarak Photoshop‘u açın. Aşağıdaki resimde gördüğünüz gibi çalışmanızda hareketlendirmek istediğiniz her şeyi ayrı ayrı layerda hazırlayın. Resim veya istediğiniz yazıyı hareketlendirebilirsiniz. Ben burada 468x68px reklam alanı yapacağım. Sizde bu boyutlarda bir çalışma hazırlayabilirsiniz.  Aşağıdaki resime göre benim 3 tane yazı layerım, 3 tane(background layerı ile birlikte) resim layerım var.

2. Adım

Photoshop‘da çalışmanızı hazırladıktan sonra Araçlar (Tools) alanının en altında bulunan Edit in ImageReady butonuna basın. ImageReady açılacak ve bundan sonra ki çalışmayı burada gerçekleştireceğiz.

3. Adım

ImageReady açıldıktan sonra ilk bakmanız gereken Animation penceresinin açık olup olmadığıdır. Eğer sizde açık ise programın orta kısmına alın. Eğer açık değil ise Window>Animation‘dan aktifleştirebilirsiniz. Animation penceresi aşağıdaki gibidir. Üzerinde bulunan harfleri kısaca açıklayarak bu pencere hakkında bilgi sahibi olmanızı sağlayayım. Bu arada aynı zamanda Window>Layers sekmesinden de katmanları açın.

a-) Hangi katmanların ekranda kaç saniye görüntülenmesini istiyorsanız bu alandan ayarlayabilirsiniz. 0 se. yazan yere basılı tutarak bu süre üzerinde oynama yapabilirsiniz.
b-) Hazırladığınız çalışmanın önizlemesini bu butonlar sayesinde yapabilirsiniz.
c-) Tween ayarlarını yapmanızı sağlayan ekranı görüntüler.
d-) Yeni bir animasyon katmanı oluşturmanızı sağlar.
e-) İstediğiniz animasyon katmanını silmenizi sağlar.
f-) Daha ayrıntılı ayarlar yapmanızı sağlayan ekrana gider.

4. Adım

Şimdi işin en can alıcı noktasına geldik. Animation penceresi açık iken animasyonun başlangıcın da hangi layerların görüntülenmesini istiyorsanız onları görünür yapın. Aşağıdaki resimde 1 numaralı yerden bu layerların görüntülenme sürelerini ayarlayın. Ben 0,5 saniye olarak belirledim. Layer penceresinden de sadece bonus ve world logoları görüntülenmesini sağladım. 2 numaralı alanda hangi layerların görünür olduğuna dikkat edin.

5. Adım

Animation penceresinde aşağıdaki resimde gördüğünzü gibi Dublicate curret frame alanına tıklayarek bir nevi yeni bir animasyon frame’i oluşturun. Ardarda 3 defa bu butona basarak toplamda 4 adet frame oluşturun. 2., 3. ve 4. framelerin görüntülenme sürelerini birer saniye olarak değiştirin.

6. Adım

Son adım olarak devam edelim. Animation penceresinden 2. frame‘in üzerine tıklayın, ekranda görüntülenmesini istediğiniz layerı görünür yapın. Ben aşağıdaki gibi “REKLAM ALANI” yazan layerın görüntülenmesini sağladım. Aynı şekilde 3. frame’e gelin. “REKLAM ALANI” yazan layer eğer görünüyorsa görünmez yapın ve “YILLIK SADECE 1TL” yazan layerı görünür yapın. Aynı şekilde 4. frame gelin ve “KREDİ KARI GECERLİDİR” layerını görünür yapın, diğer yazı bulunan layerları görünmez yapın. Dikkat ettiyseniz bonus ve world resimleri için hiç birşey söylemedim. Çünkü onlar animasyonun her karesinde sürekli var. Çalışmanızı File>Save Optimized yolunu izleyerek .gif formatında kaydedebilirsiniz.

Çalışmanın en son hali aşağıdaki gibidir. Eğer çalışmanın kaynak dosyasını indirmek ve incelemek isterseniz buradan indirebilirsiniz.

17 views

Sanal Kurs sitesinden sanal ortamdan ne kadar bir insan tanınabiliyorsa Hakan Çamoğlu‘nu o kadar tanıdım. Kendisi bir web tasarım uzmanı. Sanal Kurs’da paylaştığı dersler ile dikkatimi çekti. Kendi web sitesini de inceledim. Özellikle videolu dersleri benim web tasarımcı adaylarına anlatmak istediklerim ile örtüşüyor. Mükemmel derecede videolu dersleri bulunuyor kendisinin.

Çok güzel video çalışmaları ile dikkat çeken Hakan Çamoğlu aynı zamanda Adobe Certified Instructor‘ı bulunuyor. Bu sertifika da Hakan beyin çok iyi bir web tasarım eğitmeni olduğu anlamına geliyor. Web sitesinden izlediğim birkaç videosu ile öğrendiğim kadarıyla (Halid Özgür’ün deyimiyle) bu sertifika yurtdışında dahi herkesde olan bir sertifika değil. Bu nedenle böylesine değerli bir insanın çalışmalarından faydalanabilir, çalışmalarını inceleyebilir, kendimize Hakan beyi idol seçebiliriz diye düşünüyorum.

Konuyu fazla dağıtmadan sizi direkt olarak Hakan beyin web sitesine yönlendireyim. Sitesine buradan ulaşabilirsiniz. Aynı zamanda web sitesinde bulunan videolu derslerede buradan ulaşabilirsiniz. Videolu derslerin herbirini izlemenizi şiddetle tavsiye ediyorum. Kesinlikle izleyin!

76 views

Neyse ben sizi fazla lafa tutmayayım. Siz en iyisi bu adrese uğrayarak logoların yenilenen yüzlerini gözatabilir, logoların tarihini anlatan ufak yazıları okuyabilirsiniz.

20 views

Css, js, swf ve resimleriniz gibi web site yapımında kullandığınız materyalleri ayrı ayrı klasörler içerinde toplamalısınız.  Bu şekilde yapmanız sizin daha sonra web sitesi üzerinde yapmak istediğiniz değişiklikleri rahatlıkla yapabilmenizi sağlayacaktır. Aşağıdaki resimde örnek bir web sitesi klasörünün görünümü bulunuyor, inceleyebilirsiniz.

Dosya sisteminizi hazırladığınızı varsayıyorum ve diğer önemli bir konudan da bahsetmek istiyorum. Dosya isimlerinizde kesinlikle Türkçe karakter kullanmayın. Resim, klasör, dosya vs bütün her şeyin isimlerini verirken Türkçe karakter ve boşluk kullanmayın. Türkçe karakterli dosyalarınız web sitenizi yüklediğiniz server üzerinde çalışmaz. Kendi bilgisayarınızda sorunsuz bir şekilde çalışabilir. Site içerisinde ekleyeceğiniz resimleri Photosohop ile küçülterek olabildiğinde yüksek kalitede ve düşük KB değerinde olmasına dikkat edin. Büyük bir resimi sayfaya ekledikten sonra sayfada küçültmeniz resimin boyutunu değil sadece görünümünü küçültür. Bu da büyük boyutta eklediğiniz bir resimin geç yüklenmesine neden olur. Bir de web sitenizin giriş sayfasının en fazla 150KB olmasına dikkat edin. Bu boyut ne kadar düşük olursa o kadar iyi olur. Çünkü sitenize ilk giren kişi web sitenizin geç yüklenmesinden hoşlanmaz. Geç yüklenen web siteleri ziyaretçilerinin gözünden düşer ve hatta ziyaretçinin o siteye hiç girmemesine dahi neden olur.

14 views

Şimdi jQuery ve CSS3 kullanılarak hazırlanmış çok güzel bir menüden bahsedeceğim. MacroFolio blogunun sahibi olan Marco Kuiper tarafından hazırlanmış mükemmel bir çalışma. Birde dikkatimi ufak birşey çekti. Bu çalışmayı hazırlayan kişi oldukça genç. Yaşına göre iyi bir bilgi var gibi görünüyor, umarım öyledir de. Menü ise ayrı bir profesyonellikle hazırlanmış. Çok hoş görünümlü bir menü.

Menüyü direk olarak buradaki orjinal demo adresinden deneyebilirsiniz. Çalışmanın orjinal adresi yani yazarın menüyü tanıttığı kendi sayfası ise burası. Menüyü indirmek için ise bu adresi kullanabilirsiniz. Aynı zamanda yazının kendi adresinden de menünün demosuna ve download bağlantısına ulaşabilirsiniz. Bu bilgilerin hepsini verdikten sonra hemen menüyü nasıl kullanabileceğimizden bahsedelim.

Nasıl Kullanılır?

Çok basit bir şekilde kullanabiliyorsunuz bu menüyü. Yukarıda vermiş olduğum bağlantılar ile dosyaları indirin. İndireceğiniz dosyanın adı jslickmenu. Sıkıştırılmış dosyayı klasöre çıkartın ve dosya içerisinde bulunan default.html sayfasını herhangi bir HTML editöründe açın. Sayfa içerisinde aşağıdaki kodları bulun.

[HTML]

<div id=”menu”>
<ul>
<li><a href=”http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html”>
<img src=”images/item-01.jpg” alt=”A fancy Apple.com-style search suggestion” />
</a></li>
<li><a href=”http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html”>
<img src=”images/item-02.jpg” alt=”Creating a polaroid photo viewer with CSS3 and jQuery” />
</a></li>
<li><a href=”http://www.marcofolio.net/webdesign/the_iphone_contacts_app_with_css_and_jquery.html”>
<img src=”images/item-03.jpg” alt=”The iPhone Contacts App with CSS and jQuery” />
</a></li>
<li><a href=”http://www.marcofolio.net/webdesign/20_wicked_proof_of_concepts_for_better_use_of_jquery_css.html”>
<img src=”images/item-04.jpg” alt=”20+ Wicked Proof of Concepts for Better use of jQuery/CSS” />
</a></li>
<li><a href=”http://www.marcofolio.net/inspiration/the_very_best_from_the_behance_network.html”>
<img src=”images/item-05.jpg” alt=”The very best from the Behance Network” />
</a></li>
</ul>
</div>

[/HTML]

Yukarıdaki kodlar içerisinde <li> tagı içerisindeki yerlerdeki resim, açıklama ve bağlantı adresini değiştirerek kendi çalışmanıza uyarlayabilirsiniz. Örnek olması açısından aşağıdaki kodları deneyebilirsiniz.

[HTML]

</li>
<li><a href=”http://www.renkliteneke.com/”>
<img src=”images/resim.jpg” alt=”web tasarım&grafik ve web programlama blogu” />
</a></li>

[/HTML]

Umarım mantığını anlayabilmişsinizdir. Eğer herhangi bir sorun ile karşılaşırsanız aşağıdaki yorum alanını kullanarak bütün sorularını sorabilirsiniz.

45 views

TwoSpy isimli blogda rasladığım güzel bir jQuery Foto Galeri çalışması var. Çalışma jQuery’nin profesyonelce kullanılması sonucu oluşmuş.  Galeri iki farklı şekilde çalışıyor. Birinci hali; yazı olarak resimlerin başlıkları bulunuyor. Başlıklara tıkladığınızda resimin büyük hali hemen başlığın sağ tarafında çıkıyor. Büyük resimin hemen altında bulunan Download Original linki ile resimin orjinal boyutuna ulaşabiliyorsunuz. İkinci çalışma şekli ise resimlerin başlıkları yerine resimlerin küçük halleri bulunuyor. Az önce söylediğim şekilde çalışıyor tek fark resimlerinin başlıklarının yerine küçük resimlerinin bulunması. Aynı zamanda slayt halinde de resimlere gözatabiliyorsunuz.

Söylediğim iki örneğin birincisi burada ikincisi ise burada bulunuyor. Foto galeri hakkında ayrntılı ve versiyon geçmişine kendi sayfasından ulaşabilirsiniz. Foto galeriyi yazar jAlbum destekli bir tema halinede getirmiş. jAlbum üzerinden kensine foto galeri hazırlamak isteyen herkes bu sistemi kullanabiliyor. Aslında bu yapı kullanılarak çok güzel bir foto galeri scripti yazılabilir. Eğer yapabilirim diyorsanız denemenizde fayda var.

Foto galeriye ait dosyaları buradaki sayfadan indrebilirisiniz. Nasıl kullanacağınıza dair kodlarda dosyaları indireceğiniz sayfada mevcut. Eğer oradaki işlemler kafanızı karıştırıyorsa size tavsiyem; galeriyi bilgisayarınıza indirip inceleyerek mantığını, işleyişini kavramanız. Sonrada kullanmanız.

124 views