Harika Web Tasarımı Yaratıcılığı: 50+ Örnek ve İlham Kaynağı

Bu yazıda web tasarımı ve geliştiricileri için yaratıcı örneklere ulaşabileceksiniz. Aynı zamanda html ve css ile ilgili bazı dersler bulunmaktadır. bunlar size ilham kaynağı olacaktır.

1 – Padding Top (ders)

2 – Text Shadow (metin gölgelendirme) (ders)

3 – Z-Index (ders)

4 – List-Style-Type (ders)

5 – Import Libraries (kütüphaneleri içeri aktarmak) ders

6 – Web Design Drawing (Web tasarım çizimi)

7 – Syntax Error (Sözdizimi hatası)

8 – Desk (masa)

9 – End Smile (gülümseme sonu)

10 – Vera Graphic Design (vera grafik tasarımı)

yazının devamı için buraya tıklayın.

World Wide Web

Dünya Çapında Web (İngilizce: World Wide Web, kısaca WWW veya web), örümcek ağları gibi birbiriyle bağlantılı sayfalardan, İnternet üzerinde çalışan ve “www” ile başlayan adreslerdeki sayfaların görüntülenmesini sağlayan servistir.

İnternet ve web terimleri aynı olguyu tanımlamaz. Zira web sadece internet üzerinde çalışan bir servistir. Web kavramı, CERN’de bir bilgisayar programcısı olan Tim Berners-Lee’nin HTML adlı bilgisayar dilini bulup geliştirmesiyle oluşmuştur. Bugün de kendisinin başkanı olduğu W3C (World Wide Web Consortium) tarafından idare edilmektedir. WWW, 1994 yılından beri hızla büyümekte, kullananların yaş aralığı genişlemektedir.

“Kaynak: Wikipedia”

© 2005 – 2009 wolkanca. Bu yazi blog.wolkanca.com adresinde yazildi, sitenin yazilari yalnizca izin alinmak kaydi ile alinti yapilabilir ve yayinlanabilir.

Bunu okuyan şunları da okur;

• Zoque 9 yaşında (3)
• Yuvaariyorum.org (0)
• Yutub Türkçe bilen elaman arıyormuş (5)
• Youtubenin 2006 da ki en iyi videoları (2)
• Youtube’u protesto edelim (25)

firefox 3.5 ile web geliştiricileri sevinecek

Firefox 3.5 ile web geliştiricilerinin yüzü gülecek

Mozilla tarafından geliştirilmekte olan Firefox 3.5 sürümü web geliştiricilerinin yüzünü güldürecek cinsten yenilikler ile gelmeye hazırlanıyor. Birçok gelişmekte olan web standartını destekleyecek biçimde piyasaya çıkacak olan Firefox 3.5, tasarımcıların hünerlerini sergileyebilmesi için birçok olanak sunacak.

Firefox 3.5 ile desteklenecek standartlar ve yapılacak yenilikler aşağıda listelendi.

HTML5 desteği
Daha önce yeni html5 tag’leri ve kullanım şekilleri yazısında belirtilen özelliklerin bir kısmı firefox 3.5 ile kullanılabilir olacak.

• Audio ve video tag’leri desteklenecek.
• Siteler arasında sürükle ve bırak (drag & drop) özelliği etkin olacak.

CSS cephesinde gelişmeler

• @font-face desteklenecek. Sitelerdeki font’lar ziyaretçilerin bilgisayarlarına indirilip siteler her font ile sorunsuzca görünebilecek.
• ::before ve ::after geliştirilecek
• media sorgulamaları geliştirilecek
• -moz-opacity desteği kalkacak. opacity özelliği eklenecek
• text-shadow ile yazıları gölgelendirme desteklenecek
• word-wrap özelliği eklenecek
• ziyaretçinin bilgisayarında tanımlanan link bilgilerine ulaşım için -moz-nativehyperlinktext desteği gelecek
• -moz-window-shadow desteği gelecek
• -moz-transform desteği gelecek

devamını oku »

ilgili yazılar

• FİREFOX UZATMASI ÖTÜCÜ KUŞ (0)
• Aptana Studio 1.0 (9)
• Aptana Jaxer – Dünyanın İlk AJAX Sunucusu (11)
• yeni html5 tag’leri ve kullanım şekilleri (8)
• programcıların ilacı: gotapi (6)
• flash mı, javascript mi? (3)
• google syntax highlighter for wordpress (eklenti) (4)
• Html Dom Üzerine Türkçe Notlar (0)
• Web tasarımcıları için kopya kağıtları (3)

bu yazı basarozcan tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. kaynak gösterilmeksizin kopyalanamaz.

etiketler: font, mozilla, css, video, javascript, firefox, audio, html, js, dom, standart, css3, html5, json, sürükle ve bırak, drag and drop, opacity, font face, geolocation, firefox 3.5, css2.1

MVC (Model View Controller, Model Bakış Kontrolcü)

Yazan : Şadi Evren ŞEKER

Yazılım mühendisliğinde kullanılan bir mimari yaklaşımdır. Basitçe yazılımın tasarımı ve geliştirilmesi aşamalarında etkili olan bir bakış açısını yansıtır.

Bu bakış açısına göre kullanıcı ara yüzü (user interface) ile iş mantığı (business logic) birbirinden ayrı olmalıdır. Yani kullanıcıların önündeki ekranların tasarlanması ve geliştirilmesi sırasında kullanıcı gözüyle analiz yapılmalı ve bu analize göre kullanıcıya en kullanışlı (user friendly) ekran tasarımı yapılarak geliştirilmelidir. Arka tarafta ise iş mantığı (business logic) gözetilmeli ve kullanıcı ara yüzlerinden bu mantığa bağlantı kurulmalıdır.

