Sanalkurs E-Dergi Sayı 15

Merhabalar,

Sanalkurs olarak neredeyse 9 yıla yakın bir süredir sizlerle birlikteyiz. İnternette sunduğumuz derslerin yanısıra e-dergimizde de bu birlik-telik katlanarak sürüyor.

Sizlerden gelen yazılara, çalışma-lara, çizimlere, fotoğraflara olabil-diği ölçüde yer vermek başlıca he-defimiz. Başarılı arkadaşlarımızın ön plana çıkması, kendini tanıtması bizim için önemli. Gerek bilgisiyle, gerek kabiliyetiyle ciddi çalışmalara imza atabilen insanlara her zaman ihtiyaç var.

Bilgi paylaşıldıkça artan bir şey. Bu nedenle hem bildiklerinizi paylaş-mak, hem de paylaştıklarınızı muha-faza etmek adına sizleri Sanalkurs’ta daha aktif görmek istiyoruz.

editörden...

Genel Yayın Yönetmeni/ DirectorSiraceddin El

Editörler / EditorsAbdullah Tekin, Mustafa Ülkü

Kapak Görseli / Cover VisualTurhan Algan

Tasarım / DesignAli Uçar, Siraceddin El

Yazarlar / AuthorsAbdullah Tekin, Bilal Akçay

Emin Eryılmaz, Hakan Çamoğlu İlknur Akpınar, İsa PehlivanlıKübra Akova, M. Ali Yılmaz

Mustafa Tanışır, Mustafa Ülkü Siraceddin El, Yunus Emre Keskin

Yunus Özen, Ziya Kahraman

Çalışmalar / WorksAbdullah Tekin, Ahmet Tanyıldızı,

Anıl Yüncü, Ayşenur Başaran, Beyhan Bayhan, Cansu Aras, Cansu

Taşkan, Celal Emre Öz, Ervanur Bürcü, Fatih Bayrakdar, Gözde Çep, Mehmet Aksu, Metin Kabaca, Onur

Mert Ateş, Serkan Şahin, Sertaç Aydoğdu, Soner Demirsoy, Talha

Çay, Turhan Algan, Üsame Çorman

Sponsorlar / SponsorsHosting: Garanti Server

Online Dergi: Diji Mecmua

Sanalkurs Dergisi, Sanalkurs.net sitesinin yayın organıdır. Hiçbir yazı ve çalışma Sanalkurs.net ve

ilgili yazarından izin alınmaksızın kullanılamaz. Yazılar yazarlarına aittir ve içeriklerinden yazarları

sorumludur.

Yıl: 2 • Sayı: 15 • Mart2011 • Ücretsiz

editörden...

5

7

Ahmet Tanyıldızı

ASP.netLog’lama

ASP.netMVC3’e Genel Bakış

CSSCSS’ye Giriş

Püf NoktasıElevator Pitch

İnternetGünlük Fırsat Siteleri

İnternetAnlamsal Web

İnternetGüncel SEO Teknikleri

FacebookEn Çarpıcı Yenilikler

Sanalkurs’tanSon Gelişmeler

TeknolojiHaberler

Grafik TasarımBir Kitap Tasarımı

Illustrator Çok Konturlu Yazı

Photoshop Manga Modeli Yapmak

Flash AS 3.0Klavye Kontrolü

Photoshop Farklı Bir Menü

RöportajBengi Gençer

12 76

46 102

30 88

60 124

26 80

54 110

38 96

66 132

Bu Sayıda...

11

Üsame Çorman

[ SANALKURS’TAN HABERLER ]

Aslında 3. seminerimizi Yıldız Teknik Üniversitesi’nde gerçekleş-tirmek üzere yapmıştık, ne var ki YTÜ’nün kuruluşunun 100. yılına

denk gelen programlar nedeniyle süreç biraz uzayınca seminer prog-ramlarımızı iptal etmek üzereydik. Tam bu sırada İstanbul Ticaret Üni-

Sanalkurs ekibi, yılın ilk seminerini İstanbul Ticaret Üniver-sitesinde gerçekleştirdi. 5 seminerden oluşan ve sonrasında soru-cevap faslıyla süren program, İstanbul’da olduğu kadar, başka illerdeki katılımcılardan da büyük ilgi gördü.

Sanalkurs 3. Bilişim Seminerleri

vesitesi Bilgisayar Tek-nolojileri Kulübünden Zeynep Duman arkada-şımız bize bir çağrıda bulundu ve biz de hızlı bir karar verme aşaması sonrası böyle bir organi-zasyonu birlikte yapma-ya evet diyerek içeriği belirleme sürecine geç-miştik.

Zeynep Duman, ağır-lıklı olarak program-lamaya yönelik konuların işlen-mesinin daha güzel olacağını ve kendisine gelen taleplerin de bu yönde olduğunu belirttiğinde, ar-kadaşlarla bu konuyu değerlen-dirirken “görsel programlara yer vermemek katılımın az olmasına neden olabilir mi?” diye bir an dü-şünmüşsek de, kısa sürede fikir-lerimiz netleşmiş ve kodlamalara yönelik doyurucu bir seminer için kolları sıvamıştık.

İlk iş, tarihin belirlenmesiydi. 8 Ocak 2011 Cumartesi şeklinde ta-rihimizi kesinleştirdikten sonra Zeynep’e bu konuyu bildirmiştik ve o da ekip arkadaşlarıyla koordineli bir şekilde hazırlıklara başlıyordu.

Hakan Çamoğlu ve Erhan Meydan‘la hangi konuları anlata-bileceklerini konuşurken, Erhan Meydan ilk önce “InDesign’da Tab-

let Cihazlara Yönelik Tasarımlar” konusunu seçmişti ama programcı gurubunun ağrılıklı olacağını öğ-rendiğinde “CSS3 ile Animasyon Yapma” konusunu ele alacağını belirtti. Hakan Çamoğlu ise gün-demin popüler konularından biri olan “HTML5 Yenilikleri” başlığı-nı tercih ediyordu. Seminer için 5 ders uygun olacaktı, bu nedenle Yunus Özen, ASP.net’te MVC konu-suyla yine bizlere katılıyordu.

Hemen arkasından Microsoft MVP ünvanına sahip bir arkadaşı-mızı, Uğur Umutluoğlu‘nu davet ettik. “ASP.net 4.0 SEO Yenilikleri” başlığı ile yer alabileceğini belirt-tiğinde geriye sadece bir konuş-macımızı belirlemek kalıyordu. Turkcell Teknoloji’den gelecek bir uzman arkadaşımızdan Andro-id yazılımlara yönelik bir seminer beklerken, son anda yaşanan bazı

13

gelişmeler nedeniyle uzman arka-daşımız katılamayağını belirtiyor ve biz de rotayı Birtek Bilişim fir-masının patronu ve aynı zamanda PHP uzmanı İlhan Kuzgun’a çeviri-yorduk. Yaptığımız bir toplantıda İlhan Kuzgun, PHP’de kendi yaz-dığı framework üzerinden PHP5 ve Object Oriented PHP konusunu ele alacağını belirtiyordu.

Böylece konuşmacılarımız ta-mamlanmıştı. Son derece aktif ve etkili bir şekilde çalışan Bilgisayar Teknolojileri Kulübü önceki semi-nerlerimizin aksine bize yapacak iş bırakmamaya kararlıydılar ve müt-hiş bir performans sergilereyerek üst düzeyde bir organizasyona im-

za atıyorlardı. Seminer esnasında ikramlar, plaketler, çiçekler, hedi-yeler bizlere hazırladıkları sürpriz-lerden bazılarıydı.

Reklam ve Sponsor Sorumlumuz Harun Kılıç’la “sponsor konusun-da neler yapabiliriz”i düşünürken, Monster Notebook bu kez semi-nerimizin masraflarını karşılamayı üstleniyor ve İstanbul Host ise katı-lan herkese 1 yıllık hosting hediye edeceğini bizlere iletiyordu. Anla-şılan o ki, hazırlıklar tamamlanmış ve geriye sadece seminerler, semi-nerlerden üst düzeyde yararlana-bilecek katılımcılar kalmıştı.

Yazılım Uzmanımız Abdullah Te-kin, seminer katılım formunu dev-

14 sanalkurs 15

reye aldığında müthiş bir başvuru ile karşılaşmıştık. 700’ü aşkın bu başvurular elbette güzel bir hadi-seydi, ne var ki, kaydolan herkesin katılabilmesi tecrübelerimiz ışığın-da mümkün görünmüyordu. Baş-vuran üyelerimizin yarısı katılsa bi-le zaten salonu çok çok doldurmuş olacaklardı.

Kulüp başkan yardımcısı Zeynep Duman ile bu esnada süren tele-fon trafiği sonrası bütün hazırlık-lar artık tamamlanmıştı. Ufak tefek küçük endişelerimizin ise seminer günü geldiğinde tamamen yersiz ve gereksiz olduğunu hep birlikte görecektik.

8 Ocak 2011 Cumartesi günü ulu-

sal kanallara programlar çeken ka-meraman arkadaşımız Recep Mer-dan seminerlerimizi yine önceden olduğu gibi kaydetmek üzere bize katılırken, Siracel, Asım Ekinci ve Harun Kılıç’tan oluşan Sanalkurs ekibi saat 11.00 gibi İstanbul Tica-ret Üniversitesine doğru yola çıkı-yorlardı.

Görülen o ki, kulüp ekibi dersi-ne iyi çalışmıştı ve katılımcılara yol gösteren arkadaşlar, kayıt yapan-lar, takip edenler daha ilk başta organizasyonun ciddiyetini fevka-lade hissettiriyorlardı.

Katılımcılar salonu doldurmuş-lardı. Beklediğimizin üzerinde bir rağbetle karşılaşmıştık. (Toplam

15

katılımcının 250-300 arasında bir rakam olduğunu sonradan tespit edecektik.) Aslında 3. seminerimizi Yıldız Teknik Üniversitesi’nde ger-çekleştirmek üzere yapmıştık, ne var ki YTÜ’nün kuruluşunun 100. yılına denk gelen programlar ne-deniyle süreç biraz uzayınca semi-ner programlarımızı iptal etmek üzereydik. Tam bu sırada İstanbul Ticaret Ünivesitesi Bilgisayar Tek-nolojileri Kulübünden Zeynep Du-man arkadaşımız bize bir çağrıda bulundu ve biz de hızlı bir karar verme aşaması sonrası böyle bir organizasyonu birlikte yapmaya evet diyerek içeriği belirleme süre-cine geçmiştik.

Zeynep Duman, ağırlıklı olarak programlamaya yönelik konuların işlenmesinin daha güzel olacağını ve kendisine gelen taleplerin de bu yönde olduğunu belirttiğinde, arkadaşlarla bu konuyu değerlen-dirirken “görsel programlara yer vermemek katılımın az olmasına neden olabilir mi?” diye bir an dü-şünmüşsek de, kısa sürede fikir-lerimiz netleşmiş ve kodlamalara yönelik doyurucu bir seminer için kolları sıvamıştık.

İlk iş, tarihin belirlenmesiydi. 8 Ocak 2011 Cumartesi şeklinde ta-rihimizi kesinleştirdikten sonra Zeynep’e bu konuyu bildirmiştik ve o da ekip arkadaşlarıyla koordineli

16 sanalkurs 15

bir şekilde hazırlıklara başlıyordu.

Hakan Çamoğlu ve Erhan Meydan‘la hangi konuları anlata-bileceklerini konuşurken, Erhan Meydan ilk önce “InDesign’da Tab-let Cihazlara Yönelik Tasarımlar” konusunu seçmişti ama programcı gurubunun ağrılıklı olacağını öğ-rendiğinde “CSS3 ile Animasyon Yapma” konusunu ele alacağını belirtti. Hakan Çamoğlu ise gün-demin popüler konularından biri olan “HTML5 Yenilikleri” başlığı-nı tercih ediyordu. Seminer için 5 ders uygun olacaktı, bu nedenle Yunus Özen, ASP.net’te MVC konu-suyla yine bizlere katılıyordu.

Hemen arkasından Microsoft

MVP ünvanına sahip bir arkadaşı-mızı, Uğur Umutluoğlu‘nu davet ettik. “ASP.net 4.0 SEO Yenilikleri” başlığı ile yer alabileceğini belirt-tiğinde geriye sadece bir konuş-macımızı belirlemek kalıyordu. Turkcell Teknoloji’den gelecek bir uzman arkadaşımızdan Andro-id yazılımlara yönelik bir seminer beklerken, son anda yaşanan bazı gelişmeler nedeniyle uzman arka-daşımız katılamayağını belirtiyor ve biz de rotayı Birtek Bilişim fir-masının patronu ve aynı zamanda PHP uzmanı İlhan Kuzgun’a çeviri-yorduk. Yaptığımız bir toplantıda İlhan Kuzgun, PHP’de kendi yaz-dığı framework üzerinden PHP5 ve Object Oriented PHP konusunu

17

ele alacağını belirtiyordu.

Böylece konuşmacılarımız ta-mamlanmıştı. Son derece aktif ve etkili bir şekilde çalışan Bilgisayar Teknolojileri Kulübü önceki semi-nerlerimizin aksine bize yapacak iş bırakmamaya kararlıydılar ve müt-hiş bir performans sergilereyerek üst düzeyde bir organizasyona im-za atıyorlardı. Seminer esnasında ikramlar, plaketler, çiçekler, hedi-yeler bizlere hazırladıkları sürpriz-lerden bazılarıydı.

Reklam ve Sponsor Sorumlumuz Harun Kılıç’la “sponsor konusun-da neler yapabiliriz”i düşünürken, Monster Notebook bu kez semi-

nerimizin masraflarını karşılamayı üstleniyor ve İstanbul Host ise katı-lan herkese 1 yıllık hosting hediye edeceğini bizlere iletiyordu. Anla-şılan o ki, hazırlıklar tamamlanmış ve geriye sadece seminerler, semi-nerlerden üst düzeyde yararlana-bilecek katılımcılar kalmıştı.

Yazılım Uzmanımız Abdullah Te-kin, seminer katılım formunu dev-reye aldığında müthiş bir başvuru ile karşılaşmıştık. 700’ü aşkın bu başvurular elbette güzel bir hadi-seydi, ne var ki, kaydolan herkesin katılabilmesi tecrübelerimiz ışığın-da mümkün görünmüyordu. Baş-vuran üyelerimizin yarısı katılsa bi-le zaten salonu çok çok doldurmuş

18 sanalkurs 15

olacaklardı.

Kulüp başkan yardımcısı Zeynep Duman ile bu esnada süren tele-fon trafiği sonrası bütün hazırlık-lar artık tamamlanmıştı. Ufak tefek küçük endişelerimizin ise seminer günü geldiğinde tamamen yersiz ve gereksiz olduğunu hep birlikte görecektik.

8 Ocak 2011 Cumartesi günü ulu-sal kanallara programlar çeken ka-meraman arkadaşımız Recep Mer-dan seminerlerimizi yine önceden olduğu gibi kaydetmek üzere bize katılırken, Siracel, Asım Ekinci ve Harun Kılıç’tan oluşan Sanalkurs ekibi saat 11.00 gibi İstanbul Tica-ret Üniversitesine doğru yola çıkı-

yorlardı.

Görülen o ki, kulüp ekibi dersi-ne iyi çalışmıştı ve katılımcılara yol gösteren arkadaşlar, kayıt yapan-lar, takip edenler daha ilk başta organizasyonun ciddiyetini fevka-lade hissettiriyorlardı.

