Sanalkurs E-Dergi Sayı 15 by Sanalkurs E-Dergi

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

Genel Yayın Yönetmeni/ Director Siraceddin El Editörler / Editors Abdullah Tekin, Mustafa Ülkü Kapak Görseli / Cover Visual Turhan Algan

editörden... editörden...

Tasarım / Design Ali Uçar, Siraceddin El Yazarlar / Authors Abdullah 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 / Works Abdullah 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 / Sponsors Hosting: 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.

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 birliktelik katlanarak sürüyor. Sizlerden gelen yazılara, çalışmalara, çizimlere, fotoğraflara olabildiği ölçüde yer vermek başlıca hedefimiz. 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ı muhafaza etmek adına sizleri Sanalkurs’ta daha aktif görmek istiyoruz.

Ahmet Tany覺ld覺z覺

Bu Sayıda...

12 26 30 38 46 54 60 66

Sanalkurs’tan Son Gelişmeler Teknoloji Haberler Grafik Tasarım Bir Kitap Tasarımı Illustrator Çok Konturlu Yazı Photoshop Manga Modeli Yapmak Flash AS 3.0 Klavye Kontrolü Photoshop Farklı Bir Menü Röportaj Bengi Gençer

76 80 88 96 102 110 124 132

ASP.net Log’lama ASP.net MVC3’e Genel Bakış CSS CSS’ye Giriş Püf Noktası Elevator Pitch İnternet Günlük Fırsat Siteleri İnternet Anlamsal Web İnternet Güncel SEO Teknikleri Facebook En Çarpıcı Yenilikler

Üsame Çorman

[ SANALKURS’TAN HABERLER ]

Sanalkurs 3. Bilişim Seminerleri Sanalkurs ekibi, yılın ilk seminerini İstanbul Ticaret Üniversitesinde 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ü. 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 programlarımızı iptal etmek üzereydik. Tam bu sırada İstanbul Ticaret Üni-

vesitesi Bilgisayar Teknolojileri 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 organizasyonu birlikte yapmaya evet diyerek içeriği belirleme sürecine 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ğerlendirirken “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 fikirlerimiz 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 tarihimizi 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ı anlatabileceklerini 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ündemin 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 konusuyla 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 belirttiğinde geriye sadece bir konuşmacımızı belirlemek kalıyordu. Turkcell Teknoloji’den gelecek bir uzman arkadaşımızdan Android yazılımlara yönelik bir seminer beklerken, son anda yaşanan bazı

sanalkurs 15

gelişmeler nedeniyle uzman arkadaşımız katılamayağını belirtiyor ve biz de rotayı Birtek Bilişim firmasının patronu ve aynı zamanda PHP uzmanı İlhan Kuzgun’a çeviriyorduk. Yaptığımız bir toplantıda İlhan Kuzgun, PHP’de kendi yazdığı framework üzerinden PHP5 ve Object Oriented PHP konusunu ele alacağını belirtiyordu. Böylece konuşmacılarımız tamamlanmıştı. Son derece aktif ve etkili bir şekilde çalışan Bilgisayar Teknolojileri Kulübü önceki seminerlerimizin aksine bize yapacak iş bırakmamaya kararlıydılar ve müthiş bir performans sergilereyerek üst düzeyde bir organizasyona im-

za atıyorlardı. Seminer esnasında ikramlar, plaketler, çiçekler, hediyeler bizlere hazırladıkları sürprizlerden bazılarıydı. Reklam ve Sponsor Sorumlumuz Harun Kılıç’la “sponsor konusunda neler yapabiliriz”i düşünürken, Monster Notebook bu kez seminerimizin 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, seminerlerden üst düzeyde yararlanabilecek katılımcılar kalmıştı. Yazılım Uzmanımız Abdullah Tekin, 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 hadiseydi, ne var ki, kaydolan herkesin katılabilmesi tecrübelerimiz ışığında mümkün görünmüyordu. Başvuran üyelerimizin yarısı katılsa bile zaten salonu çok çok doldurmuş olacaklardı.

sal kanallara programlar çeken kameraman arkadaşımız Recep Merdan 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 Ticaret Üniversitesine doğru yola çıkıyorlardı.

Kulüp başkan yardımcısı Zeynep Duman ile bu esnada süren telefon trafiği sonrası bütün hazırlıklar 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.

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

8 Ocak 2011 Cumartesi günü ulu-

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

sanalkurs 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 nedeniyle süreç biraz uzayınca seminer programlarımızı iptal etmek üzereydik. Tam bu sırada İstanbul Ticaret Ünivesitesi Bilgisayar Teknolojileri 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 organizasyonu birlikte yapmaya evet diyerek içeriği belirleme sürecine 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ğerlendirirken “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 fikirlerimiz 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 tarihimizi 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.

MVP ünvanına sahip bir arkadaşıHakan Çamoğlu ve Erhan mızı, Uğur Umutluoğlu‘nu davet Meydan‘la hangi konuları anlata- ettik. “ASP.net 4.0 SEO Yenilikleri” bileceklerini konuşurken, Erhan başlığı ile yer alabileceğini belirttiğinde geriye sadece bir konuşMeydan ilk önce “InDesign’da Tabmacımızı belirlemek kalıyordu. let Cihazlara Yönelik Tasarımlar” Turkcell Teknoloji’den gelecek bir konusunu seçmişti ama programcı uzman arkadaşımızdan Androgurubunun ağrılıklı olacağını öğid yazılımlara yönelik bir seminer rendiğinde “CSS3 ile Animasyon beklerken, son anda yaşanan bazı Yapma” konusunu ele alacağını gelişmeler nedeniyle uzman arkabelirtti. Hakan Çamoğlu ise gündaşımız katılamayağını belirtiyor demin popüler konularından biri ve biz de rotayı Birtek Bilişim firolan “HTML5 Yenilikleri” başlığımasının patronu ve aynı zamanda nı tercih ediyordu. Seminer için 5 PHP uzmanı İlhan Kuzgun’a çeviriders uygun olacaktı, bu nedenle yorduk. Yaptığımız bir toplantıda Yunus Özen, ASP.net’te MVC konu- İlhan Kuzgun, PHP’de kendi yazsuyla yine bizlere katılıyordu. dığı framework üzerinden PHP5 Hemen arkasından Microsoft ve Object Oriented PHP konusunu

sanalkurs 15

ele alacağını belirtiyordu. Böylece konuşmacılarımız tamamlanmıştı. Son derece aktif ve etkili bir şekilde çalışan Bilgisayar Teknolojileri Kulübü önceki seminerlerimizin aksine bize yapacak iş bırakmamaya kararlıydılar ve müthiş bir performans sergilereyerek üst düzeyde bir organizasyona imza atıyorlardı. Seminer esnasında ikramlar, plaketler, çiçekler, hediyeler bizlere hazırladıkları sürprizlerden bazılarıydı. Reklam ve Sponsor Sorumlumuz Harun Kılıç’la “sponsor konusunda 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, seminerlerden üst düzeyde yararlanabilecek katılımcılar kalmıştı. Yazılım Uzmanımız Abdullah Tekin, seminer katılım formunu devreye aldığında müthiş bir başvuru ile karşılaşmıştık. 700’ü aşkın bu başvurular elbette güzel bir hadiseydi, ne var ki, kaydolan herkesin katılabilmesi tecrübelerimiz ışığında mümkün görünmüyordu. Başvuran üyelerimizin yarısı katılsa bile zaten salonu çok çok doldurmuş

olacaklardı.

yorlardı.

8 Ocak 2011 Cumartesi günü ulusal kanallara programlar çeken kameraman arkadaşımız Recep Merdan 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 Ticaret Üniversitesine doğru yola çıkı-

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 boyutlu gözlükleriyle yüksek performanslı bilgisayarlarını tanıtıyordu.

sanalkurs 15

Oyun oynamak ve yüksek bellek harcayan programları kullanmak, bu “canavar” bilgisayarlarla son derece hızlı bir şekilde gerçekleşiyordu. 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ü donanımlara sahip bilgisayarlarda oynayarak 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üklerinde Sanalkurs olarak gerçekten doğru bir yol üzerinde olduklarını