MVC yaklaşımı 3 parçadan oluşur bu parçalar isminde de geçen :

• Model (Model)
• View (Bakış)
• Conroller (Kontrolcü)

parçalarıdır.

Bu parçalardan model, bilgiyi (information) veya veriyi (data) göstermek için kullanılır. View (Bakış) ise kullanıcı ara yüzünü ve kullanıcının sistem ile olan iletişimini ele alır. Controller (Kontrolcü) ise sistemin veri akışını ve bu verinin model ile olan bağlantısını kontrol etmek amacıyla kullanılır.

Yukarıdaki şekilde bu parçalar arasındaki bağlantı görülmektedir. Model parçasında modellenen veriye view(Bakıştan) doğrudan erişim bulunurken kontrolcü parçası iki parçaya da erişerek kontrolü sağlamaktadır.

MVC yaklaşımını gerçek hayattan bir örnek ile anlatmak gerekirse. Örneğin bir web sayfasının geliştirilemsi sırasında Bakış katmanı genelde HTML dilinde üretilir. HTML dilindeki bu sayfaları üreten sunucu tarafında bir kodlama (örneğin PHP, JSP veya ASP gibi) bir katman bulunur ki bu katmana kontrolcü (controller) ismi verilir. Son olarak verinin tutulduğu ve modellendiği bir katman da bulunur ki bu katmanada Model ismi verilir. Dolayısıyla MVC yaklaşımına göre bazı teknolojilerin katmanlandırılması aşağıdaki şekilde olabilir:

Yukarıdaki katmanlar birer örnek olarak düşünülüp farklı teknolojilerinde burada kullanılabileceği unutulmamalıdır.

Günümüzde .NET J2EE gibi ortamları MVC mimarisine uygun geliştirme ortamları olarak görmek mümkündür. Ayrıca bu ortamlarda birden fazla MVC alternatifi çerçeve (Framework) de bulunmaktadır. Örneğin J2EE ortamı için JSF (Java Server Faces) , Structs, JSP gibi alternatifler sayılabilir.

Kurumsal Websiteleri Hakkında 10 Acı Gerçek

Hepimiz web sitelerimizi yönetirken hata yaparız. Ancak bu hataların doğası kurumunuzun büyüklüğüne göre değişir. Şirketiniz büyüdükçe, hatalar da değişecektir. Bu makale büyük boyutlu kurumların web sitelerinde karşılaşılan hataları incelemektedir.

Birlikte çalıştığım müşterilerin pek çoğu büyük boyutlu kurumlardır: Üniversiteler, büyük vakıflar, kamu sektörüne ait kurumlar ve büyük şirketler. Geçtiğimiz 7 yıl süresince bu kurumlarda sürekli tekrar eden yanlış fikirlere rastladım. Bu makalede bu yanılsamaları kaldırmayı ve insanları acı gerçekle yüzyüze getirmeyi planlıyorum.

Eğer bu yazıyı okuyorsanız, zaten burada listelenecek problemlerin de farkındasınızdır. Ama umarım bu makale, şirketinizdeki diğerlerini ikna etmenize yardımcı olacaktır. Her durumda, web siteleri ve büyük boyutlu kurumlar hakkında 10 acı gerçekle yazımıza başlayalım.

1. Ayrı Bir Web Bölümüne İhtiyacınız Var

Pek çok şirkette web siteleri, ya pazarlama ya da BT birimleri tarafından yönetilmektedir. Ancak bunun sonucunda web siteleri kaçınılmaz olarak şirket içi politikaların bir parçası haline gelmektedir.

Gerçekte, bir web stratejisi için baskı yapmak bu her iki grubun da işi değildir. BT belki karmaşık sistemler oluşturmak için çok yetenekli olabilir, ancak bu, onların kullanıcı dostu bir web sitesi oluşturabilecekleri ve bir çevrimiçi kimlik yaratabilecekleri anlamına gelmez.

Zeldman, kurumların ayrı bir web birimi sahibi olmalarını telkin ediyor.

Öte yandan pazarlama biraz daha iyidir. Zira Jeffrey Zeldman’ın da makalesinde Bırakın web birimleri olsun makalesinde belirttiği gibi:

Web bir diyalogdur. Pazarlama ise tam aksine monologdur. Ardından tüm o semantik kodlama, CSS, zarar vermeyen betikleme, kart dizme egzersizleri, HTML çalışmaları, kullanıcıları erişilebilirliğe dahil etmek ve pazarlama birimlerinin ilgi ve yetenek alanına girmeyen daha pek çok ince ayrıntı gelecektir.

devamını oku »

ilgili yazılar

• 47 adet webmaster aracı (0)
• AT&T Logosu evrim geçirdi (6)
• Web Tasarımı Harika Olan Teknoloji Şirketleri (1)
• Web sitesi eklentileriyle , sitenizi zenginleşt… (0)
• Desen (pattern) siteleri (4)
• ücretsiz template (0)
• 27 Photoshop Web Site Tasarımı Dersi (8)
• 17 tasarım örneği; Bulutlar ve Mavi Gökyüzü (3)
• Web tasarımcıları ve geliştiricileri için kayna… (2)

bu yazı pinkfloyd tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. kaynak gösterilmeksizin kopyalanamaz.