Katılımcılar salonu doldurmuş-lardı. Beklediğimizin üzerinde bir rağbetle karşılaşmıştık. (Toplam katılımcının 250-300 arasında bir rakam olduğunu sonradan tespit edecektik.)

Fuayedeki yerini alan ve standını kuran Monster Notebook ise, 3 bo-yutlu gözlükleriyle yüksek perfor-manslı bilgisayarlarını tanıtıyordu.

19

Oyun oynamak ve yüksek bellek harcayan programları kullanmak, bu “canavar” bilgisayarlarla son de-rece hızlı bir şekilde gerçekleşiyor-du. Katılımcılar da Need for Speed Hot Pursuit, Call of Duty Black Ops gibi yüksek donanım gerektiren oyunları son derece güçlü dona-nımlara sahip bilgisayarlarda oy-nayarak hem arada stress attılar, hem de test etme imkanı buldular.

İlk olarak kürsüye çıkan Yrd. Doç. Dr. M. Alper Özpınar, seminerlerin ve paylaşmanın bilgi hayatımıza yaptığı katkıları belirtirken, hemen sonra kürsüye gelen Siracel, konuş-masına başlarken bu ilgiyi gördük-lerinde Sanalkurs olarak gerçekten doğru bir yol üzerinde olduklarını

ve son derece önemli bir şey yap-tıklarını fark ettiklerini dile getiri-yordu. “İstanbul dışından gelenler var mı?” sorusuna kalkan eller de bunu açıkça gözler önüne seriyor-du. Sözlerinde Sanalkurs’un aynen Vikipedi gibi kullanıcı ve üyelerin paylaşımlarından oluşan büyük bir oluşum olduğunu vurgulayan Sira-cel, Sanalkurs’un ticari kaygılardan uzak bir düşünce yapısıyla hareket ettiğini, amacın sadece ülkemizin her insanının bilgiye kolay ve hız-lı bir şekilde ulaşmasını sağlamak olduğunu ifade etti. Katılımcılara, bilgilerini daha sık paylaşmaları ve böylece öğrenmek isteyen herkese yol göstererek hayatlarının en bü-yük iyiliklerinden birini yapmaları yönünde çağrıda bulundu.

20 sanalkurs 15

1. Yunus Özen (Asp.Net MVC 3)Sanalkurs 3. Bilişim Seminerle-

rinin ilk konuşmacısı olan Yunus Özen, MVC ile kolayca neler yapıla-bileceğini anlatırken, yeniliklerden bahsetti ve seminerinin sonunda yaptığı demoyla konusunu örnek-lendirdi. Soruları cevapladıktan sonra yerini ikinci konuşmacımıza bıraktı.

2. Erhan Meydan (CSS 3 İle Ani-masyon)

Sunumu ve semineriyle Türkiye’de belki de bir ilke imza atan Erhan Meydan, kurulumu ve kullanımı son derece basit olan Sencha isimli ücretsiz program-la CSS 3 ile nasıl kolay bir şekilde animasyon yapılabileceğini biz-lere anlatırken, aslında satırlarca kod gerektiren, belki yapılması için mutlaka Flash gereklidir diye dü-şünülen çalışmaların bir kaç kıvrak hareketle yapılabildiğini göstere-rek bizi hayretlere düşürdü.

3. Uğur Umutluoğlu (Asp.Net 4.0’da SEO Yenilikleri)

Muhakkak ki, ASP.net 4.0 sürü-müyle pek çok yenilikle birlikte programcıların hayatına girerken bu yeniliklerin tamamını bir saate sığdırmak da neredeyse imkansız-dı. Bu nedenle Uğur Umutluoğlu da yine popüler yeniliklerden sa-dece birini tercih ederek anlatı-

mını gerçekleştirdi. Programının bitiminden sonra erken çıkması gereken Uğur Umutluoğlu’na he-diyelerini takdim ederek uğurla-dık.

4. Hakan Çamoğlu (HTML 5 Ye-nilikleri)

HTML5’in bir devrim değil, evrim olduğunu ileri sürerek başladığı “şov”uyla HTML 5 öğrenmek iste-yenlerin öncelikle Web 2.0 ile ilgili herşeyi öğrenmesi gerektiğini be-lirten Çamoğlu, sunumu ve espri-leriyle büyük ilgi gördü. Gösterdiği örnekler ve nasıl yapıldığına ilişkin neredeyse “kod yazmadan” yaptığı atraksiyonlarla büyük beğeni top-ladı.

5. İlhan Kuzgun (PHP 5 ve Object Oriented PHP)

Kendi yazdığı frameworks üzerin-den yaptığı sunumuyla seminerin son sunumunu gerçekleştiren İl-han Kuzgun, salonu dolduran PHP severlerin sorularını cevaplayarak seminerini sonlandırdı.

PLAKETLERBilgisayar Teknolojileri Kulübü

ve Sanalkurs olarak konuşmacılara bazı hediyelerimiz oldu. Monster Notebook ise ekran temizleyici, ti-şört, 3D sticker gibi hediyeleriyle

21

yine katılımcıları hediyelere boğ-du. İstanbul Hosting’in ücretsiz hosting hediyeleri ise bütün katı-lımcılarımıza ulaşan bir diğer hedi-yemizdi.

SORU – CEVAP BÖLÜMÜKonuşmacılarımızın herbiri ken-

di sahasında uzman isimler ve şir-ketleri var. Hal böyle olunca ciddi bir birikime ve sektör tecrübesine sahipler. Sanalkurs olarak katılım-cılar onlardan bu yönde de istifade etsin diye düşündük ve soru – ce-vap faslında sektörel anlamda ol-sun, teknik anlamda olsun akılları-na takılan, merak ettikleri soruları sormalarını istedik. Projesi olan ve bunu nasıl uygulamaya koyabile-

ceğinden “PHP mi iyi, ASP.net mi?” sorusuna kadar pek çok soruyu uz-manlarımız eğlenceli bir havada, son derece mütevazı ve yol göste-rici üsluplarla cevaplamaya çalıştı-lar. Hepsine çok teşekkür ediyoruz.

SONUÇİnanıyoruz ki, 3. Sanalkurs Se-

minerleri de amacına ulaştı ve Türkiye’nin neresinden gelip katı-lırsa katılsın, tüm katılımcılar mem-nun olarak ayrıldı. Bu seminerde uzman konuşmacılarımız hem bil-gi, hem de tecrübeleriyle herkese pek çok şey kattı. Hem eğlenceli, hem üst düzeyde bir seminer ha-vası oluştu, hem de güzel dostluk-lar gerçekleşti.

22 sanalkurs 15

23

Sertaç Aydoğdu

25

Cansu Taşkan

Sanalkurs.net’in değerli yazar-larından Ertuğrul Haskan’ın uzun süredir üzerinde çalıştığı kitap nihayet yayında!

Web programlamaya parlak bir giriş yapmak isteyenler! “Web tasa-rımının geleceği HTML5 ve CSS3 ile kod yazmak istiyorum ve web tasarı-mını temelden kavramak istiyorum” diyenler! Bu kitap sizin için!

Bu kitapla, çoğu mobil cihazın ve browser’ın desteklediği HTML5 ve CSS3 ile kodlama bilginizi bir adım öteye taşıma imkanı bulabilirsiniz. Yeni web standardı HTML5 ile web

sayfalarının içeriğini çok daha iyi yapılandırabilir, birbirinden farklı browser’lar için farklı çözümler üret-meyi bu kitapla öğrenebilirsiniz. Üs-telik tüm bunları CSS3’ün gücüyle beraber yapma fırsatına sahipsiniz. CSS3’ün inceliklerini ve yeni özellik-lerini öğrenebilirsiniz.

HTML5 ve CSS3 için benzersiz bir kaynak

[ TEKNOLOJİ HABER ]

Facebook Yine Birinci!Türkiye’de 16 ilde yapılan Tüketici Trend Araştırması, Türk halkının teknoloji kullanımını ortaya koydu:

1. Facebook (%87.2), 2. Youtube (%29.5), 3. Twitter (%15.3)

Google ve FacebookDev Sitenin Peşinde!

Internet Explorer 9iPad’e Rakip

Google ve Facebook, Twitter için satın alma girişimlerinde bulunuyor. İngiliz gazetesi Wall Street’in haberine göre, Twitter’ın 10 milyar dolar istediği belir-tildi. Satın almanın gerçekleşmesi duru-munda sosyal paylaşım sitesi Twitter’a kayıt olmuş ve siteyi aktif halde ziyaret eden 200 milyonun üzerindeki kullanıcı-nın ise bu durumdan nasıl etkileneceği merak konusu.

Microsoft, yeni tarayıcı-sı Internet Explorer 9’un RC sürümünü indirilme-ye sundu. Hem 32, hem de 64 bit Windows’lar için sunulan IE9 RC,

beklendiği gibi gelişmiş bir sekme yönetimi, yenilenmiş simgeler ve daha fazla kişiselleştirme imkanı ile birlikte geliyor.

Beta sürümlerinde göze çarpan pek çok hatanın da düzeltildiği RC sürümü, ilk testlere göre oldukça stabil çalışıyor. IE9, Microsoft’un, Firefox ve Chrome’a kaptırdığı pa-zar paylarını geri almak için attığı en önemli adımlardan biri olarak kabul ediliyor.

Dünyanın en büyük tüketici elektroniği firmalarından Hew-lett Packard, ABD’nin San Fran-sisco kentindeki Ford Mason Merkezi’nde “Palm TouchPad”i tanıttı. TouchPad, rakibi iPad ile hemen hemen aynı boyut-lara, ağırlığa ve pil dayanma süresine sahip. 9.7 inç boyu-tunda çoklu dokunmatik ek-rana sahip TouchPad’de aynı

zamanda 1.3 megapiksel ön kamera, 6GB ve 32GB olmak üzere iki depo-lama seçeneği bulunuyor.

27

29

Talha Çay

Bu yazımızın konusu; bir kitabın veya derginin -tasarım ola-rak- sıfırdan, matbaaya gidene kadar izlediği süreçleri anla-mak ve sonuçta da bir kitap ya da dergi tasarlamanın anato-misini incelemek olacak.

Bir Kitap TasarımıYapmak

GRAFİK TASARIM

ZİYA KAHRAMANGrafik Tasarımcı

Bu yazımızın konusu; bir kitabın veya derginin -tasarım ola-rak- sıfırdan, matbaaya gidene kadar izlediği süreçleri anla-mak ve sonuçta da bir kitap ya da dergi tasarlamanın anato-misini incelemek olacak.

Bir Kitap TasarımıYapmak

GRAFİK TASARIM

ZİYA KAHRAMANGrafik Tasarımcı

30 sanalkurs 15

Bu sayıda sizlere önceki sayılardaki-lere nispetle biraz daha kapsamlı bir makale sunmaya çalışacağım. Genel olarak kitap tasa-rımını, kapak ta-sarımı ve dizgi ol-mak üzere iki ana başlıkta incelemek faydalı olacaktır. Kapak tasarımının değişik mecralar-da kapak düzeni, dizginin ise iç dü-zen ya da sayfa tasarımı şeklinde ifade edildiği unutulmamalıdır. Bu yazıda kapak tasarımını, bir dahaki sayıda da bu yazının ikinci bölümü olarak, dizgiyi anlatarak konuyu ta-mamlamış olacağım.

KAPAK TASARIMI YAPMAKKitap ya da dergi tasarımında ka-

pak demek herhangi bir üründe ambalaj demektir. Bir aracın moto-ru ve içi ne kadar kaliteli, ne kadar yeterli olursa olsun, dış tasarımı derme çatma olduğunda o araba-yı almaktan daha görür görmez vazgeçme ihtimaliniz oldukça yük-sek olacaktır. Kitap ve dergi tasarı-mında da, hatta daha genel ifade edecek olursak editoryal bir çalış-

mada da kapak tasarımı tıpkı bir arabanın kaportası gibidir. Tasarım ne kadar yeterli olursa, çalışmanın içindekilere olan merak o denli ar-tacaktır. Bundan dolayıdır ki büyük yayınevleri kapak tasarımını son derece önemsemekte, kapakları alanında önemli çalışmalara imza atmış grafikerlere yaptırmaktadır.

Grafik tasarımın genel teamülleri içinde tercihen bir kağıt üzerinde müsveddeler çalışıldıktan sonra bilgisayar ortamında tasarıma baş-lamak işleri kolaylaştıracaktır.

Kapakta TipografiTipografi, (Etimolojisi: Yunanca’da

“typos” (form) ve “graphia” (yaz-mak) sözcüklerinden türemiş olan)

31

typographia sözcüğünün Türkçe halidir. Kavram; forma uygun yaz-mak demektir.

Yazı tipi, punto büyüklüğü, sa-tır uzunluğu, satır arası boşluk ve benzer etkenlerin kombinasyonla-rı ile yapılır. Harf ve yazınsal-görsel iletişime ilişkin diğer elemanların hem görsel, fonksiyonel ve sanat-sal düzenlemesi hem de bu ele-manlarla oluşturulan bir tasarım dili, anlayışıdır. Reklam amaçlı her faaliyette; mesajı ikna edici kılan ti-pografi, vazgeçilmez bir unsur ola-rak öne çıkmıştır.

Kapak tasarımı yaparken üzerin-de en fazla çalışılan, en fazla de-neme yapılan kısım kitabın adı, yazarın adı ve yayınevi logosu gibi

unsurların boyutları ve yerleşimle-ridir. Bu uğraş kapaktaki tipogra-fik düzenlemenin mükemmeliyeti içindir. Tipografi tasarımın mate-matiğidir. Estetik yaklaşımda düm-düz olmak değil bekli ama karma-şık da olsa o karmaşadaki düzen önemlidir. Kapak tipografisinde genel olarak yerleşmiş kullanım-lar bulunmakla birlikte, tasarımın sınır tanımamasına paralel olarak bu kullanımlar da olmazsa olmaz kurallar değillerdir. Mesela normal şartlarda font boyutu en büyük olan yazı kitabın adı, daha sonra yazar adıdır. Ancak tercihe göre ya da tasarımcının estetik duyuşuna bağlı olarak tam tersi de olabilir. Yani yazar ismi 25 pt olurken kitap

adı 18 pt olabilir. Ama normal olarak ve nere-deyse standart sayılabi-lecek olan birinci sözünü ettiğimiz genel kulla-nımdır.

Arka kapak tasarlanır-ken kitap açıklaması, ki-taptan bir bölüm ya da kitap hakkında ünlülerin görüşleri vs.nin yazımı ve yazar/şairin fotoğra-fının kullanımı, bunların yerleşimi üzerinde çalış-mak gerekecektir. Arka kapaktaki elemanların minimalize edilerek ça-

32 sanalkurs 15

lışılması, boyutlarının abar-tılmaması esastır. Renkle-rinin de ön kapak kadar dikkat çekici olması şart de-ğildir.

Tipografi çalışırken den-ge kavramı zihinde sürekli gezinmelidir. Kapağın bir tarafına her şeyi yığarak bir güzellik ve kışkırtıcı bir kompozisyon oluşturmak neredeyse imkânsızdır. Bu denge, yazıların yerleşimi ile sağlanabileceği gibi renk ve görsellerin yerleşimiyle de elde edilebilir.

Kapak DüzeniDüzenleme aşamasına kullanı-