ve son derece önemli bir şey yaptıklarını fark ettiklerini dile getiriyordu. “İstanbul dışından gelenler var mı?” sorusuna kalkan eller de bunu açıkça gözler önüne seriyordu. 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 Siracel, 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ızlı 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.

1. Yunus Özen (Asp.Net MVC 3) Sanalkurs 3. Bilişim Seminerlerinin ilk konuşmacısı olan Yunus Özen, MVC ile kolayca neler yapılabileceğini anlatırken, yeniliklerden bahsetti ve seminerinin sonunda yaptığı demoyla konusunu örneklendirdi. Soruları cevapladıktan sonra yerini ikinci konuşmacımıza bıraktı. 2. Erhan Meydan (CSS 3 İle Animasyon) 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 programla CSS 3 ile nasıl kolay bir şekilde animasyon yapılabileceğini bizlere 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östererek 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ızdı. Bu nedenle Uğur Umutluoğlu da yine popüler yeniliklerden sadece birini tercih ederek anlatı-

mını gerçekleştirdi. Programının bitiminden sonra erken çıkması gereken Uğur Umutluoğlu’na hediyelerini takdim ederek uğurladık. 4. Hakan Çamoğlu (HTML 5 Yenilikleri) HTML5’in bir devrim değil, evrim olduğunu ileri sürerek başladığı “şov”uyla HTML 5 öğrenmek isteyenlerin öncelikle Web 2.0 ile ilgili herşeyi öğrenmesi gerektiğini belirten Çamoğlu, sunumu ve esprileriyle 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 topladı.

5. İlhan Kuzgun (PHP 5 ve Object Oriented PHP) Kendi yazdığı frameworks üzerinden yaptığı sunumuyla seminerin son sunumunu gerçekleştiren İlhan Kuzgun, salonu dolduran PHP severlerin sorularını cevaplayarak seminerini sonlandırdı.

PLAKETLER Bilgisayar Teknolojileri Kulübü ve Sanalkurs olarak konuşmacılara bazı hediyelerimiz oldu. Monster Notebook ise ekran temizleyici, tişört, 3D sticker gibi hediyeleriyle

sanalkurs 15

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 hediyemizdi.

SORU – CEVAP BÖLÜMÜ Konuşmacılarımızın herbiri kendi sahasında uzman isimler ve şirketleri var. Hal böyle olunca ciddi bir birikime ve sektör tecrübesine sahipler. Sanalkurs olarak katılımcılar onlardan bu yönde de istifade etsin diye düşündük ve soru – cevap faslında sektörel anlamda olsun, 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 uzmanlarımız eğlenceli bir havada, son derece mütevazı ve yol gösterici üsluplarla cevaplamaya çalıştılar. Hepsine çok teşekkür ediyoruz.

SONUÇ İnanıyoruz ki, 3. Sanalkurs Seminerleri de amacına ulaştı ve Türkiye’nin neresinden gelip katılırsa katılsın, tüm katılımcılar memnun olarak ayrıldı. Bu seminerde uzman konuşmacılarımız hem bilgi, hem de tecrübeleriyle herkese pek çok şey kattı. Hem eğlenceli, hem üst düzeyde bir seminer havası oluştu, hem de güzel dostluklar gerçekleşti.

Sertaรง Aydoฤ du

Cansu TaĹ&#x;kan

[ TEKNOLOJİ HABER ]

HTML5 ve CSS3 için benzersiz bir kaynak Sanalkurs.net’in değerli yazarlarından Ertuğrul Haskan’ın uzun süredir üzerinde çalıştığı kitap nihayet yayında! Web programlamaya parlak bir giriş yapmak isteyenler! “Web tasarımının geleceği HTML5 ve CSS3 ile kod yazmak istiyorum ve web tasarı- sayfalarının içeriğini çok daha iyi mını temelden kavramak istiyorum” yapılandırabilir, birbirinden farklı diyenler! Bu kitap sizin için! browser’lar için farklı çözümler üretBu kitapla, çoğu mobil cihazın ve meyi bu kitapla öğrenebilirsiniz. Üsbrowser’ın desteklediği HTML5 ve telik tüm bunları CSS3’ün gücüyle CSS3 ile kodlama bilginizi bir adım beraber yapma fırsatına sahipsiniz. öteye taşıma imkanı bulabilirsiniz. CSS3’ün inceliklerini ve yeni özellikYeni web standardı HTML5 ile web lerini öğrenebilirsiniz.

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 Facebook Dev Sitenin Peşinde! 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 belirtildi. Satın almanın gerçekleşmesi durumunda 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.

Internet Explorer 9 Microsoft, yeni tarayıcısı Internet Explorer 9’un RC sürümünü indirilmeye 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ığı pazar paylarını geri almak için attığı en önemli adımlardan biri olarak kabul ediliyor.

iPad’e Rakip Dünyanın en büyük tüketici elektroniği firmalarından Hewlett Packard, ABD’nin San Fransisco kentindeki Ford Mason Merkezi’nde “Palm TouchPad”i tanıttı. TouchPad, rakibi iPad ile hemen hemen aynı boyutlara, ağırlığa ve pil dayanma süresine sahip. 9.7 inç boyutunda çoklu dokunmatik ekrana sahip TouchPad’de aynı zamanda 1.3 megapiksel ön kamera, 6GB ve 32GB olmak üzere iki depolama seçeneği bulunuyor.

Talha Çay

sanalkurs 15

Bir Kitap Tasarımı Yapmak Bu yazımızın konusu; bir kitabın veya derginin -tasarım olarak- sıfırdan, matbaaya gidene kadar izlediği süreçleri anlamak ve sonuçta da bir kitap ya da dergi tasarlamanın anatomisini incelemek olacak. GRAFİK TASARIM ZİYA KAHRAMAN Grafik Tasarımcı

Bu sayıda sizlere önceki sayılardakilere nispetle biraz daha kapsamlı bir makale sunmaya çalışacağım. Genel olarak kitap tasarımını, kapak tasarımı ve dizgi olmak üzere iki ana başlıkta incelemek faydalı olacaktır. Kapak tasarımının değişik mecralarda 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 tamamlamış olacağım.

KAPAK TASARIMI YAPMAK Kitap ya da dergi tasarımında kapak demek herhangi bir üründe ambalaj demektir. Bir aracın motoru ve içi ne kadar kaliteli, ne kadar yeterli olursa olsun, dış tasarımı derme çatma olduğunda o arabayı almaktan daha görür görmez vazgeçme ihtimaliniz oldukça yüksek 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 artacaktı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 Tipografi Tipografi, (Etimolojisi: Yunanca’da “typos” (form) ve “graphia” (yazmak) sözcüklerinden türemiş olan)

sanalkurs 15

typographia sözcüğünün Türkçe halidir. Kavram; forma uygun yazmak demektir. Yazı tipi, punto büyüklüğü, satır uzunluğu, satır arası boşluk ve benzer etkenlerin kombinasyonları ile yapılır. Harf ve yazınsal-görsel iletişime ilişkin diğer elemanların hem görsel, fonksiyonel ve sanatsal düzenlemesi hem de bu elemanlarla oluşturulan bir tasarım dili, anlayışıdır. Reklam amaçlı her faaliyette; mesajı ikna edici kılan tipografi, vazgeçilmez bir unsur olarak öne çıkmıştır. Kapak tasarımı yaparken üzerinde en fazla çalışılan, en fazla deneme yapılan kısım kitabın adı, yazarın adı ve yayınevi logosu gibi

unsurların boyutları ve yerleşimleridir. Bu uğraş kapaktaki tipografik düzenlemenin mükemmeliyeti içindir. Tipografi tasarımın matematiğidir. Estetik yaklaşımda dümdüz olmak değil bekli ama karmaşık da olsa o karmaşadaki düzen önemlidir. Kapak tipografisinde genel olarak yerleşmiş kullanımlar 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 neredeyse standart sayılabilecek olan birinci sözünü ettiğimiz genel kullanımdır. Arka kapak tasarlanırken kitap açıklaması, kitaptan bir bölüm ya da kitap hakkında ünlülerin görüşleri vs.nin yazımı ve yazar/şairin fotoğrafının kullanımı, bunların yerleşimi üzerinde çalışmak gerekecektir. Arka kapaktaki elemanların minimalize edilerek ça-