etiketler: tasarım, kurumsal, web, web tasarım, web design, web tasarımı, marka, kurumsal kimlik, brand, web site, website, web sitesi, web site design, branding, kurum, brand value, website düzenleme, marka imajı, marka stratejisi, kurumsal tasarım, website management, website yönetimi, web sitesi düzenleme, web sitesi yönetimi, design management, web tasarımı yönetimi, kurumsal web sitesi, marka kimliği

Firefox İçin Mükemmel Flickr Eklentileri

Bir servis ne kadar güzel olursa olsun, birkaç güzel ince ayarla o servis daha da güzel hale getirilebilir ve popüler fotoğraf paylaşım sitesi Flickr‘ın da bu açıdan diğer servislerden herhangi bir farkı yoktur.

Yazının devamında bulacağını Flickr için 15 adet Firefox Eklentisi sayesinde gezintiden fotoğraf göndermeye, Flickr’ı engelleyen ülkelerden ilgili servise erişebilmeye ve çok daha fazlasına ulaşabileceksiniz. Listeye bir göz atın. Flickr deneyimini daha da iyileştirecek bir eklenti bulacağınızdan eminim.

Siz hangi Flickr eklentilerini kullanıyorsunuz? En beğendiğiniz eklentileri yorumlarınızda belirtmeyi ihmal etmeyin.

Access Flickr!: Eğer İran, Birleşik Arap Emirlikleri ya da Çin gibi bir ülkede yaşıyorsanız ve Flickr’a erişemiyorsanız bu eklentiyi kullanarak ilgili ülkelerin firewall sınırlamalarını aşabilir ve Flickr’a sorunsuzca erişebilirsiniz.

Better Flickr: Better Flickr, fotoğraf büyüteci, küçük resim iyileştirici, zengin düzenleme ve daha pek çok Greasemonkey eklentisini bir araya getiren bir eklenti. Tek yapmanız gereken, Flickr’a eklemek istediğiniz özelliklerin onay kutucuklarına birer birer tıklayarak özellikleri etkinliştirmek.

Fireflix: Flickr ile birlikte çalışan bir yan çubuk (sidebar) eklentisi olan Fireflix sayesinde yerel dosyalarınız üzerinden Flickr’a görsel gönderebilir, bağlantılama için HTML kodu oluşturabilir, fotoğraf akışları üzerinde arama yapabilirsiniz.

devamını oku »

ilgili yazılar

• SEO Uzmanları İçin Popüler Firefox Eklentileri (10)
• Wappalyzer: Bir Web Sitesinde Hangi Uygulamalar… (3)
• Hayatınızı 7 Kat Kolaylaştıracak 7 Firefox Ekle… (9)
• YouPlayer ile hem video izle hem internette gezin (4)
• Firefox ile 2500 Nintendo Oyun (10)
• Firefox eklentisi: Password Hasher (0)
• firefox eklentisi : screengrab (18)
• 2009′da Kullanmanız Gereken 21 Firefox Eklentisi (18)
• Saniyede 12 bin fotograf gösterimi (7)

bu yazı pinkfloyd tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. kaynak gösterilmeksizin kopyalanamaz.

etiketler: fotoğraf, flickr, firefox, firefox eklentisi, fotoğraf paylaşımı, fotoğraf paylaşma, firefox addons, firefox eklenti, fotoğraf paylaşım, firefox addon, photo sharing, flickr com, firefox eklentileri, firefox add ons, firefox plugin, firefox plugins, flickr tarayıcısı, flickr explorer, flickr api, photo share, flickr yükleme, fotoğraf indirme, flickr photos, flickr foto, flickr resimleri, flickr download

Yeni Adobe Creative Suite 4

Yeni Adobe Creative Suite 4 ailesi dün Adobe tarafından tanıtıldı. CS4 Design Premium, Web Premium, Production Premium ve Master Collection adı altında dört farklı paket sürümü ile geliyor. CS4 içinde yer alan programların yeni özellikler inanılmaz güzellikte. Gerçi ben hala Trial sürümleri indirip deneyemedim. En kısa zamanda indirip canlı olarak deneyeceğim ama bu yazımda CS4 ailesi içindeki bazı programların gözüme çarpan yeni özelliklerine değineceğim.

Adobe Photoshop

CS ailesinin amiral gemisi sayılabilecek Photoshop bir önceki CS sürümündeki gibi Photoshop ve Photoshop Extended adı altında iki ayrı versiyon ile satılmakta. Her iki sürüm arasındaki farklılıkları buradaki sayfadan öğrenebilirsiniz. Fakat ben burada Photoshop Extended’daki özelliklerden bahsedeceğim (nasılsa diğer sürümdeki özellikleri kapsıyor değil mi?).

Adobe hemen hemen her sürümde Photoshop’un arabiriminde mutlaka bir değişikliğe gidiyordu. Anlaşılan bu sürümde de bu huyundan vazgeçmemiş görünüyor ve Photoshop CS4′u yenilenmiş arabirim ile bizlere sunuyor. Açıkcası Photoshop’u -az önce de dediğim gibi- kurup inceleyemediğimden dolayı tam bir yorum yapamayacağım ama görebildiğim kadarıyla yeni arabirim gayet iyi. Arabirimde ilk dikkatimi çeken üst kısımdaki sekmeler oldu. Daha önceden dökümanlar arasında kaybolup duruyorduk. Sekmeler sayesinde bu sorun ile artık daha az karşılaşacağız gibime geliyor. Bu arada bu sekme özelliği sanırım diğer programlarda da mevcut.

