Haberler için arşiv

“Arayüz Geliştiricileri İçin Web Sitesi Kodlamak” Semineri – Ankara

26 Şubat 2011 Cumartesi günü bir aksilik olmazsa TÜTEV’de “Arayüz Geliştiricileri İçin Web Sitesi Kodlamak” adlı bir seminer düzenleyeceğiz. TÜTEV’e ve özellikle beni bu iş için ikna eden Ömer Faruk Sarıkaya’ya teşekkür ediyorum. Ayrıca bana yol arkadaşı olmaya kabul eden S. Ferit Arslan ve İlyas Osmanoğlulları’na da teşekkürler.

Genel manasıyla Arayüz Geliştiricileri ve Görevleri üzerinde durmaya çalışacağız bu seminerde.

Seminer Programı

  • Genel Web Sitesi Kodlaması Hakkında
    Web sitesi yapım aşamaları hakkında genel bir bilgilendirme
  • Arayüz Geliştiricilerin Görevi ve Öğrenme Süreci
    Arayüz Geliştiricileri neleri bilmeli nelere dikkat etmeli
  • HTML, CSS ve Javascript hakkında genel bir bilgi
    Genel tanımları ve işlevleri
  • Bir uygulama kodlama (html ve css kodunun yazılması)
    Daha önce yaptığım bir sitenin kodlanması
  • Soru -Cevap

Konular çok geniş olduğu için zamanımız yettiğince değinmeye çalışacağız.

Katılım için TÜTEV’in sitesine başvurabilirsiniz.


View Larger Map

Görüşmek dileğiyle.

Sağlıcakla Kalın.

Bir Projenin Bana Kazandırdıkları (LiveGO.com)

Daha önce çalıştığım ajanslarda yaptığım işlerin bu günlüğü oluşturmamda bir yardımı oldu. Her projede bir şeyler öğrendim ve öğrendiklerimi bu günlük ile sizlere aktarmaya çalıştım. Tüm ayrıntıları olmasada aklımda kalanları sizlere aktarmaya çalıştım ve aktarmaya da devam edeceğim, Allah bize imkan verdikçe.

Bir çoğunuz biliyordur ama ben bilmeyenler için hatırlatayım yaklaşık 9 aydır öncesinde messengerfx.com ve şimdiki adı ile www.livego.com’da çalışmaktayım. Bu proje sürecinde bir çok şey öğrendim ve öğrenmeyede devam etmeyede devam ediyorum. Bu proje dünya çapında olması ve farklı yapısı ile diğer projelerde öğrendiklerimden çok fazlasını bana öğretti. Ajansta çalışırken bir çok proje ile uğraşıyordum burada 9 aydır bir proje ile uğraşıyorum, ancak şöyle bir şey var ki ajansta 2 senede öğrenebileceğim(bazı bilgileri ajansta öğrenme ihtimalide yok) bilgiyi burada 9 ayda öğrendim diyebilirim.

Arayüz geliştiricileri olarak devamlı kendimizi geliştirmek durumundayız bu sadece bizim çabamızla olacak bir şey değil, kendimiz geliştirmek için bize bu olanaklarında sağlanması lazım. Ajanslar bu bakımda çok önemli bir kilometre taşıdır, neredeyse her ay 1-2 proje elinize geçer ve 2-3 ya içinde bitirmeniz istenir. Bu bize hem öğrenme fırsatı verir ve hemde kendimiz geliştirme imkanı verir. Ayrıca benzer işleri yapsakta aynı işleri yapa yapa bir bakıma elimizi hızlandırmış oluruz. Bu nedenle burada naçizane bir tavsiyem var eğer bu meslekte bir yerlere gelebilmek ve bir şeyler öğrenmek istiyorsanız en az çalışma hayatınızın belli bir bölümünü belli bir seviyenin üstündeki ajanslarda geçirmeyi planlayın ve bunun için uğraşın. Niye belli bir seviyenin üstünde diyorum, çünkü kendinizi geliştirmenizde sadece ajansların değil çalıştığınız şirketlerinde çok büyük katkısı vardır. Mesela çatladıkapıspor’un sitesini yapmak ile, büyük bir bankanın sitesini yapmak arasında dağlar kadar fark vardır. Müşterini büyük olması isteklerin büyük olmasıdır ve sizin portföyünüz içinde büyük bir kazanım olacaktır.