lacak fotoğraf, illüstrasyon ve çi-zimlerin düzenlemesi yapıldıktan sonra başlanmalıdır. Fotoğrafların temizlenecek kısımları varsa temiz-lenmeli, filtrelenmeleri düşünülü-yorsa gereken filtreler uygulanmalı hasılı, fotoğraf ve diğer elemanlar kullanıma hazır hale getirilmelidir.

Düzen, kapakta kullanılacak tüm bileşenlerin kapak üzerinde ne-rede olacağıyla ilgilidir. Bu tama-men tasarımcının yeteneğine ve hayal gücüne kalmış bir süreçtir. Bir görsel kapağın orta yerine ko-nur, üzerine kitabın adı, altına da

yazar ismi yazılırsa bu da bir kapak tasarımı olur. Fakat böyle bir tasa-rıma kim para verir orası tartışılır. Bir grafiker herhangi bir insandan farklı bir bakış açısına sahip, sanat-sal ruhu olan bir kişi olmalıdır. Bu-nunla bağlantılı olarak da kapakta kullanılacak görselin ya da yazıla-rın yapılacak düzenlemeyle adeta akraba oldukları hissi uyandırılma-lıdır. Bütün elemanlar yerlerinden memnun olmalı, özgün bir kom-pozisyon oluşturulmaya gayret gösterilmelidir. Eğer böyle olursa kapağın gerçek bir tasarımı olur. Yoksa yukarıda bahsettiğimiz ale-lade tasarımı, bırakın grafiker ya da

33

grafik programlarını herhangi bir kelime-işlemci programında yap-mak sadece birkaç dakika sürer.

Kapak Tasarımında BölümlerKitap ya da dergiler üç boyutlu

nesneler olduğundan tasarımları da bölümlere ayrılarak değerlen-dirilebilir. Bu ayrımı ön, sırt ve arka olarak yapabiliriz.

Ön KapakÖn kapak, kitabın forma olarak

sağ yüzüdür ve kitap ele alındı-ğında ilk incelenen kısmıdır. Nasıl ki insanlar tanışırken ilk intiba son derece önemliyse kitabın da ön kapağı önemlidir. Okur kitabı eline

alır almaz şok etkisi oluşturabilen tasarımlar çokça incelenmelidir.

Sırt

Sırt, formada ön ve arka kapak arasında bulunan ve kapaklara gö-re daha dar olan kısımdır. Sırt ge-nişliği kitabın sayfa sayısıyla doğ-rudan ilgilidir ve kesinlikle çok iyi hesaplanmalıdır.

Genelde okurlar sırt tasarımına kitabı alma aşamasında değil, ki-tabı rafa yerleştirdiklerinde dikkat ederler.

Arka Kapak

Arka kapak formada sol tarafta olan ve ciltleme işlemi sonrası ön kapağa tam paralel duran kısımdır.

34 sanalkurs 15

Arka kapak okurun ön kapaktan sonra baktığı ve içeriği özetlemesi nedeniyle ön kapaktan daha fazla ilgilendiği bölümdür.

Kapak Tasarımında Dikkat Edilmesi Gerekenler

Kapak tasarımında bir takım ha-talara düşmemek için bazı konula-ra özellikle dikkat edilmeldir. Bun-lardan bazıları şunlardır:

Font SeçimiKapak tasarlarken

mümkün mertebe çok klasik fontlar kullanılmamalıdır. Ekran için yapılan tasarımlarda (web tasarım, program-lar vs.) hoş görünen bazı fontlar basılı materyallerde pek de güzel görün-meyebilir.

Kapak MalzemesiKapak malzemesi renklerin bas-

kı sonrası nasıl görüneceğinden tutun da renksiz kalan kısımların nasıl görüneceğine kadar birçok konuda tasarımcı için hayati önem taşır. Siz normal beyaz Bristol için tasarım yaparsınız fakat kapak

kraft kartona basılırsa sizin kırmızı-nız koyu bordo gibi bir renk çıka-caktır. Malzemenin gramajı da ay-rıca önemlidir.

Prova BaskıProva baskı tasarım sonlandığın-

da alınan ve gerçek baskıya geçil-meden önce yapılan inceleme bas-kısıdır. Prova baskı, ekran üzerinde görülemeyen bazı ayrıntıların gö-

rülebilmesi ve ek-ran-kağıt farklılı-ğından meydana çıkan detay de-ğişimleri görmek açısından son de-rece önemlidir ve kesinlikle alınıp dikkatle incelen-melidir.

Renk-Konu BağlantılarıRomantik bir romanda simsiyah

bir fon, bir vampir kitabında bem-beyaz ve ferah bir arka plan uygun olmayacaktır. Bu ayrımı yapmak duygusal ayrım yeteneği yanında renk bilgisi de gerektirir.

Şimdilik bu kadar. Umarım faydalı bir yazı olmuştur. Bir dahaki sayıda buluşup iç tasarı-mı inceleyene dek iyi çalışmalar diliyorum.

Bir görsel, kapağın orta yerine konur, üzerine kitabın adı, altına da

yazar ismi yazılırsa bu da bir kapak tasarımı olur. Fakat böyle bir tasarı-

ma kim para verir orası tartışılır.

35

37

Onur Mert Ateş

Bu derste Illustrator’de en popüler efektlerden ve çok ge-len sorulardan biri olan, bir yazının etrafına birden fazla kontur (stroke) eklemeyi en kolay şekilde nasıl yapabileceği-mizi anlatmaya çalışacağım.

Çok KonturluYazılar Oluşturmak

ILLUSTRATOR CS5

SİRACEDDİN ELWeb Tasarımcı

38 sanalkurs 15

Yazımızın etrafına çizgi eklemek çoğu programla mümkün olması-na rağmen, birden fazla çizgi ekle-mek genel olarak hayli sorunlu bir durumdur. Çoğu kez yazının orji-nalitesi bozulur, çizgiler yüzünden hiç hoş bir sonuç elde edemeyiz. Fakat Illustrator’de Appearance paletini kullanarak hem yazının orjinalliğini muhafaza edebilir ve hem de kolayca farklı yazı efektleri elde ederek çoklu çizgileri kolay-ca ekleyebiliriz. Bunun en iyi tarafı ise, elde ettiğimiz sonucu bir stil olarak kaydedip daha sonra kulla-nabilmek tabi ki. İsterseniz hemen başlayalım.

1. Yeni bir RGB döküman oluştu-run.

2. Yazı aracını seçin ve arzu ettiği-niz yazıyı yazın. Arial Black fontuyla 90 pt olarak Digital Arts yazıyorum.

3. Üst menüden Window > Type > Character yolunu tıklayın. Böyle-ce Character paneli açılacak.

4. Bu efekti uygulayabilmemiz için harflerin aralarının çok yakın olmaması gerekiyor. Bu nedenle eğer dilerseniz harf aralarına boş-luk tuşu kullanarak da bu mesafeyi

verebilirsiniz. Ya da Character pale-tindeki harfler arası boşluğu ayar-layabileceğiniz kısma bir değer gi-rebilirsiniz.

5. Şimdi Appearance paletini aça-lım. (Kısa yolu: Shift + F6)

6. Az önce yazdığımız yazıyı seçili hale getirin. Appearance paletinde sağ üst köşeye tıklayarak menüyü açın ve Add New Fill’i tıklayın. (Di-lerseniz paletin sol altındaki sim-geleri de kullanabilirsiniz).

39

7. Appearance paletindeki Fill bölümündeki dolguyu beyaz renk olarak ayarlayın. Rengi beyaz yap-tığınız zaman yazı kaybolmayacak-tır ama göremeyebilirsiniz.

8. Unutmayın, Appearance paleti Layer paletine benzer bir yolla ça-lışır. Aynen layer’larda yaptığınız gibi Appearance paletindeki özel-likleri de aşağı ve yukarı birbirleri-nin üstüne ya da altına sürükleye-bilirsiniz. Biz de o halde şu an üstte olan Stroke özelliğini sürükleyerek Fill’in altına taşıyalım.

9. Şimdi Stroke kısmındaki renk

ayarını siyah olarak belirleyin.

10. Rengi belirledikten sonra he-men yanındaki kısımdan 4 pts ra-kamını girin. Aynı şekilde, Window menüsünden Stroke penceresini görünür hale getirip Stroke değeri olarak 4 pts ayarlayabilirsiniz.

11. Bu adımda ise, yazı seçili iken yine Appearance paletindeki me-nüden bu kez Add New Stroke se-çin.

12. Yeni stroke (kenar çizgisi) ren-gini R: 14, G: 155, B: 125 olarak be-lirleyin ve çizgi kalınlığına 10 pts değerini girin.

40 sanalkurs 15

13. Sonra bu kenar çizgisini Ap-pearance paletinde iken tutup pa-letin en alt kısmında bulunan ve çöp kutusu simgesinin solunda yer alan Duplicate simgesinin üzerine sürükleyip bırakın. Böylelikle aynı çizgi özelliğinden bir kopya oluş-turulacaktır. Veya bu kenar çizgisi özelliği seçili iken o simgeye tık-ladığınızda da aynı sonucu elde edersiniz.

14. En son oluşturduğunuz kenar çizgisini seçin ve rengini siyah ya-pın. Kenar kalınlığını ise 13 pts ola-rak ayarlayın.

15. Efekti uygulama işi bu kadar. Dilediğiniz kadar kenar çizgisini bu yöntemi kullanarak ekleyebilir-siniz, herhangi bir sınır olmadığını rahatlıkla söyleyebiliriz. İşin güzel tarafı yazınızın bu uyguladığınız özelliklerin muhafaza edilerek her zaman düzenlenebilir ve değişti-rilebilir olmasıdır. Bunun dışında, Create Outlines özelliğini kullana-rak (menüden Type > Create Out-lines yolunu da izleyebilir, dilerse-niz yazınızı seçip sağ tıkladığınızda gelen menüden de uygulayabilir-siniz) yazınızı şekillere dönüştüre-rek ve daha serbest düzenlemeler yaparak farklı sonuçlar elde edebi-lirsiniz.

EFEKTİ KAYDETMEK (STIL’E DÖNÜŞTÜRMEK)

Peki bu uyguladığımız efekti sak-layarak, daha hızlı bir şekilde başka çalışmalarımıza uygulama işlemini nasıl yapabiliriz? Herhalde her se-ferinde bu işlemleri tekrar etmek sadece zaman kaybı olur. Şansımız var ki, Illustrator bu noktada da bizlere kolay bir yöntem sunuyor ve bir kaç adımda bu efekti kayde-derek başka zaman da kullanabil-memizi sağlıyor.

41

1. Appearance paletinin sağ üs-tünde içi beyaz küçük bir kare göreceksiniz. Bu kare biraz önce uyguladığımız özellikleri temsil ediyor. Bu kareyi seçili hale getirin.

2. Window > Graphic Styles (Kısa-yolu: Shift + F5) yolunu tıklayarak Graphic Styles panelini açın. Sonra Appearance kısmındaki o beyaz kareyi sürükleyip Graphic Styles paneline bırakın. Şimdi yeni bir grafik stili oluşturmuş oldunuz.

3. İsmini değiştirmek için bu stilin üzerine çift tıklayın ve anlaşılır bir isim verin. Hepsi bu kadar.

42 sanalkurs 15

43

Turhan Algan

45

Ervanur Bürcü

Bu dersimizde eğlenceli bir Photoshop efektini sizlerle paylaşmak istiyorum. Hedefimiz elimizdeki uygun bir fotoğrafı Japonların ünlü çizimi manga haline dönüştürmek olacak.

Bir Manga ModeliYapmak

PHOTOSHOP

ABDULLAH TEKİNYazılım Uzmanı

46 sanalkurs 15

Bunun için ilk olarak bir fotoğraf temin ediyoruz. Ben aşağıdaki fo-toğrafı tercih ettim.

Manga’da bilindiği gibi en önemli olan şey iri gözler, ince burun, ince ağız ve sivri çenedir.

Biz bunları aşama aşama yapaca-ğız. Photoshop’ta kullanacağımız temel araç ise Liquify filtresi.

Bu filtre sayesinde fotoğraf üze-rinde ilginç efektler elde etmeniz mümkün.

İşe başlamadan önce orijinal layer’ın bir kopyasını alıyoruz, adı-na da liquifed adını veriyoruz.

Şimdi ise kopya layer seçili iken Filter -> Liquify tıklayarak işlemi-mize ilk olarak sahneden başlıyo-ruz. İlk başlayacağımız yer gözler:

GözlerBunun için Liquify panelinde sol

üstteki butonlardan “Bloat Tool” u seçip gözleri yeteri kadar büyüt-mek olacaktır. Sağ taraftaki değer-lerden fırça büyüklüğünü de göz önünde bulundurup aşağıda be-nim elde ettiğim sonuca ulaşınca-ya kadar denemeler yapmanızda fayda var.

47

AğızDersimizin en hassas kısmı bura-

sı. Çünkü manga çizimlerde ağız ince ve kısadır. Bu işlemi yapacağı-mız araç ise yine sol taraftaki “Puc-ker Tool”.

Aracı seçili hale getirdikten son-ra sağ taraftan Brush Density: 50, Brush Rate:30 değerlerini girme-nizi tavsiye ediyorum. Bu sayede daha hassas bir deneme yapabili-yoruz.

Ağız kısmında işin püf noktası Pucker Tool seçili iken dudağın sol başlangıç kısmından fareyi tutup ortaya doğru çekmeniz, sağ taraf-tan da yine ortaya doğru çekme-nizdir. 2-3 kez yaptıktan sonra Puc-ker Tool kullanımı hakkında zaten fikir edineceksiniz. Yanlış işlem mi yaptınız? Hiç telaş yapmayın geri alma aracımız da mevcut. Sağ pa-nelde “Reconstruct” butonu her yaptığınız işlemi geri alır.

Ben aşağıdaki sonuca ulaştım, in-ce ve kısa bir ağız… Tam istediği-miz gibi.

48 sanalkurs 15

BurunBurnu da inceltmemiz gerekli.

Bunun için ise yine sol panelde-ki araçlardan ilkini yani “Forward Warp Tool” u seçiyoruz. Sağ taraf-tan uygun büyüklükte fırça seçip (ben 345 tercih ediyorum) buruna sağdan soldan ve birazda aşağı-dan darbeler yaparak küçültüyo-ruz. Sonuç aşağıda:

ÇeneÇenenin ince ve biraz uzun olma-

sı gerekli. Bu yapmak için yine aynı araca yani “Forward Warp Tool” u seçip uygun fırça büyüklüğü ile ge-rekirse yanaklardan da hafif sağ sol kroşe vuruşlar yapıp, çeneyi azıcık aşağıya uzatıp şu sonucu elde edi-yoruz. Evvett şimdilik istediğimiz sonucu elde ettik, “OK” butonuna basıp ana panelimize dönüyoruz.

Bundan sonrası ise renk rötuşları olacaktır.

Renk Ayarlamaları Bunun için işlem yaptığımız la-

yer seçili iken aşağıda gördüğünüz “Layer Adjustment” özelliğini kulla-narak “Channel Mixer” ı tıklıyoruz. Çıkan panelden en üstten “Black & White with Red (RGB)” seçiyoruz. Oluşturduğumuz bu layer’ın opa-city değerini ise %45 olarak belir-liyoruz.

49

Diğer adım aynen yukarıda yaptı-ğımız gibi “Color Balance” oluştur-mak. Bunun ayarlarında ise Tone: Midtones, değerleri ise +2, 0 ve -15 olarak yapıyoruz.