Açıkcası Photoshop’un en çok ilgimi çeken Akıcı Tuval Yönü denen yeniliği oldu. Bu yenilik sayesinde tuvalimizde birtakım değişiklikler meydana geldi. Mesela önceki sürümlerde tuvalimize sadece %1600 boyutunda yakınlaştırma yapabiliyorduk. Oysa tanıtım videosundan gördüğüm kadarıyla tuvaldeki görselin piksellerine kadar yakınlaştırma yapabiliyoruz. Diğer yandan Rotate View Tool ile tuvalimizi 360 derece açıyla döndürebiliyoruz ki bu da çok ilginç bir özellik.

Bir diğer yeni özellik olan İçerik Bilinçli Ölçekleme ile Photoshop’ta görselleri yeniden boyutlandırırken içeriğin de boyuta göre yeniden şekilleniyor. Bunun pratikte işe yarayıp yaramayacağını bilmiyorum. Ama yararlı bir özellik gibi görünüyor. Herneyse ilerleyen günlerde deneyip göreceğiz.

Sık sık fotoğraflarla uğraşan kullanıcıların beğeneceğini düşündüğüm yeni Ayarlamalar Paneli sayesinde önceki sürümlerde birçok menü altında kaybolup levels, curves, brightness&contrast vs. ayarlamak artık tarih oldu. Adjustment adlı panel sayesinde bütün bu ayarlamaları menüler altında kaybolmadan kolayca yapabileceğiz artık.

Bir de bu Photoshop CS4′ün çıkmadan önce bir yerde Photoshop’un bilgisayarımızın GPU’sunu kullanacağını okumuştum. Ama nedense Adobe’nin yayınladığı özellik listesinde bu ibareye rastlayamadım. Photoshop’un yeni ve geliştirilmiş bütün özelliklerini bu sayfadan okuyabilirsiniz.

Adobe Illustrator

Adobe Illustrator vektör tabanlı programlar arasında -bana göre- kullanıcıya en iyi imkanları verebilen vektör çizim programıdır. Ben de vektörel çalışmalarımı (bazılarını çalışmalarım sayfasında bulabilirsiniz) Illustrator ile yapıyorum. Bunun birçok nedeni var ama en önemlisi sanırım Photoshop’a benzer arabirimi sayesinde kolay kullanımı ve dolayısıyla da kolay öğrenilebilir bir yapıya sahip olmasıdır.

Yeni Illustrator’de gradientlerde (Türkçesi ile degrade) büyük değişiklikler oldu. Artık oluşturduğumuz gradiantlardaki renk duraklarında şeffaflık belirleyebileceğiz. Bundan önce böyle bir özellik yer almıyordu Illustrator’de. Açıkcası bu durumu ben de önceden Illustrator’de çalışırken farketmiştim ve biraz da canımı sıkıyordu. Kısacası artık bu sorun yok ve gradientlerimize şeffaflık verebiliyoruz.

Yine Illustrator’de gradientlerin açı, konum ve boyutunu çalışılan nesne üstünde kolayca ayarlayabileceğimiz yeni bir özellik gelmiş. Daha önce Gradient paletinde kırk takla atarak çeşitli manevralarla yaptığımız değişiklikleri artık daha kolay yapabileceğiz.

Burada yazamadığım daha birçok yenilik Illustrator’de yer almakta. Yanlız Adobe’nin hala Illustrator’e çoklu sayfa özelliğini koymamasını biraz garipsedim. Keşke InDesign’daki o güzel özellik Illustrator’de de  olsaydı. Ama yine de Hot Door‘un Illustrator için geliştirdiği Multipage eklentisi sayesinde bu özelliği Illustrator’e katabiliyorsunuz.

Adobe Fireworks

Fireworks’de de diğer Adobe ürünlerinde olduğu gibi yeni özellikler geldi. Bir önceki Fireworks CS3 sürümündeki arabirimde eski Macromedia’nın arayüz tarzı ağır basıyordu. Bu sürümde nihayet Fireworks’un arabirimi tamamen yenilenerek Fireworks’un arabirimine Adobe’nin bakış açısı hakim oldu.

Fireworks’le pek çalışmadığım için bir önceki sürümde tasarımı otomatik HTML’ye dönüştürürken tam bir CSS desteği verip vermediğini veriyorsa ne denli verimli çalışıyor bunu bilmiyorum. Ama bu sürümde Adobe’nin iddia ettiğine göre web tasarımınızı tek adımda CSS tabanlı HTML dosyalarına dönüştürmeniz mümkünmüş. Gerçi hiçbir zaman bu tip yöntemleri tasvip etmiyorum (bunun XHTML KITCHEN‘da çalışmam ile alakası yok arkadaşlar ). Elle yazılan kod her zaman otomatik oluşturulan koddan daha iyidir. Herşey elinizin altında olur, kontrol sizin elinizdedir falan (daha birçok neden yazılabilir aslında )… Ama bu özellik sayesinde bu işten hiç anlamayan kullanıcılar için yararlı bir fonksiyon olmuş.

Yeni özellikler arasında tasarımınızı şifre korumalı olarak PDF dosya biçiminde dışarı aktarabiliyorsunuz. Hatta görüntüleme, baskı, kopyalama vs. gibi işlemler içinde ayrı olarak şifre belirleyebiliyorsunuz. Bu özelliğin diğer CS4 programlarında olup olmadığını bilmiyorum ama umarım vardır. Çok güzel bir özellik değil mi? Bence harika…