Gelgelim benim LiveGO.com ile yaşadıklarıma, baştada dediğim gibi farklı ve geniş çaplı bir olması LiveGO.com’un bana çok şey öğretti ve öğretmeyede devam ediyor. Öğrendiklerimin belli bir kısmını sizlere aktardım ve aktaracağım yazılarımda var. Aktardıklarımın listesi;(Bir çoğunda örnekleri farklı yerden vermek durumunda idim. Çünkü proje daha yayında değildi. Hem örnekleri daha basit vermek anlaşılırlığı arttırıyor)

Tabi daha yayınlama imkanı bulamadıklarımda var; zamanım olursa aşağıdaki konularıda yazmaya çalışacağım.

  • Web Sitelerimizi iPad’e Uyarlamak
  • CSS ile iphone, ipad, desktop ve iphone4 ayrımını sağlamak
  • FireBug Javascript Sekmesine Göz atalım
  • CSS Sprite Tekniği
  • Aksak Kolon ve Çözümleri
  • Input Prompt
  • Livego’yu kodlamak 1 – 2 – 3 – 4 – 5

ve de daha yazacağım belki 10’larca makale daha. Başta dediğim gibi bende öğreniyorum sizlerle paylaşıyorum hepimiz öğreniyoruz.

Bu projede öğrendiklerim bu kadarmı, değil tabi daha fazlası var ama benim not tuttuklarım bu kadarı.

Tanıdığım ve bildiğim bir çok arkadaşım var bu sektörde çalışan her biri yaptıkları projelerden 3-5 bişey akatrsalar ne güzel olur. Memleketteki bilgi eksikliği giderilmiş olur. Lütfen bunu bir ukalalık olarak algılamayın, amacım belki Türkçe içeriğin çoğalması için bir çağrı. Tanımıyorum ve biliyorum gerçekten çok iyi bilgiye sahip insanlar var Türkiye’de umarım onlarda bilgilerini bizlerle paylaşırlar.

Adobe Dreamweaver CS5 Yenilikleri

Adobe Dreamweaver editör olarak beğenerek kullandığım bir editör. Burada sizlere yeni sürümü ve yeniliklerini anlatmaya çalışacağım ve son olarakta beklentilerimi ve yeni sürümün bunları ne kadar karşıladığımı yazacağım.

Yeni sürüm ile birlikte gelen yenilikler ;

CSS Inspection


Aslında Live View özelliği bir önce sürümde de mevcut ancak bu sürümden tam anlamıyla geliştirilmiş bu özellik Inspect butonu yardımı ile gerçek zamanlı kodumuza müdahale edebiliyor, düzenleme yapabiliyoruz.

Bu özelliğe biz pek yabancı değiliz Firefox’un FireBug eklentisi bize bu imkanı sağlıyor aslında ve daha fazlasını sağlıyor. Bir önceki sürümde bunu tam ekleyemediklerini söylemiştik, bu sefer tam anlamıyla eklenmiş.

En büyük yeniliklerden birisi bu olmuş.

Adobe BrowserLab

Adobe firmasının daha önce açtığı bu çevirimiçi tarayıcı test etme aracı bu yeni sürüm ile birlikte programdan direk erişilebilir hale getirilmiş. Örnek sayfanızı direk siteye gönderip test edebiliyoruz.

Ben aslında bu konuda pek tatmin olmadım. Çünkü BrowserLab zaten yeterli bir araç değildi. IETester tarzı bir test aracı daha makbul olacak bir araç olabilirdi.

Her şeye rağmen bir artıdır ama eksik olduğu kesin.

CSS Aktik/Pasif

Mevcut kod üzerinde gezerken elemanlara atanan css özellikleri bir tıklama ile aktif ve pasif hale getirme özelliği.