lışılması, boyutlarının abartılmaması esastır. Renklerinin de ön kapak kadar dikkat çekici olması şart değildir. Tipografi çalışırken denge 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üzeni Düzenleme aşamasına kullanılacak fotoğraf, illüstrasyon ve çizimlerin düzenlemesi yapıldıktan sonra başlanmalıdır. Fotoğrafların temizlenecek kısımları varsa temizlenmeli, 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 nerede olacağıyla ilgilidir. Bu tamamen tasarımcının yeteneğine ve hayal gücüne kalmış bir süreçtir. 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. Bir grafiker herhangi bir insandan farklı bir bakış açısına sahip, sanatsal ruhu olan bir kişi olmalıdır. Bununla bağlantılı olarak da kapakta kullanılacak görselin ya da yazıların yapılacak düzenlemeyle adeta akraba oldukları hissi uyandırılmalıdır. Bütün elemanlar yerlerinden memnun olmalı, özgün bir kompozisyon oluşturulmaya gayret gösterilmelidir. Eğer böyle olursa kapağın gerçek bir tasarımı olur. Yoksa yukarıda bahsettiğimiz alelade tasarımı, bırakın grafiker ya da

sanalkurs 15

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

Kapak Tasarımında Bölümler Kitap ya da dergiler üç boyutlu nesneler olduğundan tasarımları da bölümlere ayrılarak değerlendirilebilir. 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 geniş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, kitabı 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.

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

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

Prova Baskı

Prova baskı tasarım sonlandığınKapak tasarımında bir takım ha- da alınan ve gerçek baskıya geçiltalara düşmemek için bazı konula- meden önce yapılan inceleme basra özellikle dikkat edilmeldir. Bun- kısıdır. Prova baskı, ekran üzerinde görülemeyen bazı ayrıntıların gölardan bazıları şunlardır: rülebilmesi ve ekran-kağıt farklılıBir görsel, kapağın orta Font Seçimi ğından meydana yerine konur, üzerine çıkan detay deKapak tasarlarken kitabın adı, altına da ğişimleri görmek mümkün mertebe açısından son deyazar ismi yazılırsa bu da çok klasik fontlar rece önemlidir ve bir kapak tasarımı olur. kullanılmamalıdır. kesinlikle alınıp Fakat böyle bir tasarıEkran için yapılan dikkatle incelenma kim para verir orası tasarımlarda (web melidir. tasarım, programtartışılır. lar vs.) hoş görünen bazı fontlar basılı materyallerde pek de güzel görünmeyebilir.

Kapak Malzemesi Kapak malzemesi renklerin baskı 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

Renk-Konu Bağlantıları Romantik bir romanda simsiyah bir fon, bir vampir kitabında bembeyaz 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.

Onur Mert AteĹ&#x;

sanalkurs 15

Çok Konturlu

Yazılar Oluşturmak Bu derste Illustrator’de en popüler efektlerden ve çok gelen sorulardan biri olan, bir yazının etrafına birden fazla kontur (stroke) eklemeyi en kolay şekilde nasıl yapabileceğimizi anlatmaya çalışacağım.

ILLUSTRATOR CS5 SİRACEDDİN EL Web Tasarımcı

Yazımızın etrafına çizgi eklemek çoğu programla mümkün olmasına rağmen, birden fazla çizgi eklemek genel olarak hayli sorunlu bir durumdur. Çoğu kez yazının orjinalitesi 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 kolayca ekleyebiliriz. Bunun en iyi tarafı ise, elde ettiğimiz sonucu bir stil olarak kaydedip daha sonra kullanabilmek tabi ki. İsterseniz hemen başlayalım. 1. Yeni bir RGB döküman oluşturun. 2. Yazı aracını seçin ve arzu ettiğiniz 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öylece 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 paletindeki harfler arası boşluğu ayarlayabileceğiniz kısma bir değer girebilirsiniz.

5. Şimdi Appearance paletini açalı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. (Dilerseniz paletin sol altındaki simgeleri de kullanabilirsiniz).

sanalkurs 15

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

ayarını siyah olarak belirleyin.

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

10. Rengi belirledikten sonra hemen yanındaki kısımdan 4 pts rakamı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 menüden bu kez Add New Stroke seçin. 12. Yeni stroke (kenar çizgisi) rengini R: 14, G: 155, B: 125 olarak belirleyin ve çizgi kalınlığına 10 pts değerini girin. 9. Şimdi Stroke kısmındaki renk

13. Sonra bu kenar çizgisini Appearance paletinde iken tutup paletin 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ıkladığınızda da aynı sonucu elde edersiniz.

15. Efekti uygulama işi bu kadar. Dilediğiniz kadar kenar çizgisini bu yöntemi kullanarak ekleyebilirsiniz, 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ştirilebilir olmasıdır. Bunun dışında, Create Outlines özelliğini kullanarak (menüden Type > Create Outlines yolunu da izleyebilir, dilerseniz yazınızı seçip sağ tıkladığınızda gelen menüden de uygulayabilirsiniz) yazınızı şekillere dönüştürerek ve daha serbest düzenlemeler yaparak farklı sonuçlar elde edebilirsiniz.

EFEKTİ KAYDETMEK (STIL’E DÖNÜŞTÜRMEK) 14. En son oluşturduğunuz kenar çizgisini seçin ve rengini siyah yapın. Kenar kalınlığını ise 13 pts olarak ayarlayın.

Peki bu uyguladığımız efekti saklayarak, daha hızlı bir şekilde başka çalışmalarımıza uygulama işlemini nasıl yapabiliriz? Herhalde her seferinde 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 kaydederek başka zaman da kullanabilmemizi sağlıyor.

sanalkurs 15

1. Appearance paletinin sağ üstü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ısayolu: 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.

Turhan Algan

Ervanur B端rc端

sanalkurs 15

Bir Manga Modeli Yapmak 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. PHOTOSHOP ABDULLAH TEKİN Yazılım Uzmanı

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

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

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 üzerinde 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.

Gözler Bunun için Liquify panelinde sol üstteki butonlardan “Bloat Tool” u seçip gözleri yeteri kadar büyütmek olacaktır. Sağ taraftaki değerlerden fırça büyüklüğünü de göz önünde bulundurup aşağıda benim elde ettiğim sonuca ulaşıncaya kadar denemeler yapmanızda fayda var.

sanalkurs 15

Ağız Dersimizin en hassas kısmı burası. Çünkü manga çizimlerde ağız ince ve kısadır. Bu işlemi yapacağımız araç ise yine sol taraftaki “Pucker Tool”. Aracı seçili hale getirdikten sonra sağ taraftan Brush Density: 50, Brush Rate:30 değerlerini girmenizi tavsiye ediyorum. Bu sayede daha hassas bir deneme yapabiliyoruz. 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ğ taraftan da yine ortaya doğru çekmenizdir. 2-3 kez yaptıktan sonra Pucker 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ğ panelde “Reconstruct” butonu her yaptığınız işlemi geri alır. Ben aşağıdaki sonuca ulaştım, ince ve kısa bir ağız… Tam istediğimiz gibi.

Burun Burnu da inceltmemiz gerekli. Bunun için ise yine sol paneldeki araçlardan ilkini yani “Forward Warp Tool” u seçiyoruz. Sağ taraftan 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üyoruz. Sonuç aşağıda:

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

Renk Ayarlamaları Bunun için işlem yaptığımız layer seçili iken aşağıda gördüğünüz “Layer Adjustment” özelliğini kullanarak “Channel Mixer” ı tıklıyoruz. Çıkan panelden en üstten “Black & White with Red (RGB)” seçiyoruz. Oluşturduğumuz bu layer’ın opacity değerini ise %45 olarak belirliyoruz.

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

sanalkurs 15