Adobe’nin bildirdiğine göre yeni Fireworks bir önceki sürüme göre daha performanslıymış. Bir önceki Fireworks’u ben de denerken kimi zaman bazı işlemlerde yavaşlığını farkediyordum. Bu da yararlı bir gelişme olmuş.

Fireworks’da bir önceki sürümün aksine metin motoru olarak Adobe’ninkini kullanıyormuş. Sanırım diğer Adobe programlarında olan anti-alias, paragraf ayarları seçenekleri gibi özellikleri artık Fireworks’da da kullanabileceğiz.

Kısacası Fireworks bu sürümle bayağı bir olgunlaşmış. Hatta kimi zaman Photoshop’u bırakıp Fireworks’a mı geçsem web tasarımlar için diye düşünmüyor değilim.

Adobe Dreamweaver

Dreamweaver’ı kullanmayalı bayağı oluyor. Bundan sonra da kullanmayı açıkcası düşünmüyorum. Çünkü WYSIWYG tarzı editörlere hiç ihtiyaç duymuyorum. “Ben Kimim?” sayfasında da yazdığım üzere çoğu işlerimde E Text Editor adlı programı kullanıyorum. Yine de Dreamweaver’da ilgimi çeken birkaç yenilik oldu. Bunlardan bahsetmem yararlı olacak.

Bundan önce bir sürü basit editörler de bile yer alan Subversion özelliği (geçenlerde bu konu hakkında Eren Emre bir yazı yazmıştı) nihayet Dreamweaver’a teşrif etmiş bulunmakta. Geç olsun güç olmasın diyerekten bu özelliğin önemli olduğunu belirtmekte fayda var.

Adobe, Dreamweaver’a Akıllı Nesneler adında yeni bir özellik eklemiş. Bu özellik sayesinde herhangi bir PSD belgesini Dreamweaver’daki çalışmanıza sürükleyerek bağlayabiliyorsunuz. Daha sonra bu bağladığınız belgeyi Photoshop’dan düzenlediğinizde Dreamweaver’a geçip hemen güncelleyebiliyorsunuz.

Bundan başka Dreamweaver’ın da arabirimi değişikliğe uğramış (biliyorum şaşırmadınız xD). Daha önce 3 adet olan görünüm kipleri arttırılmış ve 8′e çıkarılmış.

Adobe Flash

CS3 ailesi içinde belkide en çok yenilikle gelen program Flash’dır. Flash’daki yeni özellikler inanılmaz güzel görünüyor. Genel olarak görebildiğim kadarıyla bu sürümde animasyon konusunda bayağı gelişme sağlanmış.

Nesne Tabanlı Animasyon denen yeni Flash özelliği sayesinde Motion Tween tekniğiyle uyguladığınız animasyonları sahnedeki bir eğri yardımıyla kolayca gerçekleştirebiliyorsunuz. Bu yeni özellik gerçekten harika olmuş. Daha önceki sürümlerde bu tür olaylar tam eziyetti.

Öte yandan yine animasyon konusunda yarar sağlayacak Kemik Aracı adı altında yeni bir aracı bizlere bahşetti Adobe. Bu sayede daha önce 3D programlarda gördüğüm kemik editörü benzeri bir aracı Flash’da da görüyoruz.

Bir başka yeni özellik ile sahnemizdeki 2D nesneleri 3D çevirme ve döndürme araçları ile 3D animasyon yapabiliyoruz.

Yine ilgimi çeken güzel bir araç geldi Flash’a. Adı Spray Brush Tool olan bu araç ile herhangi bir sembolü sahnemize püskürtme şeklinde yerleştirebiliyoruz.

İzlenimlerim

Yeni Adobe Creative Suite 4 hakkında izlenimlerim genel olarak olumlu yönde. Şahsen yeni özelliklerden tatmin oldum diyebilirim. Siz bu konuda ne düşünüyorsunuz bilmek istiyorum doğrusu. Yeni özellikleri beğendiniz mi? Beğenmediğiniz yönleri neler? Eğer siz de CS4 ailesi içinde yer alan programları deneyebildiyseniz veya yukarıdaki yazımdan okuduğunuz kadarıyla edindiğiniz izlenimleri burada yorum olarak yazabilirsiniz.

Bu yazı Fatih Turan tarafından 25 Eylül 2008 17:17 tarihinde yazıldı. 5 yorum var.

Geçerlilik Testi Gerçekten Gerekli mi?

W3C Validator yani Türkçesiyle geçerlilik testi web standartlarıyla alakadar olan web tasarımcı ve web geliştiricilerinin sık sık kullandığı bir araçtır. Hani sağda solda da çok görüyoruz işte “XHTML/CSS Valid” diye ikonlar, bannerlar yerleştiriliyor site ve blogun altında geçerlilik testinden geçildiğini belirten. Kimimizin hiç umrunda olmayan kimimizin de aşırı derecede fanatikliği yapılan ve adeta bir minik bir pazarlama aracı olarak kullanılan (bu kötü birşey mi ayrıca tartışılır aslında xD) bu test.

Peki geçerlilik testi gerçekten gerekli mi? Bu soruya cevap vermeden önce gelin geçerlilik testinin ne olduğunu, yararlarını ve bu konu hakkında nasıl bir yöntem izleyebiliriz bunları inceleyelim. En sonunda da bu soruya cevap verelim.

Geçerlilik Testi Nedir?

Geçerlilik testi yazdığımız HTML, XHTML veya CSS dosyalarının W3C Birliği tarafından oluşturulan kurallara göre yazılıp yazılmadığını ve eğer hata yaptıysak nasıl düzeltileceğine ilişkin önerileri getiren yine W3C Birliği tarafından yaratılan interaktif bir test uygulamasıdır.