FireBug ile alışık olduğumuz bu özellik yeni sürüm ile birlikte kullanıcının kullanımına sunulmaktadır. Güzel bir özellik.

CSS başlangıç sayfaları

Bir önceki sürüme göre daha fazla hazır sayfa yapısı imkanı sunuyor yeni sürüm bizlere.

Ben bu özelliği kullanmasam da kullananlar için artı bir özellik.

HTML5 ve CSS3 Desteği

Program ilk çıktığında beraber çıkmaması çok büyük bir eksiklikti, ancak sonradan bir güncelleme ile bu paketi eklemeleri hatalarını çok çabuk anlamları güzel oldu. HTML5 ve CSS3 tanımlarını otomatik tamamlama ile ekleyebliyoruz artık.

Hele CSS3′te farklı tarayıcılardaki bu önek karmaşasına bir çzöüm olması güzel oldu.

PHP Tabanlı CMS Desteği

Bu sürümdeki en büyük atılım bence bu dur. PHP tabanlı CMS’leri WordPress, Drupal ve Joomla tam anlamıyla düzenleme imkanı sağlıyor bu yeni sürüm.

Bu CMS’leri geliştirenler için biçilmiş kaftan bence yeni sürüm.

Kolay entegrasyon, düzenleme, dosya upload etme vb. özellikleri ile tam bir CMS editörü olmuş Dreamweaver. Dinamik yapılı bu CMS’leri tam anlamıyla bir statik sayfa gibi kolayca değiştirebilme ve test edebilmeyi sağlıyor bizlere. Ayrıca otomatik tamamlama özelliği ile çok büyük kolaylık sağlıyor.

PHP özel sınıfı kod ipuçları

PHP ile oluşturulan özel sınıflar içinde otomatik tamamlama özelliği eklenmiş. PHP’ye yönelik bir editör olma eğilimi sergilemiş yeni sürümde Dreamweaver, bence mantıklı Visual Studio’yu geçemeyeceğini anlayınca PHP’ye yönelmiş.

Dinamik İlişkili Dosyalar

Bir önceki sürümde statik sayfalar için sunulan ilişkili dosyalar özelliği şimdi dinamik dosyalar içinde eklenmiş. Dreamweaver üzerinden PHP yaznalar için çok güzel bir özellik bence.

SVN(Subversion) Desteği Geliştirilmiş

Daha öncedende sunulan SVN(Subversion) özelliği bu sürüm ile birlikte bayağı bir geliştirilmiş. Diğer SVN programları ile uyum ve çerçevenin geliştirilmesi bu özelliği daha kullanılabilir yapmış.

Business Catalyst® ile uyum

Programlamaya gerek kalmadan güçlü çevrimiçi işletmeler oluşturmak için Dreamweaver ile Adobe Business Catalyst® hizmeti uyumu sağlanmış.

Basit Site Kurulumu

Mevcut site kurulumu penceresi biraz daha geliştirilerek kullanıcıya daha fazla seçenek ve kolaylık sunulmuş. Site kontrolünü Dreamweaver üzerinden sağlayanlar için güzel bir gelişme.

Widget Browser Özelliği

Bu özellik bize diğer insanların geliştiridiği yapıları sitemize ekleme imkanı sunuyor. Güzel bir özellik eğer uygulama sayısı artarsa gayet kullanışlı bir özellik

Özellik hakkında daha fazla bilgi için  http://tv.adobe.com/watch/learn-dreamweaver-cs5/using-the-widget-browser/ videoyu izlemenizi tavsiye ederim.

İlişkili Dosyaları Filtreleme


Dreamweaver çalıştığımız doküman ile ilgili dosyalarıda gösteriyor, yeni sürüm ile birlikte dinamik dosyalarıda göstermeye başlıyor. Bu bazen karmşaya neden oluyor, bunu içni bir çözü üretilmiş. Filtreleme menüsünden itediğimiz dosya tipini veya dosyaları filtreleye biliyoruz. Bu sayede ilişkili dosyaları daha düzenli bir hale getirme imkanımız oluyor.

Sonuç