Diğer adım aynen yukarıda yaptığımız gibi “Color Balance” oluşturmak. 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 istiyorum. Bunun için yeni bir layer oluşturun. Edit -> Fill menüsünden çıkan panelde Use: 50% Gray seçip OK deyin.Oluşturduğunuz bu layer’ın özelliğini Overlay olarak yapın. Sol taraftaki araçlardan “Burn ve Dodge Tool” ile gölge ve ışık ayarlarımızı yapacağız. İlk önce 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 haricindeki bölgeler Surface Blur filtresini uygulayarak çizgi film hissiyatını verdim. Saçlara Hue/Saturation (doymuşluk) oranını artırarak ön plana çıkmasını sağladım. Hepsi bu. İşte sonuç:

Cansu Aras

sanalkurs 15

ActionScript 3.0 ile

Klavye Kontrolü Hemen 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. ACTIONSCRIPT 3.0 HAKAN ÇAMOĞLU Web Tasarımcı

Koşullu Deyimler Hemen 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şullu deyimleri ve sonrasında klavye olaylarını içermektedir.

Koşullu Deyimleri Anlamak Koşullu deyimler bir koşulun geçekleşip gerçekleşmediğini kabul eder. Gerçek hayattan bununla ilgili örnek vermek gerekise 18 yaşını doldurmadan ehliyet alamazsınız. Burada arkada çalışan sorguya bakarsak eğer başvuranın yaşı 18’den büyükse ehliyet alabilir. Actionscript ile bunun karşılığı ise; if(basvuranin_yasi > 18) { // ehliyet alabilir. }

Burada yazım şeklinden bakarsak, 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 ehliyet alamaz... Burada arkada çalışan sorgu ise 18’den büyük değilse ehliyet alamaz. Actionscript’e bunun karşılığını da eklersek; if(basvuranin_yasi > 18) { //ehliyet alabilir. }else{ //ehliyet alamaz. }

Diğer bir konuda birden fazla cevap 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ş. }

sanalkurs 15

Örneğimize Başlayalım

Öncelikle bir arkaplan ve üzerinde hareket edecek nesnenizi hazırlayın ve hareket edecek nesnenize balon_ mc örnek ismini verin.

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

Ş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ıklandığında yukarı, aşağı tuşa basıldığında aşağıya hareket ettir.

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

İlk olarak hangi olay olduğunda kodumuzun devreye gireceğini belirleyelim. Burada olayımız klavyeye tıklandığında... Olay dinleyici ve olay olduğunda devreye girecek fonksiyonu yazıyoruz. stage.addEventListener (KeyboardEvent.KEY_DOWN,

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; }

Burada önemli olan konulardan ilki karakter kodları. Hangi tuşa bası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.

Diğer bir önemli nokta ise koşulların neler olduğudur. if...else koşullu deyiminde temel olarak kullanabileceğiniz koşullar: >, büyükse <, küçükse ==, eşitse !=, eşit değilse

Birden fazla koşul kullanmanız gerektiğinde ise; &&, ve ||, veya devreye

girecektir...

Örneğimizi Bitirelim Örneğimizin bitmiş hali aşağıdaki 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 örneği test edin. Hepinize kolay gelsin...

Beyhan Bayhan

sanalkurs 15

Farklı Bir Menü Çalışması Bu dersimizde Photoshop kullanarak simgelerin üzerine gelince hareket eden farklı bir menü çalışması yapmaya ne dersiniz? PHOTOSHOP M. ALİ YILMAZ Web Tasarımcı

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

Photoshop ile yukarıdaki gibi bir menü oluşturdum. Css kodları ile bu fotoğrafın belirli oranda gözükmesini 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=”ContentType” 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ı gereken standart bir içerik html tagları ve bildirimler yer alıyor. Ek olarak stil.css dosyamızı import ettik. (kırmızı renk ile seçilen yer ). Di-

<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 kullanacağız. <ul><li> kodları basit html listeleme kodlarıdır. PS, DW, FL ismini 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.

sanalkurs 15

Şimdilik görüntü bu şekilde. Şimdi 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 firebug 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.

Stil.css .ps,.dw,.fl{ background:url(resimler/bg.png) no-repeat;} .ps{ background-position:left 22px;} .ps:hover{ background-position:left bottom;}

Yukarıdaki gibi tüm class elemanları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.

.dw{ background-position:-86px 22px;} .dw:hover{ background-position:-86px bottom;} .fl{ background-position:right 22px;} .fl:hover{ background-position:right bottom;}

Burada gördüğünüz gibi firebug eklentisinde değer kısmını aşağı yukarı ok tuşları ile değiştiriyorsunuz. Bu konuyu daha iyi anlamak için Fatih Hayrioğlu’nun FireBug yardımı ile daha kolay CSS Sprite Uygulamak yazısını http://www.

fatihhayrioglu.com/firebug-yardimiile-daha-kolay-css-sprite-uygulamak/

adresinden okuyabilirsiniz… Hepinize kolay gelsin. İyi çalışmalar...

Ayşenur Başaran

sanalkurs 15

Bu sayımızda Tübitak Bilim Çocuk Dergisine yaptığı çizimlerle ö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

sanalkurs 15

Kendiniz bir kaç cümle ile tanı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 seviyorduk. Ö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 zorluklarla 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.

Uluslararası bir firmada grafik tasarımcı olarak çalışırken, ajanslarda olduğumdan daha güvende hissettiğimi söyleyebilirim. Sizce tasarım dünyası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 ortamın özelliklerinden bahseder misiniz?

Boş bir masa, içi dolu bir kaç kalemlik, bir kaç çizgisiz çizim defteri ve dizüstü bilgisayarım bir aradaysa benim için ideal bir çalışma ortamı oluşmuş demektir. Digital çizimlerimde tablet kullanıyorum,

sanalkurs 15

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 neler? Hangi sektör veya sektörlerde ç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.

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ımcısını da, ülkesini de doğru tahmin

edebilirsiniz. Umarım yakın zamanda özgünlüğe ve fikre verilen değer artar ve Türk tasarım ve tasarımcıları dünya çapında tanınırlar. Son olarak grafik ve tasarım eğitimi almayı planlayan öğrencilere ne gibi önerilerde bulunmak istersiniz? Grafik ve tasarım eğitimi almadan önce, ilgili bölümlerle, hocalarla, öğrencilerle ve grafik tasarımcılarla görüşmelerini öneririm. Grafik tasarım, bir çok görsel tasarım alanını kapsadığı için mezun olduklarında neler yapabileceklerini bilmeleri, doğru karar vermeleri açısından önemlidir.

. . . BENGl GENÇER KlMDlR? 1979 Ankara’da doğdu, Mersin’de büyüdü. Hacettepe Üniversitesi Güzel Sanatlar Fakültesi Grafik Tasarım Bölümü 2001 Mezunu. Freelance çalışıyor. Bir-Yay Yayınevi için masal, öykü ve ders kitapları çiziyor. Tübitak Bilim Çocuk ve Tübitak Meraklı Minik çocuk dergileri için her ay farklı konuları çiziyor. , Kağıt ve kalemi, wacom tabletini, klavye kısayollarını, filtre kahveyi, marzipanlı çikolatayı, kakaolu

keki, yeşil çayı, yemek yapmayı, sofra kurmayı, çöpü atmayı, çiçeklerle 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 kitaplarını, Can Göknil illustrasyonlarını, Picasso‘nun herşeyini, yürümeyi, Alice in Chains‘i, 90’ları, siyahı, yeşili, beyazı, zeytinyağını, meyvelerin tümünü, sabahın erken saatlerini, soğuk kumsalı ve doğayı seviyor. Evli ve mutlu!

Celal Emre Öz

sanalkurs 15

ASP.net Uygulamalarında

Loglama

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 YUNUS EMRE KESKİN Programlamacı

Bu önlemlerden birkaçı özel hata sayfaları, hata feedbacklerinin alınması ve loglama sistemi olarak düşünülebilir. Ben bu yazımda ASP.net uygulamalarında Loglama işlemini kısaca incelemeye çalışacağım. Asp.net uygulamalarında hata yönetimini sağlayabilmek için çeşitli düzeylerde loglama yapabiliriz. Sayfa düzeyinde, class düzeyinde, .dll düzeyinde. Her düzeyde yapacağımız loglama farklı olabilir. Örneğin sayfa düzeyindeki hatalar için EventLog’ları kullanabilir, 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 yazalım. Bu işlem için System.Diagnostics 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(“SourceName”, “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ısmını değiştirerek farklı loglar tutabiliriz. mylog.WriteEntry (message, EventLogEntryType.Error); } }