XHTML dosyalarını geçerlilik testine tabi tutmak için buradaki aracı, CSS dosyalarını geçerlilik testine tabi tutmak için ise buradaki araç kullanılır.

Yararları Nelerdir?

Geçerlilik testinin yararlarını ve dolayısıyla W3C Birliği’nin oluşturduğu kurallara uyarak elde edeceğiniz yararları listelemek gerekirse:

• Geçerlilik testi sonucunda çıkan sorunları çözmeniz karşılığında tarayıcılar arasındaki oluşabilecek görünüm farkı olasılığını aşağıya çekmiş olursunuz.
• Hataları düzeltilmiş ve kurallara uyan HTML veya XHTML sayfası ile daha temiz ve düzenli kodlara sahip olursunuz.
• Daha temiz ve düzenli kodlardan oluşan sayfalar da SEO açısından önemlidir. Yani Google sayfanızı daha iyi indeksler.
• Geliştirme süreciniz hızlanır. Eğer bir web uygulaması geliştirmeyi düşünüyorsanız muhakkak işin içinde JS, DOM gibi teknolojileri de kullanacaksınız demektir. Yazım yanlışları ve kuraldışı kodlar içeren HTML veya XHTML sayfalarınızın olduğunu bir düşünün. Bu sayfalara bağlı JS kodları yazdığınızda muhtemelen birtakım sorunlarla karşılaşacaksınız. Bu sorunlar da sizin zamanınızı ve paranızı alıp götürecektir.
• Olası gözden kaçan yazım hatalarını geçerlilik testi sayesinde elimine edebilirsiniz.

Şu anda aklıma gelen yararlar bunlar. Eğer bunlardan başka bildiğiniz bir madde varsa makaleyi ona göre güncelleyebiliriz.

Nasıl Bir Yöntem İzlemeliyiz?

Ben kendi tecrübelerime dayanarak sizlere birtakım önerilerde bulunmak istiyorum:

• Otomatik tamamlama özelliğine sahip bir editör kullanın. Böylece yazım hatalarını bir nebze azaltmış olacaksınız. Ayrıca biraz daha hızlı kod yazma olanağına sahip olacaksınız. Size önerim E Text Editor, Aptana veya ActiveState Komodo Edit adlı editörlerden herhangi birini kullanmanız. E Text Editor kişisel tercihimdir.
• Web tasarımınızı XHTML/CSS‘ye çevirirken belli aşamalarda geçerlilik testini muhakkak uygulayın. Örneğin #top, #center, #bottom adlı üç tane div‘imiz varsa her bir div ve iç kısmını kodladıktan hemen sonra geçerlilik testinden geçirin.
• Normalde XHTML dosyalarınız için buradaki geçerlilik testi uygulamasını, CSS için de buradaki geçerlilik testi uygulamasını kullanırız. Her iki geçerlilik testine Web Developer Toolbar adlı Firefox eklentisini kullanarak daha hızlı erişebilirsiniz. Hem FTP‘deki hem de yerel sunucunuzdaki dosyaları Web Developer Toolbar‘ın Tools menüsündeki komutlarla kolayca geçerlilik testine tabi tutabilirsiniz.
• Geliştirme işinizde yine işinize yarayacağını umduğum HTML Validator adlı Firefox eklentisini tavsiye edeceğim. Bu eklenti bir nevi Firefox içinde dahili geçerlilik testi yapıyor. Ama dikkat etmek gerekirki kimi zaman bu eklenti sayfanızda herhangi bir hata olmadığını söylemesine rağmen W3C‘nin geçerlilik testinde sorunlar çıkabiliyor. Kısacası bu eklentiyi muhakkak kullanın ama siz siz olun W3C‘nin geçerlilik testini yabana atmayın. Her ne olursa olsun yukarıda yazdığım önerideki gibi adım adım W3C‘nin geçerlilik testini çalıştırın.
• Yazım hatalarını en aza indirgemek için oluşturduğunuz hazır XHTML ve CSS şablonlarızı kullanın. Böylece tekrar tekrar kod yazmak zorunda kalmaz ve yanlış kod yazma olasılığınızı azaltmış olursunuz.
• XHTML ve CSS için referansları elinizin altında bulundurun. Benim en çok kullandığım Sitepoint‘in yaptığı XHTML referansı ve CSS referansı. Kimi zaman bazı özellikleri unutabiliyoruz değil mi?
• Geçerlilik testi sonunda çıkan hataların çözümlerini öğrenin. Bunun için benim daha önce yazdığım Sıkça Karşılaşılan XHTML Hataları adlı yazıma ve Eren Emre Kanal’ın Siberkültür‘de yazmış olduğu yine W3C Kontrolüne Takılan Hataları Ayıklama adlı yazıyı okuyun.

Yine benim bilmediğim sizin bildiğiniz farklı bir öneriniz varsa burada belirtmeniz beni memnun edecektir. Sonuçta bildiklerimizi burada paylaşıyoruz öyle değil mi?

Geçerlilik Testinin Önemi

Görebileceğiniz üzere geçerlilik testinin biz web tasarımcı ve web geliştiricileri açısından çok faydası var. Bunları görmezden gelmek tam anlamıyla saçmalık olur.