Yeni sürümün CSS ve PHP üzerine yoğunlaşmış bir sürüm olmuş. PHP CMS geliştirenler için bir çok yenilik var. CSS için getirilen yenilikler ve daha fazlası zaten mevcut kullanımımda vardı benim. Gerek FireBug ve gerekse IETester. Benim asıl beklentim büyük bir ivme kazana javascript kütüphaneleri hakkında bir gelişme idi. Örneği jquery kütüphanesi ile çok çalışan biri olarak jquery otomatik tamamlama özelliği olması benim çok sevindirirdi, ne yapalım bundan sonraki sürümleri bekleyeceğiz artık bunun için.

Yukarıda belirttiğim gibi sitelerimiz farklı platformlarda ve tarayıcılarda test için AdobeLabs yeterli gelmiyor bence daha fazla gelişmiş bir araç ile bu açık kapatılmalıdır.

Kalın sağlıcakla.

Kaynaklar

Yeniliklerin Takibi ve Google Reader

Arayüz Geliştiricilerin Görev Tanımı adlı yazımda arayüz geliştiricilerinin görevlerini tanımlarken aşağıdaki metni kullandık.

  • Yenilikçi: Web mecrasındaki gelişmeleri takip etmeli ve uygulamalarında bu yenilikleri gerektiğinde kullanmalıdır.

Çok önemli ve üzerinde durulması gereken bir noktadır bu. Birçok arayüz geliştiricide maalesef bu konu hakkında çaba göstermiyorlar ve buda beni üzüyor açıkçası. Bu iş bu meslek yenilikçi, hızlı gelişen bir meslek diyoruz, o zaman yenilikleri takip etmeliyiz.

Aslında yapmamız gerekende öyle çok zor bir şey değil. Her güne başlarken bilgisayarımızın başına geçtiğimizde belirli siteleri sırası ile takip edip, zamanımız varsa okumak yoksa işaret koyup geçerek sonraya bırakmak gerekir. Eskiden bu iş zordu tek tek her siteyi aç falan şimdi RSS denilen bir şey var, aslında uzun süredir var. Bizi her siteyi tek tek dolaşma derdinden kurtarıyor ve hız ve zaman kazandırıyor.

RSS’lerimizi takip etmemizi, organize etmek için bir programa gerek duyuyoruz, aslında bunu birçok tarayıcıda sağlıyor, ayrıca programlarda var, ama ben burada size Google Reader hakkında bilgi vereceğim.

Google Reader baştan beri kullanıyorum, bu iş için bazı araçları kullanmayı denediysem de kendimi Google Reader’da geri dönmüş buldum. Tek sorunum ara sıra yavaş çalışması. En büyük avantajı ise çevirimiçi bir araç olması sebebiyle istediğiniz yerden erişebiliyorsunuz ve böylecede senkron sorununuz olmuyor.

Derler ya çocukluğunu bilirim diye, gerçekten Google Reader’ı çıktığı ilk günlerden beri kullanıyorum, belkide bu nedenle bırakıp başka bir RSS okuyucuya geçemiyorum. İlk çıktığında çok cılızdı. Özellikleri zamanla eklediler. Arama eklediler, Türkçe desteği eklediler, klasör yapısını eklediler, benzer öneri siteleri ekledir. Yenilik bakımından gayet iyi ancak yavaşlık sorununu bir türlü tam olarak halledemediler.

Google Reader Özellikleri

Çevirimiçi Araç
En büyük avantajı çevirim için olması ve bundan dolayı her yerden erişim imkanı sağlaması

Senkrenizasyon
Çevirim için olduğu için senkronizasyon sorunu olmuyor.

Kolay Kullanım
Google hesabı olan herkes başka bir şeye ihtiyaç duymadan kullanmaya başlıyor.

Scroll ile ilerledikçe feedlerin okundu olarak işaretlenmesini ayarlayabiliyoruz, benim en çok sevdiğim özelliklerinden bir tanesi.

Arama

Tüm RSS’leriniz arama imkanı sunuyor. Nispeten hızlı bir araması var. İlk başlarda yokken bunu farklı araçlarla sağlıyorduk.