Kodlarımız tamam. Bu class’da bulunan logMessage methodunu sayfalarımızdaki try-catch blogunda kullanabilirsiniz. İsterseniz EventLogEntryType’ini değiştirerek gerekli yerlerde bilgi log’ları da tutabilirsiniz. Başka bir yazıda görüşmek ümidiyle...

Mehmet Aksu

sanalkurs 15

ASP.net MVC3 Sürümüne

Genel Bakış

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 YUNUS ÖZEN Programlamacı

ASP.Net MVC yapısını ilk defa görüyorsanız ve daha geniş incelemek isterseniz isterseniz Sanalkurs. net üzerinde bulabileceğiniz Boğaziçi Üniversitesi’nde gerçekleştirilen Sanalkurs Bilgi Patlamaları – 1 etkinliğinde yaptığım sunumun videolarını izlemenizi öneririm. Ayrıca http://goo.gl/DQ8AW adresinde 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 çekici 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.

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 olarak SQL Server Express Edition kullanılabiliyor. Geliştirme araçlarımız başlayabiliriz.

hazırsa

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ındıran proje şablonu ile başlayabilirsiniz.

Geliştirilmesi açık kaynaklı olarak devam eden ASP.Net MVC 3 ile geliştirme yapmak için de ücretsiz alternatiflere sahipsiniz. Visual Studio 2010 ya da ücretsiz indirilebilen Visual Web Developer Express 2010 gerekiyor. ASP.Net MVC 2 ile geliştirme yapmak için DotNet Framewrok 3.5 yeterli iken MVC 3 için Framewrok

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

sanalkurs 15

default seçenek Razor. İsterseniz ASPX Web Page de seçilebiliyor. Boş olmayan proje şablonunu seçerseniz ve View Engine seçeneğini Razor olarak bırakırsanız önceki sürümlerden Default ve About View’lerini, Home ve Account Controller’lerini gene göreceksiniz.

Yukarıda kısaca değindiğimiz Razor View Engine, Solution Explorer penceresini açınca karşımıza geliyor. 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.

İlk gözünüze çarpan yenilik ise ViewData’nın artık ViewBag olması. ViewData[“Message”] = “Welcome to ASP.NET MVC!”; ViewBag.Message = “Welcome to ASP.NET MVC!”;

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

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

Her View başında Layout seçim kodu yazılmasın diye de _ViewStart.cshtml var. Orda belirtiyorsunuz. Artık View’ler daha sade.

biteceğini de parantez takibi yaparak kendisi anlıyor. Her program kodu için <% %> kullanmanıza gerek kalmıyor.

@{ 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 yazılıyor, zaman kazandırıyor, öğrenmesi kolay ve daha az karmaşık. Razor yeni bir dil değil. C# ve Visual Basic ile kod yazmaya devam edeceksiniz. CopePlex üzerinde kodları ile birlikte büyük bir tutorial pdf eşliğinde dağıtılan MVC MusicStore uygulamasından albümlerin listelendiği sayfanın kodunu aşağıda görüyorsunuz. <% %> işaretleri yerine sadece @ işareti geliyor ifadenin başına. Foreach döngüsü gibi kod bloklarının nerede

Razor View Engine detaylarına bu yazıda çok fazla değinmek istemiyorum. O başka bir yazının konusu olacak. Yazıyı beklemek istemezseniz Sanalkurs Bilgi Patlamaları – 3 Etkinliğinde yaptığım sunumun videolarını sanalkurs.net üzerinden izleyebilirsiniz. Razor View Engine duyulunca en çok heyecan duyacağımız şey herhangi bir webserver ya da asp.net runtime gerekmeksizin unit test yapılabilmesi. TDD (Test Güdümlü Geliştirme) ile geliştirme yapanların seveceği bir gelişme. ASP.Net MVC 3 ile gelen yenilikleri konu başlıkları ile listeyelim:

sanalkurs 15

• 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 duyurulan 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 alternatiflerine göre daha fazla esneklik ve özgürlük sağladığını düşünüyorum. MVC 3’e geçmekte tereddüt edenler, MVC 2 ile geliştirme yapmaya devam edenler olabilir. Razor ViweEngine’nin henüz büyük bir gerçek dünya uygulamasında kullanılmak için biraz daha zamana ihtiyacı var gibi. Küçük projelerinizde kullanıp deneyebilirsiniz. Biz denedik. Örnek vermek gerekirse, Miks Gelişim (www.miksgelisim.com) web sitesi şu anda ASP. Net MVC 3 ve Razor View Engine üzerinde çalışıyor. Bu yazıda sizlerin Hello World yazabilmeniz için gerekli temel kavramlara değindik. Yukarıda ana başlıklar halinde listelediğimiz ASP.Net MVC 3 özellikleri hakkında yazmaya devam edeceğiz.

Üsame Çorman

Fatih Bayrakdar

sanalkurs 15

CSS’ye Giriş 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şturulan 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 İLKNUR AKPINAR Programlamacı

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

1 Seçiciler 2 Bildirim Bloğu

a Özellik b 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ında ” ; ” noktalı virgül kullanılır. Özellik ve değerler birbirinden ” : ” iki nokta ile ayrılır.

<h1> {font: medium Arial;}

Burada ilki fontun boyutunu ikincisi 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 gruplamamı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ımlaması yapacağız bunun için; p.sagadayalı{text-align:right} p.ortala{text-align:center}

Şimdi bunu sayfamıza uygulamak 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 kullanmak zorundayız. #mavi { background:blue; }

sanalkurs 15

#kirmizi { background:red; } <p id=”mavi”>Arka fonu mavidir</p> <p id=”kirmizi”> Arka fonu kırmızıdır</p>

Ö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ı

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

yapmak içindir.

Hover: mouse’nin fare üstüne ge-

lince uygulanacak işlem.

first:child: Belirtilen elementin ilk

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;}

Ç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çicileri first-letter (ilk harf): Bir blok-level

elementin ilk harfine stil tanımlması yapmak için kullanılır first-line (ilk satır) : Bir metnin ilk

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.

elementine stil atamak için kullanılır. Örneğin paragraflarınızın ilk satırlarını renklendirmek isitiyorsunuz. before ve after elementleri: Bir ele-

mentin öncesine ve sonrasına bir içerik veya özellik eklemek için kullanılır.

CSS EKLEMEK 1. Kod içine; <div style=”color:red”> yazı </ div>

</div>

kısacası kolay bir şekilde css oluşturmuş olduk.

CSS ÖZELLİKLERİ

2. Style Elementi Kullanarak;

Zemin (Background) Özellikleri

<head> içine <style> kodu ekle-

background-color: Zemine renk

yerek oluşturabiliriz.

3. Harici stil şablonu kullanarak CSS dosyamızı dışarıdan çağırabiliriz. Yeni dosya açıp içine gerekli kodlar yazıp onu da ornek.css adı ile kaydeder index.html sayfamızda ise; <link rel=”stylesheet” type= ”text/css” href=”ornek.css” /> şeklinde ç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çinde uygulamak istiyoruz; div tagları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

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 zeminin de çakılı kalmasını sağlar (scroll | fixed) değerlerini alır. Özelliği background-image ile belirlenen resmin başlangıç noktasını belirler. background-position:

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 kullanılır. size: Boyutunu belirtir. weight: Fontun kalınlık incelik du-

sanalkurs 15

rumunu belirtir.

nowrap : Block gibidir tek fark list-

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

item işareti eklemesidir.

variant: Küçük ya da büyük olaca-

Elementi gizler. Bir çok javascript uygulmasında kullanılan bir özelliktir.

belirtir.