Ama şöyle de birşey var ki şu anki CSS 2.1 sürümü bazı ihtiyaçlarımızı karşılamıyor. Mesela CSS‘de şeffaflık için kullanılan opacity etiketinin tarayıcıdan tarayıcıya göre değişen kullanımı mevcut. Örneğin Internet Explorer’da sadece filter: alpha(opacity=50); gibi saçma bir kodla şeffaflık verebilirken diğer tarayıcılarda opacity:.5; vermemiz yeterli oluyor. Üstteki filter etiketini kullanınca da W3C geçerlilik uygulaması hata olduğunu belirtiyor.

Başka bir örnek vermek gerekirse mesela yine CSS 2.1′de olmayan ama CSS 3′de olan border-radius özelliği. Bu özellik sayesinde div‘lerin kenarlarına herhangi bir görsel kullanmadan ovallik verebiliyoruz. Ama bu bir CSS 3 özelliği olduğu için yine W3C geçerlilik testinde hata verecektir.

Arkadaşlar ben bu gibi durumları önemsemiyorum. Çünkü gerçekten bu tür özelliklere ihtiyacımız var ve kullanıyorum. Bu tip hataları kafanıza takıp fanatiklik yapmanın bir gereği yok.

Bir de web standartlarını sayfalarının XHTML ve CSS kodlarının geçerlilik testinden sıfır hata ile geçmesi sanan arkadaşlar var. Bence bu da yanlış bir düşünce.

Web standartları denen kavram çok geniş. İçinde erişilebilirliği, kullanılabilirliği, yapı ve sunumun ayrılmasını, anlamlı kod oluşturmayı vs. gibi alt kavramları barındırır. Geçerlilik testi ise bu alt kavramların altındaki yapı ve sunumun ayrılması ilkesini doğru ve düzenli bir şekilde yapabilmek için sadece ve sadece bir araç. Başka da birşey değil!

Kısacası sitenizin kodlarının geçerli olması demek web standartlarına tamamen uyduğunuz anlamına gelmiyor. Ama unutmamak gerekirki geçerlilik testi çok önemli bir araç ve bunu mutlaka kullanmamız gerekiyor.

Bu yazı Fatih Turan tarafından 22 Eylül 2008 01:29 tarihinde yazıldı. 18 yorum var.

JQuery ile Şık Bir Teknik

Fatih Turan ile yaptığımız röportajdan sonra sık sık sohbet eder olduk. Kendisi bir süredir blogunda yeni paylaşım yayımlamıyordu.

Birgün bana tekrar paylaşımlarda bulunmak istediğini söyleyince bende bir atraksiyon yapalım dedim ona ve misafir paylaşımcı olarak birbirimizin bloglarında bu açılışı duyurmak, kutlamak amacı ile birer paylaşımda bulunmaya ve aynı anda yayınlamaya karar verdik.

Fatih Turan, Wordpress İçin SEO İpuçları adlı paylaşımda bulundu.

Ve Benim Paylaşım

Bu paylaşımda sizlere JQuery kullanarak çok basit bir şekilde oluşturabileceğimiz, şık bir teknikden bahsedeceğim. Şık bir teknikten kastımı bizzat kendi gözlerinizle görmek için şu sayfayı ziyaret edebilirsiniz.

Altyapımızı Hazırlamaya Başlayalım

JQuery ile çalışacaksak en öncelikle yapmamız gerekenler, JQuery web sitesinden, JQuery adlı JavaScript kütüphanesinin en son sürümünü indirmek (ben birde dosyanın ismini JQuery olarak değiştiriyorum, daha kısa oluyor) ve

1

<script type="text/javascript" src="jquery.js"></script>

kodunu HTML dökümanımızın head bloğu arasında kullanarak HTML dökümanımıza
jQuery.js dosyasının yolunu göstermek.

Ayrıca örneğimizde CSS ve JQuery kodları geliştireceğimiz için ve hazır head
kod bloğunun içindeyken atacağımız en mantıklı adım

1
2
3

<script type="text/javascript">
 
</script>

ile

1
2
3

<style type="text/css">
* {margin:0; padding:0}
</style>

kod bloklarını açmak ve işimizi görecek bir sıfırlama tekniği kullanmak olacak.

Alternatif olarakda bu paylaşım için başlangıç niteliğinde hazırladığım şu
klasörü bilgisayarınıza indirebilirsiniz.

Ne Yapmak İstiyoruz?

Yapmak istediğimiz şu, belirlediğim bir bağlantıya basılınca sayfanın üst kısmından x yükseklikte bir alanın, şık bir şekilde açılması.

Alan dediğimize göre bir div etiketine ihtiyacımız var.

1

<div id="acilacakAlan"></div>

İsterseniz birde div etiketimize yükseklik ve bir arkaplan rengi verelim.

1

#acilacakAlan {height:240px; background-color:#000}

Sayfamızı açıcak olursak, sayfanın üst kısmında, 240px yüksekliğinde, siyah renkli bir alan göreceğiz.

O zaman sayfamıza birde tetikleyici niteliğinde bir bağlantı ekleyelim ve HTML kısmı ile işimiz bitsin.

1

<a href="#" id="gosterici">Göster</a>

Burada href="#" tanımı önemli, çünkü href="" boş kaldığı zaman a etiketimiz bir bağlantı olarak görülmez ve basılır durumda olmaz, bu nedenle bir # işareti istediğimizi yapmak için yeterli.

JQuery’ye Giriş

JQuery’nin en sevdiğim yanı şu, JQuery geliştirmek için çok fazla bir JavaScript bilgisine sahip olmam gerekmiyor, ya da basit isteklerimi yapmak için sayfalarca kod yazmama gerek yok, önceden tanımlanmış fonksiyonları kullanabiliyorum.