RSS’lerimizi Organize Etmek
Klasörleme ve etiketleme imkanı sayesinde rss’lerimizi organize edebiliyoruz.

Taşıma özelliği ile normalde alfabetik sıralanan listeyi istediğim sıralamaya kavuşturabiliyoruz.

Görsel Planı

Google Reader’ın görünümü gayet başarılı. Solda menüde abonelikler listeleniyor, ayrıca sol menü üstünde genel özelliklere erişim sağlıyor, sağda ise feedleri görüyoruz.

Favikon desteği sayesinde siteleri daha iyi tanıma imkanı sağlıyor. Bazı sitelerin favori ikonlarını görmemesi bir dezavantaj.

Alınma ve Yayınlanama zamanını ayrı ayrı gösteriyor olması güzel.

Feedlerin istatistiklerini kendi içinde görmemizi sağlıyor.

Daha sonra okumak için "okunmadı olarak sakla" özelliği var. Ayrıca alttaki yıldız ekle yardımı ile de işaretleyebiliriz.

Genişletilmiş ve Liste Şeklinde feedlerimizi listeleyebiliyoruz, benim tercihim genişletilmiş olarak izlemek ama çok fazla birikince listeye geçebiliyorum.

Stilni değiştirme imkanı veriyor http://www.fabianpimminger.com/playground/google-reader-styles/ adresindeki scriptleri yükleyerek Google Reader’ınızın görünümünü değiştirebilirsiniz.

Klavye Kısayolları
Klavye kısayolları gayet başarılı. Kısayolları listesi Aşağıda en çok kullanılanları listeledim.

Kısayol Açıklaması
n sonraki öğeye geç
m okundu/okunmadı olarak işaretle
t öğeyi etiketle
p önceki öğeye geç
shift-n sonraki abonelik
v yazının orjinalini göster
shift-s paylaş
f tam ekran moduna geçiş

Ayrıca gelişmiş bir kısayol çözümleri sunuyor google reader bize

g + u

tuşlarına basarak tüm aboneliklerimizi listelendiği bir popup ekran açılıyor buradan istediğimiz aboneliğin ismini girerek direk erişebiliyoruz örneğin

g + u + fatih:hayri

yazdığınızda eğer benim siteme abone iseniz direk benim rss’ime erişeceksiniz.

Paylaşım

Okuduğumuz yazıyı çok kolay bir şekilde paylaşabiliyoruz.

İstatistikler

Google Eğilimler sayfası sayesinde istatistiklerimizi görebiliyoruz

Dil Seçenekleri

Türkçe dil desteği mevcut. Dilime çevir özelliği ile yabancı dillerdeki RSS’leri izlemek daha kolay, gerçi bu özellik tam randımanlı çalışmıyor.

Öneri RSS’ler

Araştır bölümü altındaki öneriler kısmı gayet başarılı

İçe/Dışa Aktar

Kolay bir içeri ve dışarı aktarma seçeneği ve xml tabanlı bir yapısı olduğu için gayet kolay düzenlene biliyor.

Mobil Araçlarda
Cep telefonu vb araçlarda da kullanılıyor. Ben hiç kullanmadım, o nedenle bu konuda bir yorumum olmayacak.

Çevrimdışı Kullanımı
Google Gear ile internete bağlı olmadan da kullanım imkanı sağlıyor.

RSS olmayan siteleri takip imkanı

Bazı sitelerde RSS olmaya biliyor, bu durumda ne yapacağız, Google Reader bu durumda da bize yardımcı oluyor. RSS olmasa da bir web sitesini ekleyerek takip altına alabiliyoruz. Sitede değişiklik oldukça bize haber veriyor sistem.

Feed Puanı Uygulaması

Son olarakta bir eklentiden bahsedeceğim. Greasmonkey ve PageRank eklentilerini kurup Google Reader’ı açınca okuduğumuz her feed’in başına o sitenin puanını koyuyor, bu sayede belki birçok rss ilk görüşte değerlendirebiliyoruz. Tek dezavantajı yavaş olan Google Reader’ı daha da yavaşlatması.