ğı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ğini 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ğıdaki 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.

none: Element görüntülenmez.

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

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

border-top-style, border-rightstyle, border-bottom-style, borderleft-style, border-style özelliğinin her kenara ayrı ayrı atamasını yapabilmek 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, borderbottom-width, border-left-width, border-width özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır. Kenarlık rengini belirler. border-top-color, borderright-color, border-bottom-color, border-left-color. border-color:

Bu yazımızda sizlere CSS ile ilgili bazı temel bilgileri aktarmaya çalıştım. Sonraki sayıda başka bir konu ile buluşmak üzere...

Onur Mert AteĹ&#x;

Metin Kabaca

sanalkurs 15

PÜF NOKTASI BİLAL AKÇAY Yazılım Danışmanı

Elevator Pitch ya da 30 Saniyede

Ne Anlatabilirsin?

İngilizce’de Elevator Pitch, Elevator Speech ya da Elevator Presentation 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. - Merhaba Oğuz Bey, konuşmanı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.

Dinlemek istersiniz diye düşündüm. - Buyrun bu kartvizitim. E-mail adresime fikrinizi yazabilirsiniz. İyi günler. - Ama yazılı olarak tam anlatamayabilirim. - Allah Allah. Peki. Madem öyle, bak şimdi. Şu asansörü çağırıyorum. Aşağıya beraber ineceğiz. En alt kata ininceye kadar bana fikrini anlatırsan ne ala. Anlatamazsan...

Diyelim ki, böyle bir teklifle - Aslında çok güzel bir fikrim var. karşılaştınız. Anlatabilir Hatta bir proje desem daha doğru. miydiniz?

sanalkurs 15

ELEVATOR PITCH NEDİR? İngilizce’de Elevator Pitch, Elevator Speech ya da Elevator Presentation 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 anlatabilmek anlamına geliyor. Wikipedia’daki ilgili maddede bu kısa sürenin anlamı 30 saniye ya da 150 kelime olarak belirtilmiş.

İYİ BİR ASANSÖR KONUŞMASININ 9 ÖZELLİĞİ 1. Concise: Az ve öz olmalı. 2. Clear: Herkes tarafından anlaşılır olmalı.

nel olarak anlatabilmeli.

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

3. Compelling: Çözmeye

7. Consistent: Tutarlı olmalı.

çalıştığınız problemi iyi açıklamalı.

8. Customized: Farklı şekil-

4. Credible: Bu problemi çözebileceğiniz konusunda ikna edici olmalı.

5. Conceptual: Konuyu ge-

lerde anlatılabilmeli.

9. Conversational: Paragraf gibi değil, anlaşılabilir kısa cümleler veya soru cevap şeklinde olmalı.

BUNLARI KAÇ SANİYEDE CEVAPLIYORSUN? 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?

3 TEMEL BİLGİ Bir asansör tanıtım konuşmasında olması istenen üç temel bilgi var:

1 Fikir (ürün, çözüm, proje) nedir?

2 Yatırımcı için faydası

- Yazdığın program ne işe yarar?

nedir?

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

kimsiniz?

- ... konusunda fikrinizi alabilir miyim? Deneyin bakalım, 30 saniyede ne anlatabiliyorsunuz?

3 Siz (ya da şirketiniz) Bu üç bilgi için fikir ve faydayı birleştirip üçüncü olarak daha fazla bilgiye nasıl ulaşılabilir sorusunun cevabını ekleyenler de var.

100

101

Gรถzde ร ep

102

sanalkurs 15

Grup Alışveriş:

Günlük Fırsat Siteleri

Amerika’da başlayarak tüm dünyada yaygınlaşan grup alışveriş, diğer adıyla fırsat siteleri, ülkemizde de kısa sürede popü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. INTERNET MUSTAFA TANIŞIR Girişimci

103

Bu alışveriş siteleri aslında yeni bir icat değil. Sadece grup alışverişin, internet sektörüne taşınmış hali olarak tanımlanabilir. Kupon ve grup gücünün bir araya getirilmesiyle oluşturulan grup alışveriş modeli, yerel pazarları hedef alarak büyük başarılara ulaştı. Grup Alışveriş iş modelinde herkesin karşılıklı fayda sağladığı bir sistem var. İngilizce tabiriyle winwin-win. Müşterilere normal şartlarda elde edemeyeceği indirimlerle fırsatlar sunarak müşterilerin; işletmeleri yeni müşterilerle tanıştırarak işletmelerin; ve buna aracı olan fırsat sitelerinin gelir kazanmasını sağlayan bir sistem. Bu sitelerin yayınlandığı ilk zamanlarda 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ı Facebook, Twitter gibi sosyal ağlarda paylaşarak, hem arkadaşlarının büyük indirimlerden yararlanmasını sağlıyor, hem de fırsatın gerçekleşmesine katkıda bulunuyorlardı. 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 indirimlerden yararlanmasını isteyenler, fırsatları sosyal ağlarda paylaşmaya devam edecektir. Burada özellikle belli bir gruba veya belli bir ürüne yoğunlaşmış fırsat sitelerini ta-

104

sanalkurs 15

nıtacağım. Siz de aşağıdaki sitelerden kendi ilgi alanlarınıza uygun olanlara üye olarak fırsatlardan ve gelişmelerden haberdar olabilirsiniz.

KADINCAFIRSATLAR.COM Sadece kadınlara özel bir fırsat sitesi olan Kadıncafırsatlar.com’da güzellik, masaj, spor ve kuaför salonlarında büyük indirimler sizleri bekliyor. Bunların dışında yemek, dans, ve dil kurslarında indirimli fiyatlarla kendinizi geliştirebilecek-

siniz. Ayrıca bu sitede ürün bazında 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ırlanıyor.

ERKEKLERİÇİNFIRSATLAR.COM Sadece erkeklere özel fırsat sitesi olan Erkekleriçinfırsatlar.com ile halı sahalarında indirimli maçlar yapabilecek, aynı zamanda takım

105

elbise, gözlük, kemer gibi alışveriş fırsatları bulabileceksiniz. Erkeklere özgü değişik fırsatlar sizleri bekliyor olacak. Bu site de Kadıncafırsatlar gibi yakında yayına girmeyi planlıyor.

OTOPON.COM Otopon, otomobilinizle alakalı her türlü ihtiyaçlarınızı fırsat kuponları ile yakalamanızı sağlıyor. Otopon.com’da servis, bakım, lastik hizmetleri, detaylı temizlik hizmetleri, otomobil kiralama hizmetleri, sürücülük eğitimleri, otopark hizmetleri, şoför hizmetleri, transfer hizmetleri, yol yardım hizmetleri ve dahası hayır diyemeyeceğiniz avantajlarla sunuluyor.

YİYOMİÇİYOM.COM Bu fırsat sitesi sadece yeme ve içme sektörününde fırsatlar sunuyor. Şehrinizdeki restorant, cafe ve pastanelerden büyük indirimlerle

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

PİRİVETA.COM Piriveta 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, indirimli tatil keyfi yaşayabilirsiniz. Tatil deyince akla Piriveta.com gelecek.

106

sanalkurs 15

FİRMANYA.COM Firmanya sadece firmalara özel fırsatlar sunuyor. Şirketlerin ihtiyacı olan fırsatları uygun fiyatlarla sunarak şirketlerin işlerini geliştirmesine yardımcı oluyor. Ayrıca her türlü ofis ihtiyaçlarınızı Firmanya. com ile indirimli bir şekilde karşılayabilirsiniz.

GRUP.IN Kişiye özel teknolojik fırsatlar sunan bir fırsat sitesi. Netbook, laptop, 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. Teknolojiyiden indirimli yararlanmak isteyenler Grup.in’i takip edebilir.

ÖĞRENCİFIRSATI.COM Ogrencifirsati.com öğrenciler için fırsatlar sunacak bir grup alışveriş sitesi. Öğrenciler büyük indirimlerle sinema, tiyatro, cafe, restaurant, eğlence mekanları ve tatil fırsatlarından büyük indirimlerle faydalanabilecek. Bu site de yakında yayına girmeye hazırlanıyor.