Zaten JQuery’nin sloganı olan, Tasarımcılar için JavaScript, herşeyi anlatıyor.

Çalışmaya Başlayalım

JQuery kodu geliştireceğimiz zaman kullanmamız gereken bir kod var

1
2
3

$(document).ready(function() {
 
});

Bu kodun türkçesi “döküman hazır olduğunda” demek, dolayısı ile şimdi bu kod bloğunun içine yazacağımız kodlar döküman hazır olduğunda çalışacak.

Bir defa öncelikle o div‘i gizlemeliyiz sayfa ilk açıldığında gizli olmalı. Yani şöyle birşey demem lazım, acilacakAlan.gizle yani acilacakAlan’ı seçip ona gizlenme komutunu vermem lazım.

$('#acilacakAlan') kodu ile ben o div etiketini seçiyorum ve bu kodun sonuna .hide(); kodunu ekleyerek div etiketine gizlenmesini söylüyorum.

1
2
3

$(document).ready(function() {
$('#acilacakAlan').hide();
});

Sayfamızı açıcak olursak bomboş bir sayfa göreceğiz, güzel.

Bu noktadan sonra yapmak istediğimizi yeniden gözden geçirelim. Ben gosterici adlı bağlantıya tıklandığımda acilacakAlan’ın gözükmesini istiyorum.

O zaman önce gosterici’ye tıklandığı anı bilmem lazım.

1

$('#gosterici').click();

Yukarıdaki kod ile, gosterici bağlantısına tıklandığı bilgisi avcumun içinde, artık acilacakAlan‘ın gözükmesini sağlayacak fonksiyonu yazabilirim:

1
2
3

function() {
$('#acilacakAlan').show;
}

İki kodu birleştirince

1
2
3

$('a#gosterici').click(function() {
$('#acilacakAlan').show();
});

ortaya yukarıdaki kod çıkıyor, bir deneyelim bakalım ne olacak?

Evet bağlantıya basınca alanımız geliyor, ama bir sorun var şu anda alanımız direk açılıyor, hiç bir şıklık ya da güzellik yok.

Oysa ben yukarıdan aşağıya doğru şık bir şekilde açılmasını istiyorum, o zaman ben yanlış bir komut kullanıyorum, aşağıya(down) kaydırmak(slide) için slideDown komutunu deneyelim o zaman.

.show(); yerine .slideDown(); yazalım ve sayfamızı kontrol edelim.

Evet istediğim oldu, ve ayrıca ben

1

.slideDown('slow');

veya

1

.slideDown('fast');

değerlerini kullanarak ya da direk rakam girerek,

1

.slideDown(400);

kayma hızını ayarlayabilirim, dikkat edin metinlerde ‘ kullanıyoruz ama rakamlarda kullanmıyoruz.

.slideDown(); kodunu .slideDown(400); ile değiştirerek kayma hızını 400′e ayarlıyorum.

Ufak Bir Sorun Var

Herşey çok güzel ama ufak bir sorun var, bu alanı açtıktan sonra birde kapatmamız lazım. İsterseniz en baştaki

1

$('#acilacakAlan').hide();

kodunun başına // koyarak onu yorum yapalım ve alanımız direk açık gelsin.

Şimdik alanımızı kapatmak istiyoruz ama yukarıya (up) doğru kayarak (slide) kapanmasını istiyoruz.

.slideDown(400); kodunu .slideUp(400); ile değiştirelim ve, evet, amacımıza ulaşıyoruz.

Ama şimdide şöyle bir durum var az evvel alanı aşağıya doğru kaydırarak açtık şimdi ise yukarıya doğru kaydırarak açtık ama ben aynı bağlantıya ilk defa basıldığında açılmasını tekrar basıldığında kapanmasını istiyorum. Bu işlem için iki ayrı bağlantı oluşturmak istemiyorum.

Sihirli Komut, Toggle

Arkadaşlar JQuery harika çünkü toggle adlı hazır bir fonksiyonu var ve bu fonksiyon tam istediğimizi yapmamızı sağlayacak. Gelin şu şekilde kodumuzu değiştirelim ve sayfamızı kontrol edelim.

1

.slideToggle(400);

Harika değil mi? Toggle ilk basıldığında önündeki (slide) komutu gerçekleştiriyor ve diğer basışta, ilk yaptığının tam tersini yapıyor. Yani Aç Kapa şeklinde düşünebiliriz. Zaten Toggle kelimesinin türkçe karşılığı, iki konumlu düğme demekmiş.

Ne Kadar Kolaymış değil mi?

Artık elimizde şık bir teknik var ve bu tekniği istediğimiz gibi süsleyebiliriz. Ben şu şekilde bir örnek geliştirdim (Arkadaşlar, örneğe sadece FireFox3′de baktım, diğer tarayıcılar için optimize etmedim), Fatih Turan ise, Sinemalardan adlı blogunda (şu anda kapalı olarak test ediliyor yakında açılacak) bu tekniği çok şık bir şekilde kullanmış, kısacası sınır sizin hayal gücünüz, çok efektif ve şık kullanımlar çıkartılabilir.

Umarım sizde ne kadar kolaymış bunu yapmak demişsinizdir, faydalı bir paylaşım oldu ise ne mutlu bana.

Bu yazı Web Deneyimleri adlı blogdan Volkan Görgülü tarafından konuk yazar olarak yazılmıştır.

Bu yazı Fatih Turan tarafından 18 Eylül 2008 12:28 tarihinde yazıldı. 13 yorum var.