Abonelik üstü kısmına eklenen turuncu dropdown ile buna göre filtreleme yapabiliyoruz.

Sol üstteki checkbox kaldırılıp işaretlenerek bu özellik kolayca kapatılıp açılabilir.

Google Reader’ı Güncel Tutmak ve Liste Paylaşımı

Ben belli aralıklarla(2-3 ay aralığında) sol menüde üstte yer alana Google Eğilimlerini sayfasındaki Abonelik Eğilimleri kısmındaki "Etkin Değil" kısmını kontrol ediyorum. Burada uzun süre yazı yazmayan ve takibe değer bulmadığım abonelikleri kaldırıyorum.

Google Reader Aboneliklerim

Google Reader’da okuduğum veya daha sonra okumak için işaretlediğim yazıları gerek sitemdeki web’den seçme haberler kısmı ve gerekse friendfeed’den sizlerle paylaşıyorum. Şimdide Google Reader dosyamı paylaşıyorum.

Benim Google Reader Dosyam (.xml)

Google Reader Ayarlar kısmında içeri aktar diyerek ekleyebilirisiniz.

Sonuç

Makale her ne kadar Google Reader kullanımı hakkında olsada burada anlatmak istediğim yenilikleri izlemek ve yararlı gördükleriniz okuyup uygulamanızdır. Örneği bir makalede twitter’ın rss readerların okunma oranlarını geçen seneye göre %27 azalttığını söylüyor. Bizim için RSS olmuş, Google Reader olmuş veya twitter olmuş önemli değil, önemli olan yenilikleri takip etmek ve geri kalmamaktır. Ferruh Mavituna’nın Verimli Bilgi Takibi makalesini okumanızı tavsiye ederim.

Çağın gerisinde kalmayın. Kendinize iyi bakın.

Kaynaklar

Google Chrome 5 (Beta)

Daha önce her çıkan tarayıcının yeni sürümleri hakkında bir araştırma makalesi yazdım, ancak Google Chrome hakkında yazmak nasip olmadı. Bunun en büyük sebebi Chrome’un çok hızlı sürüm atlaması, derli toplu sürüm bilgilerinin yayınlanmaması ve sürümler arasında çok büyük özellik eklemesi olmaması idi. Ayrıca Chrome’un pazar payınında bu yazının gecikmesinde etkisi olduğunu kabul etmeliyim. 

Google chrome’un hızlı yükselişi ve hız konusundaki insanlara verdiği izlenim kısa sürede kendinden bahsettirdi.  Son tarayıcı kullanım oranlarına göre Google Chrome en hızlı yükselen tarayıcı oldu ve kullanım oranını %6,73 oldu.

Arayüz geliştiricileri için tarayıcılar ve sürümleri çok önemlidir. Her sürüm incelemek ve sürüm yeniliklerinden haberdar olmak her arayüz geliştirici için şarttır. Arayüz geliştiricinin aklının bir köşesinde tarayıcı uyumluluğu bilgisi olmalıdır. Bu bize kod yazarken hız kazandıracaktır ve web mecrasının gelişimi hakkında bilgi sahibi yapacaktır.

Gelelim sonunda kendisini yakaladığım Google Chrome 5 Beta’dan bahsetmeye. Okumaya devam edin »

fatihhayrioglu.com 4. seneyi doldurdu

Yine sitenin yıl dönümünü kaçırdım, güya ayrıntılı bir yazı yazacaktım. 14 Nisan’ı biraz geçtik ve 5. seneye ayak bastık.

Zaman ne kadar çabuk geçiyor. Neyseki geriye bakınca elle tutulur bir şeyler görmek güzel.

Geçen senenin istatistikleri

  • 48 yazı
  • 277.428 tekil kullanıcı
  • 730.199 sayfa görünümü

Toplamda 5.151 yorum var ve 45.164 yorumu akismet spam olarak yakalamış.

Beni en çok sevindiren istatistik css dersleri sayfasının anasayfadan daha çok ziyaret edilmesi.

Önümüzdeki senenin daha güzel geçeceğini ümit ediyorum.

« Önceki Yazılar

Sonraki yazılar »

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.