107

Ahmet Tany覺ld覺z覺

108

109

Abdullah Tekin

110

sanalkurs 15

INTERNET EMİN ERYILMAZ Bilgisayar Mühendisi

111

Web’in Geleceği:

Anlamsal Web 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.

Küreselleşmenin etkisi ve teknolojinin 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 karar vermeyi destekleyen süreçlerin karmaşıklığı, bilgiye olan ihtiyacısürekli artırmaktadır. Bilgi yoğun olarak web ortamında üretilmekte ve üretilen bilgi-

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

112

sanalkurs 15

web üzerindeki bilgiler insanların anlayabileceği şekilde tasarlanmış ve sunulmuştur. Bilginin anlamının anlaşılması ve bilgiler arasında anlamsal ilişkilerin kurulmasında bilgisayarlar doğrudan yer almaz. Bu da üretilen bilgilerin sadece insanlar tarafından anlamlandırılması anlamına gelmektedir. Teknolojik olarak mevcut web ortamında sunulan içeriğin bilgisayarlar tarafından anlaşılabilir olması 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şimini düzenlemekle yetinmeyerek, bu sürece makinaların da katılabilmeleri ve yardımcı olabilmeleri” fikri üzerine olacaktı. Bu vizyon, Anlamsal Web olarak adlandırılan ve web ortamında bulunan, sadece insanlar tarafından anlamlandırılan farklı biçimlerdeki milyonlarca bilgi kümesinin bilgisayarlar tarafından işlenerek anlamlandırılmasını ön görüyor ve en iyi bilgiye nasıl erişileceği konusunda çalışmaları başlatıyor, gelişecek olan yeni bir araştırma alanının başlamasına neden oluyordu.

Anlamsal Web; bilgi bilimi, enformatik 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 üreten ve tüketen bilim insanlarını da ilgilendirmektedir. Çünkü, bu vizyonun 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 WEB Hangi 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ı hikayelerinden biri olarak karşımıza çıkıyor. WWW okul çağındaki çocuklardan, uluslararası işletmelerin en üst karar merkezindeki kişilere kadar herkes tarafından bilgi arama ve paylaşımı için kullanılmaktadır. Hayatımızı bu kadar çok etkileyen web’in en önemli karakteristikleri şöyle ifade edebiliriz: - Web dağıtık bir ortamdır. - Web dinamiktir. - Web çok büyüktür. - Web herkese açıktır.

113

Günümüzde kullandığımız web, “Web 2.0” olarak adlandırılmaktadır. Web 1.0’da bilgilerin WWW üzerinde izlenebilmesini sağlayan ve yaygın olarak kullanılan HTML sayfaları el ile oluşturulmaktaydı. Web 2.0’da ise HTML sayfaları aktifleşerek, bilgisayarlar tarafından oluşturuldu. Web’ten yararlanan pek çok kişi için bu durum yeterli olmakta ve gelinen bu nokta, web’in olgunluk çağı olarak algılanmaktadır. Ancak mevcut web teknolojilerinin 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” (knowledgeable) olacağını ve hedefin de bilginin anlamının anlaşılmasını sağlamak olduğunu belirtiyorlar. Bunun temelinde web’in yeterli zekaya sahip olmadığı düşüncesi yatıyor. Gerçekten de HTML bilgi gösterim dili, tasarımı gereği web sayfalarının insanlar tarafından anlaşılması temelinde geliştirilmiştir. Bir HTML sayfası başlık ve paragraflardan oluşurken, sayfanın içine re-

114

sanalkurs 15

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 öncesi 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 üretilme hızı ve bilgiye olan ihtiyaç düşünüldüğünde, bilginin ne anlama geldiğinin anlaşılması önemlidir ve bunun insanlar tarafından yapılması da gittikçe zorlaşmaktadır. Böylelikle bilgisayarların yüksek işlem gücünden yararlanarak, bilgilerin yapılandırılacağı, verinin anlamının kendi içinde barındırılması suretiyle anlam kazanacağı ve veri-

ler arasındaki ilişkilerin de anlamlandı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 sorgulamada, aranılan bilgi ayrı anlamları olan milyonlarca web sayfası ile eşleşebiliyor. Elde edilen arama sonuçlarından hangilerinin kullanıcının ihtiyacını karşıladığı tam olarak anlaşılmıyor. Eksik tanımlanan arama kriterleri ile yapılan sorgulamalarda 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

115

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

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

Bir başka zayıflık ise karmaşık bir web işleminde, örneğin online alışveriş sırasında ortaya çıkmaktadı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 bilgiler çıkarabilmekte iken, bilgisayar benzer eşleştirmeyi ve çıkarsamayı yapamamaktadır. Bunun nedeni, HTML açısından bunların metin ve

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

116

sanalkurs 15

3. ANLAMSAL WEB Tü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 şekillendirilmiştir; “İlk olarak web, daha fazla birlikteliğin sağlanacağı bir ortam haline gelecektir, ikinci olarak da işlemlerin bilgisayarlar tarafı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ılmaktadır. Anlamsal Web, günümüzde kullanı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 okunabilir ve anlaşılabilir olmasını sağlayacak standartların ve teknolojilerin geliştirilmesidir. Anlamsal Web sadece web sayfalarındaki bilgileri kullanan bir insan-bilgisayar ilişkisi

117

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

ANLAMSAL WEB’İN TEKNOLOJİK BİLEŞENLERİ XML XML 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 kurumun tekelinde bulunmayan XML’in ana kullanım nedeni, organizasyon 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 konuda başarı ile kullanılmaktadır: 1. XML uygulama bağımsız veri ve belge yaratmaktadı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 teknoloji olarak, bir verinin biçimlendirilmesi, tanımlanması ve verilerin yapılandırılmasında kullanılmaktadır. Dolayısı ile veriler standart bir şekilde tanımladığından, web’te veya herhangi iki program arasında veri alışverişi kolaylaşmaktadır. Bu özellikleri nedeniyle XML, Anlamsal Web’in geliştirilmesinde önemli bir konuma sahiptir.

118

sanalkurs 15

Web Servisleri Web servisleri; İnternet, intranet ve extranet üzerinde XML ve standart web protokollarını kullanarak uygulama birlikteliğini sağlayan, bilgiye erişimi kolaylaştıran, tanımlayan ve bilgiyi ortaya çıkaran yazılım uygulamalarıdır. Web servisleri, uygulamalar arasında entegrasyonu ve birlikteliği sağlayarak, iş yapmayı kolaylaştıran bir yapı sunmaktadı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ünden ve gösterimden tamamen

bağımsızdır. Farklı bilgisayar sistemleri 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 uyumlu hale gelerek, gerekli yapısal entegrasyonu sağlayacaktır. Böylelikle web servisleri, Anlamsal Web vizyonunun ilk önemli uygulama alanı haline gelecektir.

ANLAMSAL WEB’İN UYGULAMA ALANLARI Ontolojiler, B2B (işletmeden işletmeye) alanındaki bilgilerin yönetilmesi ve e-ticaret alanında önemli bir rol üstlenme potansiyeline sahiptir. Büyük elektronik ticaret gruplarının veya birlikteliklerinin

119

standartlaşmış operasyonlar yapabilmeleri için uygulamaların anlamsal olarak bilgileri paylaşabilmesi gerekmektedir. Bu da yeni hizmet ve ürünlerle sürekli gelişen, özellikle de üretici ve dağıtıcılar arasındaki ilişkilerin organize edildiği süreçleri daha verimli hale getirmektedir. Tedarikçilerle bağlantıların ve birlikteliklerinin dinamik olarak oluşturulması, otomatik iş süreçleri, şeffaf pazarlama, ürünlerin online 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 ontolojilerdir 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ığı birliktelikler, bilgi teknolojileri alanında elektronik bileşenlerin, yarı iletkenlerin tanımlandığı dikey ontolojilerdir. 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 gereklidir ve RDF gibi anlamsal web ile ilişkili teknolojileri kullanarak çeşitli modellemelerin yapılabileceği anlaşılmaktadır.

120

sanalkurs 15