Son olarak gözlerdeki gölge ve ışığı daha belirgin yapmak isti-yorum. Bunun için yeni bir layer oluşturun. Edit -> Fill menüsün-den çıkan panelde Use: 50% Gray seçip OK deyin.Oluşturduğunuz bu layer’ın özelliğini Overlay ola-rak yapın. Sol taraftaki araçlardan “Burn ve Dodge Tool” ile gölge ve ışık ayarlarımızı yapacağız. İlk ön-ce Burn Tool’ u (Kısayol: O tuşu) aktif hale getirin. Aşağıda resimde belirtilen kısımları boyayın. Aynı şekilde Dodge Tool seçerek yine aşağıdaki klavuza bakarak parlatı-lacak bölgeleri boyayın.

Son olarak biraz daha değişimler yaptım.

Örneğin göz, dudak ve burun ha-ricindeki bölgeler Surface Blur filt-resini uygulayarak çizgi film hissi-yatını verdim.

Saçlara Hue/Saturation (doymuş-luk) oranını artırarak ön plana çık-masını sağladım.

Hepsi bu. İşte sonuç:

50 sanalkurs 15

53

Cansu Aras

ACTIONSCRIPT 3.0

HAKAN ÇAMOĞLUWeb Tasarımcı

Hemen hemen her uygulamada kullanacağımız koşullu de-yimler programlamada çok önemli bir yere sahiptir. Belirli bir şarta bağlı bir örnek geliştireceğimiz zaman koşullu de-yimler yardımımıza koşar.

ActionScript 3.0 ileKlavye Kontrolü

54 sanalkurs 15

Koşullu DeyimlerHemen hemen her uygulamada

kullanacağımız koşullu deyimler programlamada çok önemli bir yere sahiptir. Belirli bir şarta bağlı bir örnek geliştireceğimiz zaman koşullu deyimler yardımımıza ko-şar. Eğer bu böylese bunu yap, yok değilde böyleyse bunu yap, o da değilse şunu yap!.. Bu makalede yapacağımız örnek, başta koşul-lu deyimleri ve sonrasında klavye olaylarını içermektedir.

Koşullu Deyimleri AnlamakKoşullu deyimler bir koşulun ge-

çekleşip gerçekleşmediğini kabul eder. Gerçek hayattan bununla ilgi-li örnek vermek gerekise 18 yaşını doldurmadan ehliyet alamazsınız.

Burada arkada çalışan sorgu-ya bakarsak eğer başvuranın yaşı 18’den büyükse ehliyet alabilir. Ac-tionscript ile bunun karşılığı ise;

if(basvuranin_yasi > 18){// ehliyet alabilir.}

Burada yazım şeklinden bakar-sak,

eğer bu olursa (koşul){

bunu yap;}

Peki ya 18’den büyük değilse ne olacak? 18’den büyük değilse ehli-yet alamaz... Burada arkada çalışan sorgu ise 18’den büyük değilse eh-liyet alamaz.

Actionscript’e bunun karşılığını da eklersek;

if(basvuranin_yasi > 18){//ehliyet alabilir.}else{//ehliyet alamaz.}

Diğer bir konuda birden fazla ce-vap gelebilecek durumlara yanıt verebilmektir.

Örneğin çalışanın pozisyonu işçi ise 500 YTL, şef ise 1000 YTL, mü-dür ise 2000 YTL olacaktır.

Bu sorgunun actionscript karşılı-ğı ise;

if(pozisyonu == “isci”){//500 YTL maaş}else if(pozisyonu == “sef”){//1000 YTL maaş}else if(pozisyon == “mudur”){//2000 YTL maaş.}

55

Örneğimize Başlayalım

1 Öncelikle bir arkaplan ve üzerinde hareket edecek nesnenizi hazırlayın ve

hareket edecek nesnenize balon_mc örnek ismini verin.

2 Timeline’dan 1.anahtar kareyi seçerek actions panelini açın.

3 İlk olarak hangi olay ol-duğunda kodumuzun devreye gireceğini belir-

leyelim. Burada olayımız klavyeye tıklandığında... Olay dinleyici ve olay olduğunda devreye girecek fonksiyonu yazıyoruz.

stage.addEventListener (KeyboardEvent.KEY_DOWN,

tiklama);function

tiklama(event:KeyboardEvent){//yapılacaklar}

4 Şimdi sıra geldi koşullu deyimlerimizi eklemeye. Eğer klavyeden sol tuşa

basıldıysa balonu sola, sağ tuşa tıklandıysa sağa, yukarı tuşa tık-landığında yukarı, aşağı tuşa basıl-dığında aşağıya hareket ettir.

if(event.keyCode == 37){balon_mc.x -= 2;}else if(event.keyCode == 39){balon_mc.x += 2;}else if(event.keyCode == 38){balon_mc.y -= 2;}else if(event.keyCode == 40){balon_mc.y += 2;}

5 Burada önemli olan ko-nulardan ilki karakter kodları. Hangi tuşa ba-

sıldığını o tuşun karakter kodu ile tespit ederiz. Karakter kodunun tam listesi için helpe bakabilirsiniz. Buradaki örneğimizde kullanaca-ğımız tuşların karakter kodları: sol tuş 37, yukarı tuşu 38, sağ tuş 39 ve aşağı tuşu 40 şeklindedir.

56 sanalkurs 15

6 Diğer bir önemli nokta ise koşulların neler ol-duğudur. if...else koşullu

deyiminde temel olarak kullanabi-leceğiniz koşullar:

>, büyükse<, küçükse==, eşitse!=, eşit değilse

7 Birden fazla koşul kullan-manız gerektiğinde ise;

&&, ve ||, veya devreye girecektir...

Örneğimizi BitirelimÖrneğimizin bitmiş hali aşağıda-

ki gibi olmalıdır.

stage.addEventListener(KeyboardEvent.KEY_DOWN, tiklama);

function tiklama(event:KeyboardEvent)

{if(event.keyCode == 37){balon_mc.x -= 2;}else if(event.keyCode == 39){balon_mc.x += 2;}else if(event.keyCode == 38){balon_mc.y -= 2;}else if(event.keyCode == 40){balon_mc.y += 2;}}Kodunuzu bu şekilde yazdıktan

sonra, Ctrl+Enter ile yaptığınız ör-neği test edin.

Hepinize kolay gelsin...

57

59

Beyhan Bayhan

Bu dersimizde Photoshop kullanarak simgelerin üzerine gelince hareket eden farklı bir menü çalışması yapmaya ne dersiniz?

Farklı Bir Menü Çalışması

PHOTOSHOP

M. ALİ YILMAZWeb Tasarımcı

60 sanalkurs 15

Photoshop ile yukarıdaki gibi bir menü oluşturdum. Css kodları ile bu fotoğrafın belirli oranda gözük-mesini ve kaymasını sağlayacağız.

İndex.html normal içeriği<!DOCTYPE html PUBLIC “-//W3C//

DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head><meta http-equiv=”Content-

Type” content=”text/html; charset=iso-8859-9”>

<title>KirliAdam.Com Css/xhtml Php/Mysql</title>

<link href=”stil.css” rel=”stylesheet” type=”text/css” />

</head><body></body></html>

Bu html kosyamızda olması ge-reken standart bir içerik html tag-ları ve bildirimler yer alıyor. Ek ola-rak stil.css dosyamızı import ettik. (kırmızı renk ile seçilen yer ). Di-

ğer html kodlarımızı <body> </body> tagları arasına yazacağız.

<div id=”liste”> <ul><li><a href=”#”

class=”ps”>Photoshop</a></li><li><a href=”#”

class=”dw”>Dreamweaver</a></li>

<li><a href=”#” class=”fl”>Flash</a></li>

</ul></div>

Burada #liste alanını menümü-zü konumlandırmak için kullana-cağız. <ul><li> kodları basit html listeleme kodlarıdır. PS, DW, FL is-mini verdiğim sınıflar(class) ise bu menümüz için resim özelliklerini tanımlayacağımız kodlar…

Stil.css#liste{ width:350px; margin:50px auto;}

Bu özellik ile 350px lik bir geniş-lik belirledik. 50px’lik üstten boş-luk verip sağ ve soldan otomatik olarak eşit boşluk verecektir. Bu da sayfa içerisinde ortalanmasını sağ-layacaktır.

61

Şimdilik görüntü bu şekilde. Şim-di listelemeyi şekillendirelim.

Stil.css#liste ul li{list-style:none;display:block;float:left;}#liste ul li a{display:block;height:53px;width:83px;}

Burada dikkat ederseniz #liste içerisindeki bir elemanı sırası ile ça-ğırıyoruz. #liste ul li a şeklinde…

Firefox’un harika bir eklentisi fire-bug eş zamanlı CSS ve Html deği-şikliğine olanak sağlıyor. Buradan (http://getfirebug.com) edinin.

Resimde gördüğünüz gibi her link 53px’lik yükseklik ve 83px’lik bir genişliğe sahip oldu…

Yukarda belirtmiştim 3 adet class oluşturmuştuk. Şimdi bunların özeliklerini belirleyelim.

62 sanalkurs 15

Stil.css.ps,.dw,.fl{background:url(resimler/bg.png)

no-repeat;}

.ps{background-position:left 22px;}

.ps:hover{background-position:left

bottom;}

.dw{background-position:-86px

22px;}

.dw:hover{background-position:-86px

bottom;}

.fl{background-position:right 22px;}

.fl:hover{background-position:right

bottom;}

Yukarıdaki gibi tüm class ele-manlarına aynı arka plan resmini verdik. Ve hepsinin özelliğine göre konumlandırdık. Hover efektinde de yukarıya doğru gelecek şekilde konum girdik. Bu konumu daha kolay bir şekilde bulmak için yine firefox’un firebug eklentisi imbadı-mıza yetişiyor.

Burada gördüğünüz gibi firebug eklentisinde değer kısmını aşağı yukarı ok tuşları ile değiştiriyorsu-nuz.

Bu konuyu daha iyi anlamak için Fatih Hayrioğlu’nun FireBug yar-dımı ile daha kolay CSS Sprite Uygulamak yazısını http://www.fatihhayrioglu.com/firebug-yardimi-ile-daha-kolay-css-sprite-uygulamak/

adresinden oku-yabilirsiniz…

Hepinize kolay gelsin.

İyi çalışmalar...

63

65

Ayşenur Başaran

Bu sayımızda Tübitak Bilim Çocuk Dergisine yaptığı çizim-lerle öne çıkan ve daha çok çocuklara yönelik yayın yapan farklı mecralarda illüstrasyonlar çizen başarılı bir çizerle kısa bir söyleşi gerçekleştirdik.

Söyleşi: Kübra Akova

66 sanalkurs 15

Kendiniz bir kaç cümle ile ta-nımlamanız gerekseydi, nasıl ifade ederdiniz?Kurşun kalemi, kağıdı, doğayı ve

sessizliği seven bir illüstratörüm.

Öğrencilik yıllarında tasarım alanında çalışmalarını takip etti-ğiniz, etkilendiğiniz isimler oldu mu? O zamanlar internet erişimi

gündelik hayatın bu kadar içinde değildi. Herkes internet kullanı-cısı değildi. O yüzden öğrencilik yıllarımda tasarımcıları daha çok

dergiler, kitaplar ve kataloglar aracılığıyla takip ediyordum. Kü-tüphanede zaman geçirmeyi sevi-yorduk. Özellikle font tasarımına ilgi duyuyordum. İlk aklıma gelen isim ise Emigre.

Grafik tasarım işine başlama ve bu işi sürdürme sürecinde zor-luklarla karşılaştınız mı?Öğrenciyken çalışmaya başladı-

ğımda ajansların güvenilirlikleri ile ilgili sorunlar yaşamıştım. Edindi-ğim tecrübeler sayesinde mezun olduktan sonra sıkıntı çekmedim.

68 sanalkurs 15

Uluslararası bir firmada grafik tasarımcı olarak çalışırken, ajanslarda ol-duğumdan daha güven-de hissettiğimi söyleye-bilirim.

Sizce tasarım dünya-sını gelecekte neler bekliyor?Özgünlüğün daha da

nadir ve değerli olduğu, kopya işlerin daha da arttığı bir gelecek.

Çalışma tarzınızdan, çizim ve tasarım yaparken çalıştığınız or-tamın özelliklerinden bahseder misiniz?

Boş bir masa, içi dolu bir kaç ka-lemlik, bir kaç çizgisiz çizim defte-ri ve dizüstü bilgisayarım bir ara-daysa benim için ideal bir çalışma ortamı oluşmuş demektir. Digital çizimlerimde tablet kullanıyorum,

69

fakat en çok kurşun kalem ile çizim yaparken mutlu oluyorum.

”Grafik ve tasarım” kelimeleri size neler çağrıştırıyor? Bana görsel içerikli bir bulmacayı

çözmeyi ve seçenekleri azaltmayı çağrıştırıyor.

İleriye dönük hedefleriniz ne-ler? Hangi sektör veya sektörler-de çalışmayı düşünüyorsunuz? Şu an illüstrasyon alanında çalı-

şıyorum. İlerde de illüstrasyonun farklı alanlarında çalışmaya devam etmek isterim.

70 sanalkurs 15

Türkiye’nin grafik tasarım açı-sından dünyadaki konumunu nasıl değerlendiriyorsunuz? Kimi işlere baktığınızda tasarım-

cısını da, ülkesini de doğru tahmin

edebilirsiniz. Umarım yakın za-manda özgünlüğe ve fikre verilen değer artar ve Türk tasarım ve tasa-rımcıları dünya çapında tanınırlar.

Son olarak grafik ve tasarım eğitimi almayı planlayan öğren-cilere ne gibi önerilerde bulun-mak istersiniz?Grafik ve tasarım eğitimi alma-

dan önce, ilgili bölümlerle, hoca-larla, öğrencilerle ve grafik tasa-rımcılarla görüşmelerini öneririm. Grafik tasarım, bir çok görsel tasa-rım alanını kapsadığı için mezun olduklarında neler yapabilecekle-rini bilmeleri, doğru karar verme-leri açısından önemlidir.

72 sanalkurs 15

1979 Ankara’da doğdu, Mersin’de büyüdü. Hacettepe Üniversitesi Güzel Sanatlar Fakültesi Grafik Ta-sarım Bölümü 2001 Mezunu. Free-lance çalışıyor.

Bir-Yay Yayınevi için masal, öykü ve ders kitapları çiziyor. Tübitak Bi-lim Çocuk ve Tübitak Meraklı Minik çocuk dergileri için her ay farklı ko-nuları çiziyor. ,

Kağıt ve kalemi, wacom tabletini, klavye kısayollarını, filtre kahve-yi, marzipanlı çikolatayı, kakaolu

keki, yeşil çayı, yemek yapmayı, sofra kurmayı, çöpü atmayı, çiçek-lerle ilglilenmeyi, organik atıkları toprağa gömmeyi, geri dönüşüm atıklarını ayırmayı, mavi gökyüzü-nü, kırmızı ojeyi, Celil Oker kitapla-rını, Can Göknil illustrasyonlarını, Picasso‘nun herşeyini, yürümeyi, Alice in Chains‘i, 90’ları, siyahı, yeşi-li, beyazı, zeytinyağını, meyvelerin tümünü, sabahın erken saatlerini, soğuk kumsalı ve doğayı seviyor.

Evli ve mutlu!

BENGl GENÇER KlMDlR?. . .

73

75

Celal Emre Öz

ASP.NET

YUNUS EMRE KESKİNProgramlamacı

Genellikle yazdığımız uygulamaların hatasız ve sorunsuz çalışmasını isteriz. Ama gerçekte böyle bir şey imkansızdır. Bu nedenle uygulamalarımızı izlemeli ve olabilecek hatalara karşı önlemler almalıyız.

ASP.net UygulamalarındaLoglama

76 sanalkurs 15

Bu önlemlerden birkaçı özel ha-ta sayfaları, hata feedbacklerinin alınması ve loglama sistemi ola-rak düşünülebilir. Ben bu yazımda ASP.net uygulamalarında Logla-ma işlemini kısaca incelemeye ça-lışacağım.

Asp.net uygulamalarında ha-ta yönetimini sağlayabilmek için çeşitli düzeylerde loglama yapa-biliriz. Sayfa düzeyinde, class dü-zeyinde, .dll düzeyinde. Her dü-zeyde yapacağımız loglama farklı olabilir. Örneğin sayfa düzeyinde-ki hatalar için EventLog’ları kul-lanabilir, sınıf yapıları için kendi veritabanımızda oluşturduğumuz tabloyu veya bir text dosyasını kullanabiliriz.

Şimdi sayfa düzeyindeki olası hataları izlemek için bir class ya-zalım. Bu işlem için System.Diag-nostics isim alanını yazacağımız class’a ekleyelim.

internal sealed class LogingUtil { public static void

logMessage(string errortext) { if (message == null) message = string.Empty; //Bu kısımda kaynak isminin olup

olmadığını control ediyoruz.Eğer yoksa oluşturuyoruz.

if (!EventLog.SourceExists(“Source-Name”))

EventLog.CreateEventSource(“Source-Name”, “Log-Name”);

EventLog mylog = new EventLog();

mylog.Source = “VirtualStore”;

message = Environment.NewLine

+ DateTime.Now.ToString()

+ Environment.NewLine + errortext + Environment.NewLine; // Eventlogumuzu yazı-

yoruz. EventLogEntryType kıs-mını değiştirerek farklı loglar tutabiliriz.

mylog.WriteEntry (mes-sage, EventLogEntryType.Error);

} }

Kodlarımız tamam. Bu class’da bulunan logMessage methodu-nu sayfalarımızdaki try-catch blo-gunda kullanabilirsiniz.

İsterseniz EventLogEntryType’ini değiştirerek gerekli yerlerde bilgi log’ları da tutabilirsiniz. Başka bir yazıda görüşmek ümidiyle...

77

79

Mehmet Aksu

ASP.NET

YUNUS ÖZENProgramlamacı

Yaklaşık 4 yıldır gelişmesi süren ASP.Net MVC Framework, geçtiğimiz ay 3. sürümü ile sizlerin kullanımına sunuldu.

ASP.Net MVC Framework’un yeterince olgunlaştığını düşü-nüyorum. Pek çok gerçek dünya uygulaması görebilirsiniz. Para vererek üye olunan Expert Exchange gibi, sitelere açık ve ücretsiz alternatif olarak geliştirilen ve günümüzde yazı-lım geliştirenler için Google diyebileceğimiz Stack Overflow sitesi Asp.net MVC üzerinde çalışıyor.

ASP.net MVC3 SürümüneGenel Bakış

80 sanalkurs 15

ASP.Net MVC yapısını ilk defa gö-rüyorsanız ve daha geniş incele-mek isterseniz isterseniz Sanalkurs.net üzerinde bulabileceğiniz Bo-ğaziçi Üniversitesi’nde gerçekleşti-rilen Sanalkurs Bilgi Patlamaları – 1 etkinliğinde yaptığım sunumun vi-deolarını izlemenizi öneririm.

Ayrıca http://goo.gl/DQ8AW adre-sinde de bir fundamentals yazısı yazmıştım. Okumanızda fayda var.

3. sürüm, Razor View Engine baş-ta olmak üzere pek çok yenilikle geldi. Şimdi isterseniz, MVC 3 ile geliştirme yapmak için gerekli olan araçları öğrenip geliştirme ortamı-mızı hazırlayalım.

MVC Framowork’u bizim için çe-kici yapan şeylerden bir tanesi de Codeplex üzerinde açık kaynaklı olarak geliştiriliyor ve dağıtılıyor olması. Açık kaynak geliştirme geçmişi olan bir ekip tarafından geliştiriliyor.

Geliştirilmesi açık kaynaklı olarak devam eden ASP.Net MVC 3 ile ge-liştirme yapmak için de ücretsiz al-ternatiflere sahipsiniz.

Visual Studio 2010 ya da ücretsiz indirilebilen Visual Web Developer Express 2010 gerekiyor.

ASP.Net MVC 2 ile geliştirme yap-mak için DotNet Framewrok 3.5 yeterli iken MVC 3 için Framewrok

4.0 şart. Önceki framework sürü-mülerinde çalışmıyor.

Veritabanı işlemleriniz için SQL Server 2005, 2008 gibi veritabanı sistemlerine ücretsiz alternatif ola-rak SQL Server Express Edition kul-lanılabiliyor.

Geliştirme araçlarımız hazırsa başlayabiliriz.

Visual Studio > File > New Project penceresini açtığımızda listede MVC 3’ü de göreceksiniz.

Hem boş proje şablonu hem de bazı sık kullanlan bileşenleri barın-dıran proje şablonu ile başlayabi-lirsiniz.

View Engine seçeneklerinin lsi-telendiğini görüyorsunuz. Artık

81

default seçenek Razor. İsterseniz ASPX Web Page de seçilebiliyor.

Boş olmayan proje şablonunu se-çerseniz ve View Engine seçeneği-ni Razor olarak bırakırsanız önceki sürümlerden Default ve About Vi-ew’lerini, Home ve Account Cont-roller’lerini gene göreceksiniz.

İlk gözünüze çarpan yenilik ise ViewData’nın artık ViewBag olma-sı.

ViewData[“Message”] = “Welcome to ASP.NET MVC!”;

ViewBag.Message = “Welcome to ASP.NET MVC!”;

MVC Framework gelişim süre-cine baktığınızda intellisense ile erişmediğimiz, strongly typed (elle yazdığımız) olan herşeyin bir son-raki sürümde azaldığınız görmek sürpriz değil. Ne kadar strongly typed varsa, o kadar problem çı-karma ihtimali var.

Yukarıda kısaca değindiğimiz Ra-zor View Engine, Solution Explorer penceresini açınca karşımıza geli-yor. Artık View’lerimiz .aspx dehil, .cshtml olmuş. Uzantıkdaki cs’nin C# anlamına geldiğini anlamışsı-nızdır. Visual Basic ile geliştirmek isterseniz de vbhtml olacak.

MasterPage yerini _Layout.cshtml sayfasına bırakmış. İşlevleri aynı. MasterPage yerine Layout te-rimine alışsak fena olmaz.

82 sanalkurs 15

Her View başında Layout seçim kodu yazılmasın diye de _ViewS-tart.cshtml var. Orda belirtiyorsu-nuz. Artık View’ler daha sade.

@{ Layout = “~/Views/Shared/_

Layout.cshtml”;}

MVC geliştirilirken dikkat edilen DRY pensibi burada da karşımızda. Don’t repeat yourself.

Razor View Engine daha kolay ya-zılıyor, zaman kazandırıyor, öğren-mesi kolay ve daha az karmaşık.

Razor yeni bir dil değil. C# ve Vi-sual Basic ile kod yazmaya devam edeceksiniz. CopePlex üzerinde kodları ile birlikte büyük bir tutori-al pdf eşliğinde dağıtılan MVC Mu-sicStore uygulamasından albüm-lerin listelendiği sayfanın kodunu aşağıda görüyorsunuz. <% %> işa-retleri yerine sadece @ işareti geli-yor ifadenin başına. Foreach dön-güsü gibi kod bloklarının nerede

biteceğini de parantez takibi ya-parak kendisi anlıyor. Her program kodu için <% %> kullanmanıza ge-rek kalmıyor.

Razor View Engine detaylarına bu yazıda çok fazla değinmek istemi-yorum. O başka bir yazının konusu olacak. Yazıyı beklemek istemezse-niz Sanalkurs Bilgi Patlamaları – 3 Etkinliğinde yaptığım sunumun vi-deolarını sanalkurs.net üzerinden izleyebilirsiniz.

Razor View Engine duyulunca en çok heyecan duyacağımız şey her-hangi bir webserver ya da asp.net runtime gerekmeksizin unit test yapılabilmesi. TDD (Test Güdümlü Geliştirme) ile geliştirme yapanla-rın seveceği bir gelişme.

ASP.Net MVC 3 ile gelen yenilikle-ri konu başlıkları ile listeyelim:

83

• Razor View Engine

• Multi View Engine

• Dependency Injection

• Dynamic View ve ViewModel

• Validation Yenilikleri

• Session Yönetimi

• Global Action Filters özelliği

• JavaScript ve AJAX Yenilikleri

Bu başlıkların hepsi de heyecan verici yenilikler. AJAX kolaylıkları her sürümde artıyor. Jquey, asp.net mvc ile bütünleşmeye devam ediyor.

Bliyorsunuz, ASP.Net MVC’yi oluş-turan her bileşen alternatfileri ile değiştirilebiliyor. Default sunulan özelliklere mecbur değilsiniz. De-ğiştirip yerine başka bir alternatifi takmak da oldukça kolay. Bu tarz bileşen yükleme işlemleri için ASP.

Net MVC 3 ile paralelde duyuru-lan Nuget Paket Yöneticisi install/uninstall gibi bir kolaylık sağlıyor.

Henüz ASP.Net MVC ile geliştirme yapmayanların başlamaları için bir çok kolaylıktan bahsettik. 4 yıldır geliştiriliyor, yeterince olgunlaştı. Ayrıca diğer web geliştirme alter-natiflerine göre daha fazla esneklik ve özgürlük sağladığını düşünüyo-rum.

MVC 3’e geçmekte tereddüt edenler, MVC 2 ile geliştirme yap-maya devam edenler olabilir. Ra-zor ViweEngine’nin henüz büyük bir gerçek dünya uygulamasında kullanılmak için biraz daha zama-na ihtiyacı var gibi. Küçük projele-rinizde kullanıp deneyebilirsiniz. Biz denedik. Örnek vermek gere-kirse, Miks Gelişim (www.miksge-lisim.com) web sitesi şu anda ASP.Net MVC 3 ve Razor View Engine

üzerinde çalışıyor.

Bu yazıda sizle-rin Hello World yazabilmeniz için gerekli temel kav-ramlara değindik. Yukarıda ana baş-lıklar halinde liste-lediğimiz ASP.Net MVC 3 özellikleri hakkında yazmaya devam edeceğiz.

84 sanalkurs 15

85

Üsame Çorman

87

Fatih Bayrakdar

CSS

İLKNUR AKPINARProgramlamacı

Cascading Style Sheets (CSS) HTML ‘deki bazı problemleri halletmek için ortaya çıkmış olsa da, web sayfası içeriği ve web sayfası görünümünü birbirinden ayırmak için oluşturu-lan bir standarttır. CSS, web sitelerinize tasarım tutarlılığı kazandırmaktadır ve istediğiniz kadar sayfa için düzenli bir içerik oluşturabilmemiz kolaylıkla mümkündür.

CSS’ye Giriş

88 sanalkurs 15

CSS yapısı iki ana kısımdan olu-şur:

Seçiciler

Bildirim Bloğu

Özellik

Değer

P (seçici) {color( özellik): red (de-ğer; backgound (özellik): yellow (değer}

Bildirim bloğu süslü parantezle açılır ve kapanır. Bildirimler arasın-da ” ; ” noktalı virgül kullanılır. Özel-lik ve değerler birbirinden ” : ” iki nokta ile ayrılır.

<h1> {font: medium Arial;} Burada ilki fontun boyutunu ikin-cisi ise font ismini gösterir.

<h1> {font: medium/120% Arial;} Burada / işareti seçicinin font boyutunu ve satır yüksekliğini gösterir.

Birden fazla html elementine de atama yapabiliriz. Bunun için grup-lamamız lazım;

p,h3{font-family:Verdana;}

SINIF SEÇİCİLERİ (CLASS)Sayfada birçok elemente atanır.

.class (başında nokta ile) olarak belirlemeliyiz.

Örneğin iki adet paragraf tanım-laması yapacağız bunun için;

p.sagadayalı{text-align:right}p.ortala{text-align:center}

Şimdi bunu sayfamıza uygula-mak için;

<p class=”sagadaya”>Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız.</p>

<p class=”ortala”>Yukarıdaki bil-giyi dikkatlice okumalısınız</p>

İstediğimiz sayıda html etiketine uygulamak için ise;

.ortala{text-align:center}

Şimdi sayfamıza uygulayalım;

<span class=”ortala”> yazı 1 </span>

<p class=”ortala”>yazı 2</p>

ID SEÇİCİLERİID seçicileri sadece bir elemente

atanır ve başında # işaretini kullan-mak zorundayız.

#mavi{background:blue;}

12

a

b

89

#kirmizi{background:red;}<p id=”mavi”>Arka fonu

mavidir</p><p id=”kirmizi”> Arka fonu

kırmızıdır</p>

Sözde sınıf ve elementler; XHTML’de erişemediğimiz element ve sınırlara erişmek içindir.

Pseudo sınıfı: Elementi bir sınıfı farklı sınıflara

böler.

Örneğin;

a:visited{color:red;}

Pseudo elementi : bir elementi alt kısımlara böler.

Örneğin;

p:fırst-line{font- weight : bold;}

1. Link Pseduo Sınıfı: Yalnızca linklere uygulanır.

link – Ziyaret edilmemiş sayfanın linkine stil tanımlaması yapmak için kullanılır.

Visited - henüz ziyaret edilmeyen sayfaya uygulanır.

Örneğin;

a{ color:blue;}a:visited { color:red;}

2. Dinamik Pseduo Sınıfı: Focus: odaklanan elemente stil

tanımlaması yapmak içindir.Active: aktif olana stil tanımlaması

yapmak içindir.Hover: mouse’nin fare üstüne ge-

lince uygulanacak işlem.first:child: Belirtilen elementin ilk

Çocuk Elementine stil atamak için kullanılır.

Lang pseudo: Lang pseudo sınıfı içerikteki bir elemente farklı bir dil de yazmamızı sağlar

Pseudo Sınıflarını Birleştirmek: Zi-yaret edilen linkleri farklı renkte atamak için kullanılır.

Pseudo Element Seçicilerifirst-letter (ilk harf): Bir blok-level

elementin ilk harfine stil tanıml-ması yapmak için kullanılır

first-line (ilk satır) : Bir metnin ilk elementine stil atamak için kulla-nılır. Örneğin paragraflarınızın ilk satırlarını renklendirmek isitiyor-sunuz.

before ve after elementleri: Bir ele-mentin öncesine ve sonrasına bir içerik veya özellik eklemek için kul-lanılır.

90 sanalkurs 15

CSS EKLEMEK1. Kod içine;

<div style=”color:red”> yazı </div>2. Style Elementi Kullanarak;

<head> içine <style> kodu ekle-yerek oluşturabiliriz.

3. Harici stil şablonu kullanarak CSS dosyamızı dışarıdan çağırabi-liriz. Yeni dosya açıp içine gerekli kodlar yazıp onu da ornek.css adı ile kaydeder index.html sayfamız-da ise; <link rel=”stylesheet” type= ”text/css” href=”ornek.css” /> şeklin-de çağırırız.

4. Import etmek;

<style type=”text/css”>@import”ornek.css”; şeklinde de

sayfamıza çağırabiliriz.

CSS nesnelerimizi ornek.css adı ile kayıt edip html sayfasında ça-ğırmak istiyoruz;

<link rel=”stylesheet” type=”text/css” href=”örnek.css” /> Bu şekilde çağırdık ve body için-

de uygulamak istiyoruz; div tag-larını kullanmamız daha mantıklı olacaktır. Bunun için;

<div class=”baslık1”>aaaaaaa baslık 1</div><div class=”baslık2”>bbbbbbaslık 2

</div>kısacası kolay bir şekilde css oluş-

turmuş olduk.

CSS ÖZELLİKLERİZemin (Background) Özellikleribackground-color: Zemine renk

atamak için.

background-ımage: Zemine resim eklemek için.

background-repeat: background-image ile zemine eklenen resmin tekrarı (repeat | repeat-x | repeat-y | no-repeat) değerleri alır.

background-attachment: Özelliği zemine eklenen resmin sayfa ile scroll etmesini veya sayfanın zemi-nin de çakılı kalmasını sağlar (scroll | fixed) değerlerini alır.

background-position: Özelliği background-image ile belirlenen resmin başlangıç noktasını belirler.

Yatay değerler için: left, center, right.

Dikey değerler için: Top, center, bottom.

FONT ÖZELLİKLERİcolor: Metin rengi içindir.

family: Metinlerin kullanılacağı font ailesini belirlemek için kulla-nılır.

size: Boyutunu belirtir.

weight: Fontun kalınlık incelik du-

91

rumunu belirtir.

style: Kalın ya da ince olacağını belirtir.

variant: Küçük ya da büyük olaca-ğını belirtir.

LİSTE ÖZELLİKLERİlist style type: Liste özelliklerinin

tipini gösterir. disc | circle | square | decimal | lower-roman

list style image: List style işaretinin yerine şekil koymak.

list style position: List item işaret-lerin metinin içinden (inside) veya soldan dışında (outside) mı olaca-ğını belirler.

white-space: Özelliği elemetlerin boşluklarının nasıl işlem göreceği-ni belirler. Değer alır.

normal: Birden fazla boşluğu tek boşluk gibi sayar.

pre: birden fazla boşluğu birleş-tirmez.

nowrap: <br> etiketi hariç alt satı-ra geçişe izin vermez.

display özelliği elemetlere aşağıda-ki dört değerden birini atamak için kullanılır:

block: Elementden önce ve sonra bir satır bırakır.

inline : Elementden önce ve sonra bir satır bırakmaz.

nowrap : Block gibidir tek fark list-item işareti eklemesidir.

none: Element görüntülenmez. Elementi gizler. Bir çok javascript uygulmasında kullanılan bir özel-liktir.

KENARLIK ÖZELLİKLERİborder style: Kenarlık sitilini belir-

lemek içindir. dotted (noktalı), do-uble (çift) nokta özelliğidir.

border-top-style, border-right-style, border-bottom-style, border-left-style, border-style özelliğinin her kenara ayrı ayrı atamasını ya-pabilmek için kullanılır.

border-width: İlk olarak stili belir-ledikten sonra kenarlık kalınlığını belirlemek için border-width de-ğeri kullanılır. border-top-width, border-right-width, border-bottom-width, border-left-width, border-width özelliğinin her kena-ra ayrı ayrı atamasını yapabilmek için kullanılır.

border-color: Kenarlık rengini belirler. border-top-color, border-right-color, border-bottom-color, border-left-color.

Bu yazımızda sizlere CSS ile ilgili bazı temel bilgileri aktarmaya ça-lıştım. Sonraki sayıda başka bir ko-nu ile buluşmak üzere...

92 sanalkurs 15

93

Onur Mert Ateş

95

Metin Kabaca

PÜF NOKTASI

BİLAL AKÇAYYazılım Danışmanı

96 sanalkurs 15

İngilizce’de Elevator Pitch, Elevator Speech ya da Elevator Pre-sentation diye bilinen, Türkçe’ye ise Asansör Tanıtım Konuş-ması ya da Asansör Sunumu diye çevrilebilecek bir tabir var. Daha çok girişimci insanların yatırımcıların ilgisini çekebilmek için fikrini kısa sürede anlatabilmesi anlamına geliyor.

Elevator Pitchya da 30 Saniyede Ne Anlatabilirsin?

- Merhaba Oğuz Bey, konuşma-nız çok güzeldi.

- Teşekkür ederim.

- Adım Nadir Karman. Bilgisayar mühendisliği öğrencisiyim. Sizi ve şirketinizin başarılarını hep takip ediyorum.

- Teşekkürler. Ama şimdi gitmem lazım. Bir toplantıya yetişeceğim.

- Öyle mi? Kusura bakmayın. Ben de sizinle birkaç şey konuşabilir miyim diyecektim.

- Başka bir zaman belki.

- Aslında çok güzel bir fikrim var. Hatta bir proje desem daha doğru.

Dinlemek istersiniz diye düşün-düm.

- Buyrun bu kartvizitim. E-mail adresime fikrinizi yazabilirsiniz. İyi günler.

- Ama yazılı olarak tam anlata-mayabilirim.

- Allah Allah. Peki. Madem öyle, bak şimdi. Şu asansörü çağırıyo-rum. Aşağıya beraber ineceğiz. En alt kata ininceye kadar bana fikrini anlatırsan ne ala. Anlatamazsan...

Diyelim ki, böyle bir teklifle karşılaştınız. Anlatabilir miydiniz?

97

İngilizce’de Elevator Pitch, Elevator Speech ya da Eleva-tor Presentation diye bilinen, Türkçe’ye ise Asansör Tanıtım Konuşması ya da Asansör Sunu-mu diye çevrilebilecek bir tabir var. Daha çok girişimci insanla-rın yatırımcıların ilgisini çeke-bilmek için fikrini kısa sürede anlatabilmek anlamına geliyor. Wikipedia’daki ilgili maddede bu kısa sürenin anlamı 30 sa-niye ya da 150 kelime olarak belirtilmiş.

1. Concise: Az ve öz olmalı.

2. Clear: Herkes tarafından anlaşılır olmalı.

3. Compelling: Çözmeye çalıştığınız problemi iyi açıkla-malı.

4. Credible: Bu problemi çözebileceğiniz konusunda ik-na edici olmalı.

5. Conceptual: Konuyu ge-

nel olarak anlatabilmeli.

6. Concrete: Hayali bir şey olmamalı, uygulanabilir olmalı.

7. Consistent: Tutarlı olmalı.

8. Customized: Farklı şekil-lerde anlatılabilmeli.

9. Conversational: Parag-raf gibi değil, anlaşılabilir kısa cümleler veya soru cevap şek-linde olmalı.

ELEVATOR PITCHNEDİR?

İYİ BİR ASANSÖR KONUŞMASININ 9 ÖZELLİĞİ

98 sanalkurs 15

Bir asansör tanıtım konuş-masında olması istenen üç temel bilgi var:

Fikir (ürün, çözüm,

proje) nedir?

Yatırımcı için faydası

nedir?

Siz (ya da şirketiniz)

kimsiniz?

Bu üç bilgi için fikir ve fay-dayı birleştirip üçüncü olarak daha fazla bilgiye nasıl ulaşı-labilir sorusunun cevabını ekleyenler de var.

Bir nokta daha var: Herhangi bir tanıtımla ilgili olarak kısa sü-rede söyleyebilecek sözünüz var mı?

- Kendini kısaca tanıtır mısın?

- Çalıştığın şirket ne iş yapar?

- Yazdığın program ne işe ya-rar?

- Senin için ... kelimesi ne ifade ediyor?

- ... konusunda fikrinizi alabilir miyim?

Deneyin bakalım, 30 saniyede ne anlatabiliyorsunuz?

BUNLARI KAÇ SANİYEDECEVAPLIYORSUN?

3 TEMEL BİLGİ

1

2

3

99

101

Gözde Çep

Amerika’da başlayarak tüm dünyada yaygınlaşan grup alışve-riş, diğer adıyla fırsat siteleri, ülkemizde de kısa sürede po-püler oldu. Şu an itibariyle sayıları 40’ı geçmiş durumda. Bu siteler yeni bir alışveriş modası haline geldi. Artık çoğumuz günlük olarak bu siteleri kontrol eder hale geldik.

Grup Alışveriş:Günlük Fırsat Siteleri

INTERNET

MUSTAFA TANIŞIRGirişimci

102 sanalkurs 15

Bu alışveriş siteleri aslında yeni bir icat değil. Sadece grup alışve-rişin, internet sektörüne taşınmış hali olarak tanımlanabilir. Kupon ve grup gücünün bir araya getiril-mesiyle oluşturulan grup alışveriş modeli, yerel pazarları hedef ala-rak büyük başarılara ulaştı.

Grup Alışveriş iş modelinde her-kesin karşılıklı fayda sağladığı bir sistem var. İngilizce tabiriyle win-win-win. Müşterilere normal şart-larda elde edemeyeceği indirim-lerle fırsatlar sunarak müşterilerin; işletmeleri yeni müşterilerle tanış-tırarak işletmelerin; ve buna aracı olan fırsat sitelerinin ge-lir kazanmasını sağ-layan bir sistem.

Bu sitelerin yayın-landığı ilk zaman-larda bir fırsatın ger-çekleşebilmesi için

belirli bir sayıda satın alınma şartı vardı. Bu yüzden bir fırsatın ger-çekleşmesini isteyen kullanıcılar, bu sitelerde yer alan fırsatları Fa-cebook, Twitter gibi sosyal ağlar-da paylaşarak, hem arkadaşlarının büyük indirimlerden yararlanma-sını sağlıyor, hem de fırsatın ger-çekleşmesine katkıda bulunuyor-lardı. Artık çoğu fırsat sitesi fırsatın gerçekleşmesi için belirli bir sayı-da satın alınması şartını kaldırdı. Böylece kullanıcıların, fırsatın ger-çekleşip gerçekleşmemesi gibi bir endişeleri kalmadı. Ama yine de sevdiklerinin de büyük indirimler-den yararlanmasını isteyenler, fır-satları sosyal ağlarda paylaşmaya devam edecektir.

Burada özellikle belli bir gruba veya belli bir ürüne yoğunlaşmış fırsat sitelerini ta-

103

nıtacağım. Siz de aşağıdaki siteler-den kendi ilgi alanlarınıza uygun olanlara üye olarak fırsatlardan ve gelişmelerden haberdar olabilirsi-niz.

KADINCAFIRSATLAR.COMSadece kadınlara özel bir fırsat

sitesi olan Kadıncafırsatlar.com’da güzellik, masaj, spor ve kuaför sa-lonlarında büyük indirimler sizleri bekliyor. Bunların dışında yemek, dans, ve dil kurslarında indirimli fi-yatlarla kendinizi geliştirebilecek-

siniz. Ayrıca bu sitede ürün bazın-da da fırsatlar yer alacak. Kozmetik, giyim ve takı sektöründe günlük fırsatlar bulabileceksiniz. Kısacası kadınlarla ilgili aklınıza gelebilecek her türlü fırsatları bulabileceksiniz.Site yakında yayına girmeye hazır-lanıyor.

ERKEKLERİÇİNFIRSATLAR.COMSadece erkeklere özel fırsat site-

si olan Erkekleriçinfırsatlar.com ile halı sahalarında indirimli maçlar yapabilecek, aynı zamanda takım

104 sanalkurs 15

elbise, gözlük, kemer gibi alışveriş fırsatları bulabileceksiniz. Erkekle-re özgü değişik fırsatlar sizleri bek-liyor olacak. Bu site de Kadıncafır-satlar gibi yakında yayına girmeyi planlıyor.

OTOPON.COMOtopon, otomobilinizle alakalı

her türlü ihtiyaçlarınızı fırsat ku-ponları ile yakalamanızı sağlıyor. Otopon.com’da servis, bakım, las-tik hizmetleri, detaylı temizlik hiz-metleri, otomobil kiralama hizmet-leri, sürücülük eğitimleri, otopark hizmetleri, şoför hizmetleri, trans-fer hizmetleri, yol yardım hizmetle-ri ve dahası hayır diyemeyeceğiniz avantajlarla sunuluyor.

YİYOMİÇİYOM.COMBu fırsat sitesi sadece yeme ve

içme sektörününde fırsatlar sunu-yor. Şehrinizdeki restorant, cafe ve pastanelerden büyük indirimlerle

faydalanıp yeni tatlarla tanışabilir-siniz. Şehrin en gözde mekanında güzel bir kahvaltı yapabilir, akşam muhteşem deniz manzaralı bir ba-lık restorantında güzel bir akşam yemeği keyfi sürebilirsiniz.

PİRİVETA.COMPiriveta lüks tatil fırsatlarını ula-

şılabilir bir ücretle sunan bir fırsat sitesi. Yurt içi ve yurt dışı otellerde uygun fiyatlarla konaklayabilir, in-dirimli tatil keyfi yaşayabilirsiniz. Tatil deyince akla Piriveta.com ge-lecek.

105

FİRMANYA.COMFirmanya sadece firmalara özel

fırsatlar sunuyor. Şirketlerin ihti-yacı olan fırsatları uygun fiyatlarla sunarak şirketlerin işlerini geliştir-mesine yardımcı oluyor. Ayrıca her türlü ofis ihtiyaçlarınızı Firmanya.com ile indirimli bir şekilde karşıla-yabilirsiniz.

GRUP.INKişiye özel teknolojik fırsatlar su-

nan bir fırsat sitesi. Netbook, lap-top, televizyon gibi ürünleri büyük indirimlerle alabilirsiniz. Fakat bu sitede farklı kampanya tipleri bu-

lunuyor. Örneğin bir fırsatı satın alabilmeniz için en az üç arkadaşı-nızı davet etmeniz ve üye olmasını sağlamanız gerekiyor. Teknolojiyi-den indirimli yararlanmak isteyen-ler Grup.in’i takip edebilir.

ÖĞRENCİFIRSATI.COMOgrencifirsati.com öğrenciler için

fırsatlar sunacak bir grup alışveriş sitesi. Öğrenciler büyük indirimler-le sinema, tiyatro, cafe, restaurant, eğlence mekanları ve tatil fırsatla-rından büyük indirimlerle faydala-nabilecek. Bu site de yakında yayı-na girmeye hazırlanıyor.

106 sanalkurs 15

107

Ahmet Tanyıldızı

109

Abdullah Tekin

INTERNET

EMİN ERYILMAZBilgisayar Mühendisi

110 sanalkurs 15

Anlamsal (Semantik) Web, World Wide Web’in en önemli gelişmelerinden biri olarak duyuruldu. Bu gelişimin sadece mühendisler tarafından sürdürülmesi imkansız. Konunun sosyal bilimcilerin de anlaşılması ve buna katkıda bulunması gerekiyor.

Web’in Geleceği:Anlamsal Web

Küreselleşmenin etkisi ve tekno-lojinin yaygın kullanımı sayesinde bilgiye olan ihtiyaç artmaktadır. Bilgisayar-insan-işletme birlikteli-ğinin artması, web teknolojilerinin yaygınlaşması, bilgiyi üreten ve tüketen tarafların çoğalması ve ka-rar vermeyi destekleyen süreçlerin karmaşıklığı, bilgiye olan ihtiyacı-sürekli artırmaktadır.

Bilgi yoğun olarak web ortamın-da üretilmekte ve üretilen bilgi-

ye web üzerinden erişilmektedir. İnternet kullanımındaki artış ve dünyanın her yerindeki bilgi üre-ticileri sayesinde, web üzerinde farklı biçim, dil ve içerikte milyon-larca sayfalık doküman varlığını sürdürmekte, insanlar tarafından kullanılmayı beklemektedir. Bu sü-reç bilginin önemini artırırken, ay-nı zamanda bilginin miktarının da artmasına neden olmaktadır.

Web’in yapısal özelliği gereği,

111

web üzerindeki bilgiler insanların anlayabileceği şekilde tasarlanmış ve sunulmuştur. Bilginin anlamının anlaşılması ve bilgiler arasında an-lamsal ilişkilerin kurulmasında bil-gisayarlar doğrudan yer almaz. Bu da üretilen bilgilerin sadece insan-lar tarafından anlamlandırılması anlamına gelmektedir.

Teknolojik olarak mevcut web ortamında sunulan içeriğin bilgi-sayarlar tarafından anlaşılabilir ol-ması zordur ve bu durum yeni bir yaklaşımı zorunlu kılmaktadır.

Bu sorunu dile getiren ve bir çö-züm önerisinde bulunan çalışma, Tim Berners-Lee tarafından 2001 yılında bir vizyon çalışması yapıldı. Buna göre “WWW’in hedeflerinden biri de, sadece insan-insan iletişi-mini düzenlemekle yetinmeyerek, bu sürece makinaların da katıla-bilmeleri ve yardımcı olabilmeleri” fikri üzerine olacaktı. Bu vizyon, Anlamsal Web olarak adlandırılan ve web ortamında bulunan, sade-ce insanlar tarafından anlamlan-dırılan farklı biçimlerdeki milyon-larca bilgi kümesinin bilgisayarlar tarafından işlenerek anlamlandırıl-masını ön görüyor ve en iyi bilgi-ye nasıl erişileceği konusunda ça-lışmaları başlatıyor, gelişecek olan yeni bir araştırma alanının başla-masına neden oluyordu.

Anlamsal Web; bilgi bilimi, en-formatik ve yazılım mühendisliği alanında faaliyet gösteren bilim insanlarının çalışma alanı olduğu kadar, sosyal alanlarda bilgi üre-ten ve tüketen bilim insanlarını da ilgilendirmektedir. Çünkü, bu viz-yonun hayata geçmesi ve faydaya dönüşmesi, ancak ve ancak sosyal bilimler alanında faaliyet gösteren kişilerin de gelişmeler hakkında bilgi sahibi olması ve katılımı ile mümkün olabilecektir.

WORLD WIDE WEBHangi açıdan ölçümleme yapı-

lırsa yapılsın, günümüzde World Wide Web (WWW) çok geniş bir kullanıma sahip. Bu durum insanlık tarihindeki en önemli başarı hika-yelerinden biri olarak karşımıza çı-kıyor. WWW okul çağındaki çocuk-lardan, uluslararası işletmelerin en üst karar merkezindeki kişilere ka-dar herkes tarafından bilgi arama ve paylaşımı için kullanılmaktadır.

Hayatımızı bu kadar çok etkile-yen web’in en önemli karakteristik-leri şöyle ifade edebiliriz:

- Web dağıtık bir ortamdır.

- Web dinamiktir.

- Web çok büyüktür.

- Web herkese açıktır.

112 sanalkurs 15

Günümüzde kullandığımız web, “Web 2.0” olarak adlandırılmakta-dır. Web 1.0’da bilgilerin WWW üze-rinde izlenebilmesini sağlayan ve yaygın olarak kullanılan HTML say-faları el ile oluşturulmaktaydı. Web 2.0’da ise HTML sayfaları aktifleşe-rek, bilgisayarlar tarafından oluştu-ruldu. Web’ten yararlanan pek çok kişi için bu durum yeterli olmakta ve gelinen bu nokta, web’in olgun-luk çağı olarak algılanmaktadır.

Ancak mevcut web teknolojile-rinin bazı önemli eksikliklerinin olduğu ve değiştirilmesi için ge-

rekli koşulların oluştuğunu dü-şüncesinde olan Tim Berners-Lee önderliğindeki araştırmacılar Web 3.0’ın “Bilgili Web” (knowledgeab-le) olacağını ve hedefin de bilginin anlamının anlaşılmasını sağlamak olduğunu belirtiyorlar. Bunun te-melinde web’in yeterli zekaya sa-hip olmadığı düşüncesi yatıyor.

Gerçekten de HTML bilgi göste-rim dili, tasarımı gereği web sayfa-larının insanlar tarafından anlaşıl-ması temelinde geliştirilmiştir. Bir HTML sayfası başlık ve paragraflar-dan oluşurken, sayfanın içine re-

113

sim, ses, film ve animasyon bilgisini de içeren eklemeler yapılabiliyor. Bu durum sayfanın ekranda nasıl görüneceği ile ilgilidir ve web ön-cesi ile karşılaştırıldığında oldukça ileri bir konumdadır.

Ancak günümüzde çok büyük miktarlardaki bilgi, bilginin üretil-me hızı ve bilgiye olan ihtiyaç dü-şünüldüğünde, bilginin ne anlama geldiğinin anlaşılması önemlidir ve bunun insanlar tarafından ya-pılması da gittikçe zorlaşmaktadır. Böylelikle bilgisayarların yüksek iş-lem gücünden yararlanarak, bilgi-lerin yapılandırılacağı, verinin an-lamının kendi içinde barındırılması suretiyle anlam kazanacağı ve veri-

ler arasındaki ilişkilerin de anlam-landırılması ile sorunların aşılacağı düşünülmektedir.

Örneğin, Google, Yahoo veya MSN arama motorları kullanılarak web üzerinde yapılan bir sorgula-mada, aranılan bilgi ayrı anlamları olan milyonlarca web sayfası ile eşleşebiliyor. Elde edilen arama so-nuçlarından hangilerinin kullanıcı-nın ihtiyacını karşıladığı tam olarak anlaşılmıyor. Eksik tanımlanan ara-ma kriterleri ile yapılan sorgulama-larda ise bilgiye erişilmiyor ve daha da önemlisi neyin bulunamadığı da bilinemiyor. Sorgulama fazla arama kriterleri ile daraltıldığında ise kişinin karşısına herhangi bir

114 sanalkurs 15

bilgi kümesi gelmiyor. Ayrıca bulu-nan bilgilerin ne kadar doğru oldu-ğu da ayrı bir sorun tabi ki...

Bir başka zayıflık ise karmaşık bir web işleminde, örneğin online alışveriş sırasında ortaya çıkmak-tadır. Web’te satın alma işini yapan bir kişi, alacağı ürünün kodunu ve fiyatını, ürünün resmi ile birlikte algılayabilmekte, deneyimine ve bilgisine dayanarak birden fazla bilgiyi doğallıkla eşleştirebilmekte ve bu bilgilerden hızla yeni bilgi-ler çıkarabilmekte iken, bilgisayar benzer eşleştirmeyi ve çıkarsamayı yapamamaktadır. Bunun nedeni, HTML açısından bunların metin ve

resimlerden oluşan dosyalar olma-sı ve birbirleri ile anlamsal bağları-nın bulunmamasıdır.

Web üzerindeki bu büyük bilgi alanınına daha hassas erişimlerin yapılabilmesi için, bilginin olası çıkarsamalara uygun şekilde yer-leştirilmesi, çıkarsamaların bilgi-sayarlar tarafından yapılması ve bunların insanlar tarafından da okunabilmesi gerekmektedir. İhti-yacı cevaplayacak uzmanın bilgi-sayarlar olması, web’ten anlamsal bilgileri çıkarmak suretiyle, web üzerindeki büyük miktardaki veriy-le anlamlı ilişkilerin kurulması tek yol olarak sunulmaktadır.

115

3. ANLAMSAL WEBTüm bu ihtiyaçlar web’in yeniden

tasarlanmasını gerekli kılarken, web’in ileriye yönelik konumlandı-rılması Tim Berners-Lee tarafından iki ana vizyon cümlesiyle şekillen-dirilmiştir; “İlk olarak web, daha fazla birlikteliğin sağlanacağı bir ortam haline gelecektir, ikinci ola-rak da işlemlerin bilgisayarlar ta-rafından yürütülmesi ile web daha anlaşılır olacaktır”

Tim Berners-Lee’nin bu vizyonu, HTML verilerinin ve aralarındaki ilişkilerin bilgisayarlar tarafından anlaşılır hale getirilmesi için web’in yeniden tasarlanması anlamına gelmektedir ve Anlamsal Web (Se-

mantic Web) olarak adlandırılmak-tadır.

Anlamsal Web, günümüzde kul-lanılan web’in genişletilmiş halidir ve hangi bilginin anlamının daha iyi olduğu, bilgisayarlar tarafından daha iyi anlaşıldığı ve hangisinin insanların daha çok işine yaradığı hakkındadır.

Anlamsal Web’in temel amacı, iyi tanımlanmış ve ilişkilendirilmiş olan bilgilerin ve servislerin, web ortamında bilgisayarlarca okuna-bilir ve anlaşılabilir olmasını sağla-yacak standartların ve teknolojile-rin geliştirilmesidir. Anlamsal Web sadece web sayfalarındaki bilgileri kullanan bir insan-bilgisayar ilişkisi

116 sanalkurs 15

olmayıp, verinin bulunduğu diğer ortamlar olan; veri tabanları, ser-visler, programlar, çeşitli sensörler, kişisel araçlar ve hatta ev içindeki uygulamalara ait verilerin de işle-nebileceği karmaşık bir ortamdır.

ANLAMSAL WEB’İN TEKNOLO-JİK BİLEŞENLERİ

XMLXML Anlamsal Web’in en önemli

yapı taşlarından biridir. Bağımsız bir kuruluş olan W3C (World Wide Web Consortium) organizasyonu tarafından tasarlanan ve herhangi bir ku-rumun tekelinde bu-lunmayan XML’in ana kullanım nedeni, orga-nizasyon içinde ve dı-şında veri değişiminin sağlanmasıdır. Bu bakış açısından XML, birlikte çalışabilirlik sağlayan önemli bir araçtır.

XML dört temel ko-nuda başarı ile kullanıl-maktadır:

1. XML uygulama ba-ğımsız veri ve belge ya-ratmaktadır.

2. Üst veri (meta data)

ortamı için standart bir gösterim sunmaktadır.

3. Veri ve belge için ortak yapısal standartlar sunmaktadır.

4. XML sınanmış bir teknolojidir.

XML hem bir dil hem de bir tek-noloji olarak, bir verinin biçimlen-dirilmesi, tanımlanması ve verilerin yapılandırılmasında kullanılmakta-dır. Dolayısı ile veriler standart bir şekilde tanımladığından, web’te veya herhangi iki program arasın-da veri alışverişi kolaylaşmakta-dır. Bu özellikleri nedeniyle XML, Anlamsal Web’in geliştirilmesinde önemli bir konuma sahiptir.

117

Web ServisleriWeb servisleri; İnternet, intranet

ve extranet üzerinde XML ve stan-dart web protokollarını kullanarak uygulama birlikteliğini sağlayan, bilgiye erişimi kolaylaştıran, tanım-layan ve bilgiyi ortaya çıkaran yazı-lım uygulamalarıdır. Web servisleri, uygulamalar arasında entegrasyo-nu ve birlikteliği sağlayarak, iş yap-mayı kolaylaştıran bir yapı sun-maktadır. Örneğin, otel bulma web servisi, uçak bileti aracılığı, araba kiralama web servisi vb.

Web servisleri, iş süreçlerinin ve yazılımların entegrasyonunu sağ-larken, grafik kullanıcı arayüzün-den ve gösterimden tamamen

bağımsızdır. Farklı bilgisayar sis-temleri arasında veri alışverişini kolaylaştıran web servisleri, yazı-lım ürünleri için standartlar geliş-tirmekte ve firmalar arası ticaret (B2B), sipariş, sigorta kontrolleri, finansal bilgi paylaşımı ve tedarik zinciri yönetim sistemlerinde iş-letmenin sınır tanımaksızın gerçek zamanlı işlem yapmasına imkan sağlamaktadır.

Önümüzdeki yıllarda çeşitli ilgi alanlarında kullanılacak olan web servisleri, Anlamsal Web ile uyum-lu hale gelerek, gerekli yapısal en-tegrasyonu sağlayacaktır.

Böylelikle web servisleri, Anlam-sal Web vizyonunun ilk önemli uy-

gulama alanı haline gelecektir.

ANLAMSAL WEB’İN UYGULAMA ALANLARI

Ontolojiler, B2B (iş-letmeden işletme-ye) alanındaki bilgi-lerin yönetilmesi ve e-ticaret alanında önemli bir rol üstlen-me potansiyeline sa-hiptir. Büyük elektro-nik ticaret gruplarının veya birlikteliklerinin

118 sanalkurs 15

standartlaşmış ope-rasyonlar yapabil-meleri için uygula-maların anlamsal olarak bilgileri pay-laşabilmesi gerek-mektedir. Bu da yeni hizmet ve ürünlerle sürekli gelişen, özel-likle de üretici ve dağıtıcılar arasında-ki ilişkilerin organi-ze edildiği süreçleri daha verimli hale getirmektedir. Teda-rikçilerle bağlantıla-rın ve birliktelikleri-nin dinamik olarak oluşturulması, otomatik iş süreçle-ri, şeffaf pazarlama, ürünlerin onli-ne olarak konfigüre edilmesi gibi işletme konuları, bu değişimden en fazla yararlanacak olan süreçler olarak görülmektedir.

Örneğin UB/SPSC (Universal Standard Products and Services) ve UCEC gibi ürün ve hizmetlere uluslararası standartlar getiren ve bunların niteliklerini tanımlayan organizasyonlar, aslında yatay on-tolojilerdir ve B2B süreçlerinde önemli konumları vardır.

RosettaNet gibi tüm endüstriye açık, e-iş için gerekli standartları oluşturulduğu ve iş süreçleri için

ortak bir dilin sağlandığı birlikte-likler, bilgi teknolojileri alanında elektronik bileşenlerin, yarı ilet-kenlerin tanımlandığı dikey onto-lojilerdir.

Arabuluculuk, e-ticaretin önemli işlevlerinden birisidir. Hızla gelişen elektronik pazaryeri, alıcı ve satı-cıları buluşturan sanal ortamlardır ve dinamik bir ekonomik değer de-ğişim sistemini desteklemektedir. Gelişmiş arabuluculuk hizmetleri verebilmek için zengin ve esnek bir üst veri bilgisine sahip olmak ge-reklidir ve RDF gibi anlamsal web ile ilişkili teknolojileri kullanarak çeşitli modellemelerin yapılabile-ceği anlaşılmaktadır.

119

SONUÇAnlamsal Web ve Ontoloji araçla-

rının gelişmesi, bu alandaki uygu-lamaların artması, iş süreçlerinde, özellikle de B2B e-ticaret alanında yeni eğilimlerin ortaya çıkmasına yardımcı olacaktır. Web ortamında, bilgiler arasındaki ilişkilerin sağla-nabilmesi ve bu bilgilerden anlam-sal ilişkilerin çıkarılması, ekonomik çıktıyı yükseltecek ve önemli bir katma değer yaratacaktır. Bu süreç, tüketicilere zeki asistanlık hizmet-lerinin, yeni tip aracılar tarafından sunulması ve yeni hizmet türleri-

nin ortaya çıkmasıyla sonuçlana-cak süreçleri başlatacak, bu da yeni iş yapma biçimlerinin gelişmesine olanak sağlayacaktır.

Bunları bilmek, Anlamsal Web’in gelecekteki başarısı için gereklidir.

Çünkü, Anlamsal Web ile ilgi-li çalışmaların sürdürülebilmesi ve başarılı olabilmesi; bilgi bilimi, bilgisayar, yazılım ve ontoloji mü-hendisleri ile birlikte, kendi çalışma alanını bilen sosyal bilimcilerin or-tak çalışmasını gerektiren bir dizi karmaşık süreç ile baş edilebilme-sine bağlıdır.

120 sanalkurs 15

121

Abdullah Tekin

123

Soner Demirsoy

SEO, siteleriniz için arama motoru optimizasyonu demektir. Bu yazımızda dikkat etmeniz gereken güncel SEO teknikle-ri nelerdir gibi sorulara cevap arayacağız.

Güncel SEO Teknikleri

İNTERNET

İSA PEHLİVANLIWeb Uzmanı

124 sanalkurs 15

Bir sitenin başarılı olması için önemli 3 etken vardır: 1- İçerik, 2- SEO, 3- Reklam.

Şimdi bunların üzerinde duralım.

1- İçerikÖzgün İçerik : Sitenizin amacına

ve hedef kitlesine uygun, sitenize gelmesini istediginiz ziyaretçile-rin, bulmak istedikleri konularda özgün içerikler yazılmalıdır. Yani tamamen kendi klavyenizden çı-kan, başka sitelerde birebir aynıla-

rı bulunmayan yazılar yazılmalıdır ya da içerikler eklenmelidir. Bazı webmaster’lar içeriklerini başka sitelerden temin edip, içerik üze-rinde oynamalar, editlemeler ya-parak kendi sitelerinde bu içerik-leri yayınlamaktadırlar. Eğer ki, siz kendiniz özgün içerikler yazamıyor iseniz, yukarıda vermiş olduğum örnekteki gibi hazır içerikleri en az %50 oranında editleyerek, düzen-leyerek sitenizde yayınlama yolu-nu da tercih edebilirsiniz.

Güncel İçerik : Sitenizi en az 3 günde bir güncellemelisiniz. Eğer

imkan var ise, her gün güncelle-meniz sitenizin yararına ola-

caktır. Bu demek oluyor ki, ne kadar sık güncelleme,

o kadar çok indekslen-me. İndekslenme-

nin sonucunda

Bir sitenin başarılı olması için önemli 3 etken vardır:

1- İçerik,

2- SEO,

3- Reklam.

125

size arama motorlarından gelen hit olarak geri dönecektir.

2- SEO (Arama Motoru Opti-mizasyonu)

Site İçi SEO: Site içinde, tasa-rımda ya da script’te yapılan tak-tikler demektir. Bunların belli başlı kriterleri vardır:

1- Uygun Alan Adı: Sitenizin ko-nusuna uygun, konunun adı içinde geçen bir domain tescillenmelidir.

2- Uygun Hosting: Sitenizin dili-ne göre hosting sağlayıcısı seçiniz. Bu demek oluyor ki, eğer Türkçe

bir siteniz var ise, yani Türkiye’ye hitap ediyor iseniz, Türkiye data-center’larını kullanan firmalardan hosting ya da reseller alınız. Türki-ye datacenter’larından kendinizde server (sunucu) kiralayabilirsiniz.

3- Özgünlük: Özgün tasarım (CSS + Ajax) ve özgün script kulla-nılmalıdır. Web master arkadaşla-rın en çok yaptıkları hatalardan biri de hazır template tasarımlar veya hazır scriptler kullanmaktır. Tasa-rım ve script konusundada özgün-lük çok önemli bir etkendir.

4- Kaliteli İçerik: Site içi SEO’nun olmazsa olmazı özgün ve güncel

126 sanalkurs 15

içeriktir. Site içi SEO’nun en önemli unsurudur diyebiliriz.

5- Uygun Tanımlamalar: Her sayfada farklı title (site başlığı), description (site tanımlaması) ve keywords (anahtar kelimeler) kul-lanılmalıdır. Eğer her sayfada farklı metataglar kullanmak yerine, her sayfada aynı metatag’ları kullanır iseniz arama motoru sıralamanız düşecektir. Bunu önlemek için yu-karıda anlattığım gibi her sayfada farklı, yani sayfanın ya da içeriğin veya makalenin konusuna, içeriği-ne göre metatag’lar kullanınız. Ve önemli bir husus daha: Bu meta-tag’ları kısa ve öz tutunuz. Fazlası spam’a girer.

6- Uygun Sayfa Başlığı: Her sayfanın konuyla alakalı, uygun sayfa baş-

lığı olmalıdır. Bir örnek ile açık-layım: Diyelim ki, konusu “Boing 737” olan bir makaleniz var. Uygun sayfa başlığı “www.siteadi.com/bo-ing-737” ya da “www.siteadi.com/boing-737.html” olmalıdır. Sitenizin sayfalarında PHP script’lerde kulla-nılan (.htaccess) dosyası yöntemi ile sayfalarınız “www.siteadi.com/icerik/” ya da “www.siteadi.com/içe-rik.html” şeklinde isimlendirilmeli-dir.

7- Site Haritası: Sitenizin mut-laka site haritası, yani sitenizdeki tüm linkleri listeleyen bir sayfası olması gerekir. Aynı zamanda si-tenizin bir XML site haritasına sa-hip olması gerekir. Bu XML harita

Google webmasters’a tanıtılarak Google botlarının sitenize da-

ha kolay erişmesini ve tüm

127

sayfalarınızı gezmesini amaçlar.

8- Spamlardan Uzak Durmak: Webmaster’ların en çok yaptığı ha-ta ise spam’dır. Geniş bir kavramı vardır: Site içi spam, site dışı spam.

Bu bölümde site içi spamlardan bahsedeyim.

Site içerisinde gerek metatag bö-lümünde, gerekse sitenizin en altı-na ya da her hangi bir yerine siteni-zin konusu ile alakalı 3-5’den fazla aynı yazıdır, ya da aynı içerik ama farklı metataglar ile yalancı sayfa-lar veya aynı içerik, aynı metatag, farklı sayfa ismi ile hazırlanmış ya-lancı sayfalar, yani site içerisindeki eylemlerin 2-3’den fazlasına spam deniyor. Bu yazı ya da sayfa ismi gibi olabiliyor. Sitelerinizde spam yapmayınız.

Site Dışı SEO: Bu-nunla ilgili bilinme-si gereken belli başlı noktalar şunlar:

1- Sitenizi Google Webmastes’a kayıt edin.

2- Sitenizi Dmoz’a kayıt edin.

3- Sitenizi dizinle-re ve toplistlere kayıt edin.

4- PR6, PR5 blog tü-revi sitelere yorum ile beraber lin-kinizi ekleyin. (3 günde 1 tane gi-bi...)

5- Aynı içerikli siteler ile çapraz link değişimi yapın. (3 günde 1 ta-ne gibi...)

6- Aynı içerikli sitelerden karşılık-sız link satın almak site dışı SEO’da dikkat edilmesi gerekenler: Siteniz için karşılıksız link almaya çalışın, karşılıklısız sizin sitenize verilen linkler ne kadar fazla olur ise site-nizin google sıralamasıda buna indexli olarak yükselecektir. An-cak sitenize link alımlarında dikkat etmeniz husus aşırıya kaçmama-nızdır. Hele hele yeni açılmış site-lerinize link almak çok sakıncalı-dır. Böyle bir yanlışlık yapar iseniz sandbox yersiniz muhtemelen. Ay-rıca sitenize link alımı ya da çapraz

128 sanalkurs 15

link veya dizinlere eklerken acele etmeyin. Her gün 1 tane ya da 2 günde bir tane şeklinde yavaş ya-vaş ilerleyin.

Diyeceğim şu ki, eğer siteniz yeni ise ilk ay link falan alıp vermeyin. Site içi SEO’ya yönelin.

İlk aydan sonra da site dışı SEO tekniklerini uygulayarak sitenizi full SEO yapılmış olarak yayın ha-yatına devam ettirin.

3- Reklam:Şüphesiz ki reklam, sitenizin hi-

tini arttıracak ve sitenizi tanıtacak bir unsurdur. Ama önemli olan he-def kitlenize ulaşabilmektir.

Örnek olarak, araba siteniz var ise

araba sitesine reklam vermek gibi.

Bir site için SEO’nun ne kadar et-kisi var ise reklamın da etkisi bir o kadardır.

1- Google Adword’a reklam vere-bilirsiniz.

2- Aynı içerikli sitelere banner ya da pop up reklam verebilirsiniz.

3- Aynı içerikli sitelerin üye ma-illistlerine ücret karşılıgında toplu mail reklamı yapabilirsiniz.

4- Aynı içerik olmayan, ancak günlük 100K gibi hiti olan sitelere banner reklam verilebilir.

5- Aklınıza gelen farklı reklam yöntemleri vb. de olabilir.

Kolay gelsin.

129

131

Serkan Şahin

Artık hayatımızda çok önemli bir konuma sahip hale gelen Facebook, yenilikler ve ilavelerle gündemimize damgasını vurmayı sürdürüyor. Bu yazıda, bu yeniliklere kısaca bir göz atacağız.

En Çarpıcı FacebookYenilikleri

FACEBOOK

MUSTAFA ÜLKÜYazılım Uzmanı

132 sanalkurs 15

Yeni Mesaj SistemiYeni mesaj sistemi yavaş yavaş

devreye alınıyor, ancak yeni pro-file geçişte olduğu gibi Facebook.com/about/messages adresindeki “davetiye iste” butonundan bu sü-reci hızlandırmak mümkün. Yeni sistem aktif olduğunda ise profili-nizde ilgili bildirimi göreceksiniz.

Yeni mesaj sistemi ile birlikte e-posta adreslerinin isteğe bağlı olarak etkinleştirileceğini belirten Facebook’a göre, yeni mesaj siste-mi aşağıdaki özelliklere sahip ola-cak:

Hızlı Gönderim: Sadece Enter tuşuna basarak mesaj gönderebi-leceğiniz için, anlık mesajlaşma ka-dar hızlı bir aksiyona sahip.

Öncelikli Posta: Daha önce Gmail’de olduğu gibi (Öncelikli E-posta) yakın olduğunuz kişiler-den gelen mesajlar posta listele-rinde öncelikli yer alacak.

Arama: Konuştuğunuz kişi veya mesajlaştığınız kişi ile aranızdaki mesajlaşma ve Facebook üzerin-den göderilen anlık iletilerde de arama yapmanız mümkün.

Yeni Kişiler: Konuşmaya yeni ki-şiler ekleyerek o ana kadar söyle-nen her şeye tam erişim verilebilir.

Ayrılabilme: Yeni mesaj sistemi

ile birlikte gelen yeni bir özellik ise almak istemediğinizde bir grup konuşmasından ayrılabilme imka-nıdır.

Harici Dosyalar: Gönderece-ğiniz mesajlar içerisine; bağlantı, fotoğraflar ve videoların yanı sıra, harici dosyalar da ekleyebilirsiniz.

Eleştiriler

Facebook’un yeni mesaj sistemi elbette çok iddialı. Ancak kullanıcı-lardan çok sayıda eleşti aldığını ve bir süre daha almaya devam ede-ceği de kesin. Bu eleştirilere baka-cak olursak:

Tutarsız Sonuçlar: Arama so-nuçlarının tutarlı ve istenilen so-nuçta olmaması.

Tek Başlık: Bir kişi ile olan tüm mesajların tek başlık altında top-lanması da kullanıcılar tarafından pek hoş karşılanmış değil.

Listeleme Zorluğu: Mesajlarda tutarlılık ortadan kalkmış gibi du-ruyor ve listeleme gibi bir imkan yok gibi.

133

Yeni Like (Beğen) Düğmesi‘Beğen’ butonu artık ‘paylaş’ bu-

tonu oldu. Geçtiğimiz günlerde profillere yansıyan yenilik, Face-book tarafından bir test çalışması olarak açıklandı. Ancak test aşa-masında kalacağı pek sanılmıyor.Facebook’un yaptığı değişikliğe göre artık beğen butonuna tıkla-dığınızda Facebook profilinizde eskisi gibi tek satırlık bir yazı yeri-ne resimli bir bağlantı paylaşmış olacaksınız. Aynı paylaş butonu ile paylaşım yapmış gibi. Tabi Paylaş etkinliğine göre daha hızlı, ama kullanıcılar açısından bunun da pek hoş karşılanacağı tahmin edil-miyor. Çünkü kullanıcılar aslında artan sosyal ağ hizmetlerinde bi-raz daha sadelik ve akıcılık görmek istiyorlar. Yeni Like akıcılık ve sade-likten çok bir paylaşım kirliliği orta-ya çıkartmış durumda.

Temmuz 2010’da 500 milyon üyeye ulaşan Facebook’un aynı ay başındaki istatistiği her gün 65 mil-yon kullanıcının Facebook Beğen butonunu kullandığını gösteriyor-du. Facebook Like bu bağlamda internet dünyasında büyük öneme sahip.

Yenilenen Sayfa Tasarımı ve Özellikleri

Yeni Sayfa Düzenine Geçmek için www.facebook.com/pages/sta-tus/ adresini ziyaret etmeniz gere-kiyor.

Aynı Tasarım: Yeni Facebook sayfaları ile, artık eskiden olduğu gibi Facebook profilleri ile Face-book sayfaları aynı görünüme ka-vuştu. Özelikle profil resimlerine şaşırtıcı bir görünüm kazandıran

134 sanalkurs 15

Facebook, sayfalar noktasında da farklı bir bakış açısı yakaladı deni-lebilir, ki Facebook sayfalarını kul-lanan şirket vb. kurumların profil resimleri ilginç bir kullanım şekli ortaya çıkaracaktır.

Bölgesel Paylaşımlar: Facebook sayfalarında artık bölgesel payla-şımlar yapılabilecek. Yani global bir marka tek Facebook sayfasıyla tüm ülkelere özel güncellemeler yapabilecek. Böylece yerel reklam çalışmalarını kolaylaştıracak olan Facebook, aynı sayfayı beğenen kullanıcıları da artık sayfalarda gösterecek.

Profilinizi Sayfaya Dönüştürün: Başka bir yenilik ise Facebook’un artık profilinizi sayfaya dönüştür-menize imkan tanıması. Yeni tasa-rımla beraber isterseniz profilinizi yönetici olduğunuz sayfaya çevi-

rebileceksiniz. Bu özelliği aktifleş-tirdiğinizde Facebook sayfa uya-rılarını profil uyarıları gibi sol üst kısımda alıyorsunuz ve giriş yaptı-ğınızda sadece o sayfaya dair şey-ler göreceksiniz. Profilinizi birden fazla sayfaya yönlendirilebiliyor ve o sayfayla kolayca ilgilenebiliyor-sunuz.

FBML yerine IFRAME: Facebook ayrıca kendi uygulamalarına yöne-lik kullandığı FBML programlama dilini de Iframe’e yönlendirmeye karar verdi. FBML kullanımı kaldı-rılmış değil, ancak artık Facebook sayfalarına eklenecek sekmelerde iFrame kodları kullanılabilecek.

Görünen o ki, küçük bir değişik-lik yapsa bile çok konuşulan Face-book, sürekli yenilikler ekleyerek gündemde kalmayı sürdürecek gi-bi görünüyor.

135

137

Anıl Yüncü

Sanalkurs E-Dergi Sayı 15

Documents

Transcript of Sanalkurs E-Dergi Sayı 15