SONUÇ Anlamsal Web ve Ontoloji araçlarının gelişmesi, bu alandaki uygulamaları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ğlanabilmesi ve bu bilgilerden anlamsal 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 hizmetlerinin, yeni tip aracılar tarafından sunulması ve yeni hizmet türleri-

nin ortaya çıkmasıyla sonuçlanacak 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 ilgili ç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 ortak çalışmasını gerektiren bir dizi karmaşık süreç ile baş edilebilmesine bağlıdır.

121

Abdullah Tekin

122

123

Soner Demirsoy

124

sanalkurs 15

Güncel SEO Teknikleri

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

İNTERNET İSA PEHLİVANLI Web Uzmanı

125

Bir sitenin başarılı olması için önemli 3 etken vardır: 1- İçerik, 2SEO, 3- Reklam. Şimdi bunların üzerinde duralım.

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

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

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

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 üzerinde oynamalar, editlemeler yaparak kendi sitelerinde bu içerikleri 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üzenleyerek sitenizde yayınlama yolunu da tercih edebilirsiniz.

Güncel İçerik : Sitenizi en az 3

günde bir güncellemelisiniz. Eğer imkan var ise, her gün güncellemeniz sitenizin yararına olacaktır. Bu demek oluyor ki, ne kadar sık güncelleme, o kadar çok indekslenme. İndekslenmenin sonucunda

126

sanalkurs 15

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

2- SEO (Arama Motoru Optimizasyonu)

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

Site İçi SEO: Site içinde, tasa-

3- Özgünlük: Özgün tasarım

1- Uygun Alan Adı: Sitenizin ko-

(CSS + Ajax) ve özgün script kullanılmalıdır. Web master arkadaşların en çok yaptıkları hatalardan biri de hazır template tasarımlar veya hazır scriptler kullanmaktır. Tasarım ve script konusundada özgünlük çok önemli bir etkendir.

rımda ya da script’te yapılan taktikler demektir. Bunların belli başlı kriterleri vardır: 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

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

127

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) kullanı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 yukarıda anlattığım gibi her sayfada farklı, yani sayfanın ya da içeriğin veya makalenin konusuna, içeriğine göre metatag’lar kullanınız. Ve önemli bir husus daha: Bu metatag’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çıklayım: Diyelim ki, konusu “Boing 737” olan bir makaleniz var. Uygun sayfa başlığı “www.siteadi.com/boing-737” ya da “www.siteadi.com/ boing-737.html” olmalıdır. Sitenizin sayfalarında PHP script’lerde kullanılan (.htaccess) dosyası yöntemi ile sayfalarınız “www.siteadi.com/ icerik/” ya da “www.siteadi.com/içerik.html” şeklinde isimlendirilmelidir.

7- Site Haritası: Sitenizin mut-

laka site haritası, yani sitenizdeki tüm linkleri listeleyen bir sayfası olması gerekir. Aynı zamanda sitenizin bir XML site haritasına sahip olması gerekir. Bu XML harita Google webmasters’a tanıtılarak Google botlarının sitenize daha kolay erişmesini ve tüm

128

sanalkurs 15

Site Dışı SEO: Bu-

nunla ilgili bilinmesi gereken belli başlı noktalar şunlar: 1- Sitenizi Google Webmastes’a kayıt edin. 2- Sitenizi Dmoz’a kayıt edin. 3- Sitenizi dizinlere ve toplistlere kayıt edin. sayfalarınızı gezmesini amaçlar.

8- Spamlardan Uzak Durmak: Webmaster’ların en çok yaptığı hata 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 sitenizin konusu ile alakalı 3-5’den fazla aynı yazıdır, ya da aynı içerik ama farklı metataglar ile yalancı sayfalar veya aynı içerik, aynı metatag, farklı sayfa ismi ile hazırlanmış yalancı 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.

4- PR6, PR5 blog türevi sitelere yorum ile beraber linkinizi ekleyin. (3 günde 1 tane gibi...) 5- Aynı içerikli siteler ile çapraz link değişimi yapın. (3 günde 1 tane gibi...) 6- Aynı içerikli sitelerden karşılıksı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 sitenizin google sıralamasıda buna indexli olarak yükselecektir. Ancak sitenize link alımlarında dikkat etmeniz husus aşırıya kaçmamanızdır. Hele hele yeni açılmış sitelerinize link almak çok sakıncalıdır. Böyle bir yanlışlık yapar iseniz sandbox yersiniz muhtemelen. Ayrıca sitenize link alımı ya da çapraz

129

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

araba sitesine reklam vermek gibi.

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

1- Google Adword’a reklam verebilirsiniz.

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

3- Reklam: Şüphesiz ki reklam, sitenizin hitini arttıracak ve sitenizi tanıtacak bir unsurdur. Ama önemli olan hedef kitlenize ulaşabilmektir. Örnek olarak, araba siteniz var ise

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

2- Aynı içerikli sitelere banner ya da pop up reklam verebilirsiniz. 3- Aynı içerikli sitelerin üye maillistlerine ü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.

130

131

Serkan Ĺ&#x17E;ahin

132

sanalkurs 15

En Çarpıcı Facebook Yenilikleri 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. FACEBOOK MUSTAFA ÜLKÜ Yazılım Uzmanı

133

Yeni Mesaj Sistemi Yeni mesaj sistemi yavaş yavaş devreye alınıyor, ancak yeni profile 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 profilinizde 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 sistemi aşağıdaki özelliklere sahip olacak:

Hızlı Gönderim: Sadece Enter

tuşuna basarak mesaj gönderebileceğiniz için, anlık mesajlaşma kadar hızlı bir aksiyona sahip.

Öncelikli

Posta:

Daha önce Gmail’de olduğu gibi (Öncelikli E-posta) yakın olduğunuz kişilerden gelen mesajlar posta listelerinde öncelikli yer alacak.

Arama: Konuştuğunuz kişi veya

mesajlaştığınız kişi ile aranızdaki mesajlaşma ve Facebook üzerinden 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öylenen 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 imkanı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 edeceği de kesin. Bu eleştirilere bakacak olursak:

Tutarsız Sonuçlar: Arama so-

nuçlarının tutarlı ve istenilen sonuçta olmaması.

Tek Başlık: Bir kişi ile olan tüm

mesajların tek başlık altında toplanması da kullanıcılar tarafından pek hoş karşılanmış değil.

Listeleme Zorluğu: Mesajlarda

tutarlılık ortadan kalkmış gibi duruyor ve listeleme gibi bir imkan yok gibi.

134

sanalkurs 15

Yeni Like (Beğen) Düğmesi ‘Beğen’ butonu artık ‘paylaş’ butonu oldu. Geçtiğimiz günlerde profillere yansıyan yenilik, Facebook tarafından bir test çalışması olarak açıklandı. Ancak test aşamasında kalacağı pek sanılmıyor. Facebook’un yaptığı değişikliğe göre artık beğen butonuna tıkladığınızda Facebook profilinizde eskisi gibi tek satırlık bir yazı yerine 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 edilmiyor. Çünkü kullanıcılar aslında artan sosyal ağ hizmetlerinde biraz daha sadelik ve akıcılık görmek istiyorlar. Yeni Like akıcılık ve sadelikten çok bir paylaşım kirliliği ortaya çıkartmış durumda.

Temmuz 2010’da 500 milyon üyeye ulaşan Facebook’un aynı ay başındaki istatistiği her gün 65 milyon kullanıcının Facebook Beğen butonunu kullandığını gösteriyordu. 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/status/ adresini ziyaret etmeniz gerekiyor.

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

135

Facebook, sayfalar noktasında da farklı bir bakış açısı yakaladı denilebilir, ki Facebook sayfalarını kullanan ş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ürmenize imkan tanıması. Yeni tasarımla beraber isterseniz profilinizi yönetici olduğunuz sayfaya çevi-

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

FBML yerine IFRAME: Facebook ayrıca kendi uygulamalarına yönelik 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şiklik yapsa bile çok konuşulan Facebook, sürekli yenilikler ekleyerek gündemde kalmayı sürdürecek gibi görünüyor.

136

137

Anıl Yüncü