Web tasarımcılığı veya web geliştiriciliğine yeni başlayan hemen hemen herkes Dreamweaver veya benzer tarzda WYSIWYG (Türkçesiyle “Ne görüyorsanız onu alırsınız”) tipindeki editörler ile tablo etiketlerini kullanarak (veya kullanmayarak), adeta suya sabuna dokunmadan, yani kodlara bulaşmadan, programdaki komutlarla anında görüp, düzeltme ve değişiklik yapıp web sayfalarını inşa etmeye çalışmışlardır.
Şahsen ben bu şekilde web sayfalarımızı geliştirmememiz gerektiğini düşünüyorum. Çünkü:
- WYSIWYG tarzı editörler yeni başlayanlar için genelde kolay gözükmesine karşın arkaplanda ürettiği kodlar bizim kontrolümüz dışında oluşturulur. Bu yüzden bir sürü gereksiz kod ile karşılaşabiliriz.
- Bu gereksiz kodlar yüzünden xHTML ve CSS dosyamızın boyutları artabilir. Aynı zamanda kodların okunulabilirliği de azalır. Okunabilirlik azalırsa, çalışmanızda bir sorun ile karşılaştığınızda profesyonel birinden yardım istemeniz durumunda yardım alma olasılığınız da azalabilir. Şahsen ben forumlarda tablo etiketi ile hazırlanmış, karışık kodlara sahip web sayfalarındaki sorunlarla pek ilgilenmiyorum.
- Gereksiz kodlar aynı zamanda SEO açısından bizim için bir dezavantaj oluşturabilir. Çünkü arama motorları genelde kötü kodlanmış web sayfalarını daha iyi ve sade kodlanmış web sayfalarına göre önemsiz olarak nitelerler (bu konuda bazı istisnalar olabilir).
- Genelde WYSIWYG tarzı editörler web sayfalarını yapı, sunum ve davranış olarak ayırmada (bu konuyu daha sonra ayrı bir yazı olarak ele almayı düşünüyorum) beceriksizdir. Yani oluşturulan xHTML dosyalarınıza CSS ve Javascript kodlarını da katarlar.
- Yine yukarıdaki maddede bahsettiğim arkaplanda yaratılan kodlar otomatik olarak oluşturulduğu için tam olarak ne olduğunu, ne işe yaradığını anlamayabiliriz. Hatta öyle ki bazılarımız -özellikle tembeller xD- “nasıl olsa herşeyi fare ile bir-iki tıkla yapabiliyorum” diye düşünüp hangi etiketin, hangi kodun ne işe yarayıp yaramadığını öğrenme yerine komutları ezberlerler. Kısacası öğrenme ihtiyacı hissetmezler. Sonuçta neyin ne işe yaradığını bilmeden iş yapmış olursunuz ama bir sorunla karşılaştığınızda da kafanızdaki saçlarınızı yolabilirsiniz. xD
- Dreamweaver veya Expression Web gibi WYSIWYG tarzı editörler pahalı uygulamalardır. Neden daha ucuz veya tamamen ücretsiz daha iyi programlar varken bu programları kullanalım ki? Değil mi? :) Ben E Text Editor‘u geçenlerde 35$ karşılığı satın aldım. Böylece uzun bir aradan sonra kod düzenleme aracı arayışıma son verdim. :) Bence siz de kendinize uygun bir kod düzenleme aracını edinin (Mesela Aptana, Notepad++, Komodo Edit, PSPad).
Kısacası web sayfalarını kodlarken WYSIWYG tarzı editörler kullanmayalım. Web sayfalarını kodlarken hangi etiketin, hangi kodun ne işe yaradığını öğrenelim (bunun için Sitepoint‘in çevirimiçi xHTML referansı ve CSS referansı kesinlikle işinize yarayabilir), ezbere gitmeyelim ve tabii ki web sayfalarımızı elle kodlayalım. Bu sayede orta ve uzun vadede siz kazanacaksınız. ;)
- Tarih: 31 Ekim 2008 01:01
- Geri İzleme Yap
- Kategori: Css, Html/Xhtml, Web Tasarım
Reaksiyonlar
Bu yazı hakkında 1 pingback ve 0 trackback yapıldı.
Yorum Yaz
Yorum yazabilmeniz için adınız, soyadınız ve e-posta adresinizi mutlaka girmeniz gerekiyor. E-posta adresiniz burada gösterilmeyecektir.
Lütfen yorumunuzu yazdıkdan sonra önizleme düğmesine basıp yazım hatalarınızı kontrol edin. Konu ile alakasız ve çok fazla yazım hatası bulunan yorumlar onaylanmayacaktır.
Benim adım Fatih Turan. 25 yaşındayım ve Rize’de yaşıyorum. Serbest web tasarımcılığı ve
Yorumlar
Bu yazı hakkında 34 yorum yazıldı. Yorumları RSS üzerinden de takip edebilirsiniz. Siz de yorum yazmak ister misiniz?
WYSIWYG editörlerin işi gerçekten zorlaştırdığı çok büyük bir gerçek.
Notepad++ kullanıcısı olarak, tavsiye edebilirim. Pek çok yararlı eklentisi ve özelliği de bulunmakta ve herhangi bir ücret ödemeye gerek kalmıyor.
Bu güzel ve anlamlı paylaşım için tebrikler…
jnbn → http://www.jnbn.net 31 Ekim 2008 01:09
Fatih hocam yazın her zaman ki gibi güzel olmuş yine. Eklemek istediğim bi kaç şey var;
WYSIWYG kullanılarak geliştirilen sayfaların kod kısmı bir zaman sonra çöplüğe dönüyor zaten. En akıllıca ve mantıklı olanı notepad++ kullanmak :)
Ben hiç kodlardan anlamam diyorsanız o zaman notepad++ sizin için sadece not defteri olarak kalacaktır :)
ilyas TEKER → http://ilyasteker.com 31 Ekim 2008 01:11
Kodlamayı kişiler elleri ile yaptığı taktirde zaten ileri düzey kodlamaya da ilk adımı atmış oluyorlar. Bugün hangi dili öğrenmek isterseniz isteyin bir alt yapınızın olması lazım. CSS’de bile HTML alt yapısını bilmeden hiçbirşeyi anlayamıyorsunuz. Kodlamarın elle yapılması kişilerin kendi faydasına olacaktır elbette…
h-yaman → http://www.h-yaman.com 31 Ekim 2008 09:56
Bende hiç sevmiyorum bu tarz editörleri. Notepadd++ ile her istediğimi hemde renklendirilmiş olarak görmek bana yetiyor. Bu tarz kodları öğrenmek için benim bu işlere merak salmamın ilk zamanlarında (1999) bulduğum ve bu konuda büyük yol katetmemi ve altyapımın sağlamlaşmasına ön ayak olan Webdersleri (http://www.webdersleri.com/sayfa.asp?id=564) ‘ni öneriyorum..
Ayberk Atasay → http://www.ayberk.com 31 Ekim 2008 12:02
Elle kodlama yaptığınız zaman herşey tamamen sizin kontrolünüzde oluyor. Kodlarınız yapısını, ilerleyişini, neyi niye yaptığınızı biliyorsunuz ve ilerde aynı projeye dönünce “Bu kod da ne ki” tarzında yakınmalarınız olmuyor.
Notepad++ çok kullanışlı fakat ben hala Dreamweaver kullanıyorum, design sekmesini açıp hiç bakmasam da, alışkanlık var galiba. Yoksa çok daha hızlı ve sade bir program kullanmak çok daha kolaylaştıracaktır işlerinizi.
Yeni başlayanlar da WYSIWYG editörlerinden kullanabilirler. Kod sekmesinde kodlarını yazıp anında design sekmesinde görürlerse hata yakalama şansları da artar. Yoksa herşeyi design sekmesinde yapayım derlerse kod tarafında ilerlemeleri de o ölçüde azalacaktır.
Emre Sümer → http://www.sumer.gen.tr 31 Ekim 2008 17:48
Çalıştığım firma gereği çoğu proje .net (c#-vb.net) ile yapılıyor. Diğer ekip arkadaşlarımın rahatlığı için ben de bir süredir VS2008 kullanmaya başladım. Normal zamanda DW kullanıyordum ama daha sonra NP++ kullanmaya başladım. Otomatik tamamlama ya da elementleri ekleme konusunda Fatih çok haklı. Bu tip programlar ya da işlevler kod yazma mantığını hamlaştırıyor. Bağımlı kalıyorsunuz ve öğrenme güdünüz tıkanıyor.
Kadir GÜNAY → http://www.kadirgunay.com 31 Ekim 2008 18:57
Bu E-TextEditor ‘ ın Notepad++ ‘ dan ne fazlası var ?
Deniz → http://www.asitweb.net 01 Kasım 2008 00:44
@Deniz: Buradaki screencast‘i izlemeni tavsiye ederim. Ayrıca bu editor Mac OS X’deki Textmate’in Windows’daki klonu sayılabilecek bir program. Belki Textmate hakkında biraz araştırma yaparsan neden bu kadar övdüğümü anlayacaksın. :)
Ha bir de ilerde E Text Editor’u blogumda tanıtmayı düşünüyorum.
fatihturan → http://www.fatihturan.com 01 Kasım 2008 00:59
Önceleri FrontPage kullanıyordum, Microsoft Expression pakeyi çıkınca Expression Web 2 kullanmaya başladım. Önceden tablo tasarım yapıp CSS kullanmadığımız için herşeyi program bizim için üretiyordu, şimdide CSS üretebiliyor ama benim tercihim el ile yazılması bahsettiğiniz gibi CSS de bile gereksiz kodlar üretiyor. NotPad++ kullanıyorum ama web projelerim için değil ben Microsoft Expression Web 2 yi öneriyorum.
Salih S. DEMİR → http://www.salihsdemir.net 01 Kasım 2008 02:04
Kesinlikle katılıyorum söylediklerinize.
Zaten bu gibi programlar bu işi ucuza yapıp piyasa dengesini bozanların çok işine yarıyor.
Her şey tek tık onlara göre.
Onur Değerli → http://www.rehberalem.com 01 Kasım 2008 13:39
Gayet gerekli bir yazı olmuş. Bende aynen böyle düşünüyorum. İşin özünü bilmeli kodlara tane tane dokunmalı. :D Kod yazmak zaten ayrı bir zevk.
yedincisenol → http://yedincisenol.com 03 Kasım 2008 23:57
Doğruyu söylemek gerekirse ilk başlarda bende dediğin gruptandım :D sonradan alıştıkça insan notepad bile yeterli oluyor. :D
Eray USTA → http://www.ytplus.net 05 Kasım 2008 03:58
Merhaba arkadaşlar,
Ben bu işlerde yeniyim, bir arkadaşımda notepad++’ı gördüm ve bende makineme kurdum.Fakat, arkadaşta gördüğümde mesela yazıp enter’a bastığımda etiketini otomatik kapatıyordu.Benimkinde yapmıyor birşeyleri eksik ya da yanlış mı yapıyorum.
Notepad++ sürümüm 5.1
Tülin Öztekin 06 Kasım 2008 18:01
Evet, bence de elle kodlamak lazım. Geçenlerde bir internet projesini Dreamweaver’da tasarladım, gayet hoş görünüyordu, sade ve basit tasarımıyla da gayet güzeldi. Ta ki sayfayı IE’de açana kadar!
Bi baktım ki tablolara gömdüğüm navigasyon kaymış gitmiş. Arkaplandaki şeritteki 2 renkten biri ile yazı kenarlık rengi aynı olmasına rağmen IE’de daha koyu görünüyor. Açıkçası kafayı yedim tamamen. Kodlama da bilmiyorum ama bu iş için öğreneceğim. Yarın Tüyap’ta – Uykusuz Ekibi’nden imza almaktan vakit kalırsa =P – xHTML ve Css üzerine de Tolga Gezginiş’in de blogunda önerdiği kitaplara bakmayı düşünüyorum.
Bu arada Notepad++ gerçekten çok kullanışlı bir programmış valla, tema özelleştirirken ve türkçeleştirirken çok işime yarıyor :).
iamdezzy → http://www.amatoruz.org/ 08 Kasım 2008 00:44
Fatih Turan ve Fatih Hayrioglu kardeşlerimizin yazılarını takip ediyorum fırsat buldukca, yaptıkları çalışmalardan dolayı kutlarım kendilerini…
Yazı ile ilgili yorumuma gelince; ben çalışmalarımı Dreamweaver üzerinden yürütüyorum… Ama tabi burda IDE’nin ne kadarını kullandığınız da önemli…. Genel de code view üzerinde çalışıyorum. Çalışmalara design viewde de mudahalede bulunuyorum. Ayrıca Nodepad ++ yeri geldiginde de Visual Studio kullanmaktayım. Web tabanlı uygulama geliştirme süreçlerinde bu araçlarınn birbirinden farklı özellikleri, birbirinden farklı faydalari oluyor. Bu anlamda amacınıza giden yolda bu uygulamaların makul bir kombinasyonunu kullanmak bence doğru olanı…
Kod’u elle yazmak konusuna gelince, neyi nerde neden kullandığınızı kolayca anlamak, istediginiz noktalara kolayca müdahale etmek istiyorsanız mumkun oldugunca elle yazmalıyız…
Özgür IŞIK 09 Kasım 2008 14:26
Gayet güzel bir açıklama olmuş….
Griport → http://www.griport.org 12 Kasım 2008 17:44
Merhabalar Fatih, yine güzel bir yazıya imza atmışsın. Ben yazını çok geç okuduğum için kendime kızıyorum. Çünkü her zaman savunduğum bir konuyu güncene taşımışsın.
İster Dreamweaver ister Frontpage veya daha başka bir editör kullanın. Ne yaparsanız yapın bu editörler sizin tasarımınızda fazla kodlar üretecek ve bunu sayfanın kaynak kodlarına gömecektir. Bunu istediğiniz kadar kısıtlamaya çalışın yine de engellemeyezsiniz. Hele ki büyük bir proje veya web sayfası üzerinde çalışıyorsanız bu daha da vahim bir hal alacaktır.
Yıllarca Notepad++ kullandım, tasarıma başladığım ilk günlerde biraz Dreamweaver ile geçmişim oldu ancak o programdan da kopmadım.
Bir projeye başladığım zaman önce yaptığım şey Photoshop’ta görsel aşamayı geçmek ve daha sonra parçaladığım resim dosyalarını ve diğer bilimum web ögesini Notepad++ ile yazmak.
Kodlama ve anlık gidiş ile kendi yaptığınız websitesine daha iyi hakim olabileceğinizi düşünüyorum. Kaldı ki kendi kodlamasını kendileri yapan tasarımcılar bu işte bir adım önde oluyorlar. Söz gelimi kendimden bahsedersem bilmediğim şeyleri bu şekilde daha hızlı öğreniyorum. Neyse sözü fazla uzatmak istemem, Fatihcim bu güzel yazı ve tavsiyelerinden ötürü sana çok teşekkür ediyorum.
Görüşmek üzere…
Volkan Karakuş → http://www.t-infection.com 15 Kasım 2008 19:27
peki yeni başlayanlar ne yapsın direk html’mi öğrensin yoksa bu saatten sonra xhtml’den devam edebilir mi?
Arda YILMAZ 18 Kasım 2008 16:15
@Arda: xHTML zaten HTML’den türetilmiş bir işaretleme dili. Aradaki temel fark xHTML’de yazılan kodlar HTML’den daha katı kurallarla yazılıyor olmasıdır. Kısacası xHTML’yi öğrenince zaten ister istemez HTML’yi de öğreniyorsun. :)
fatihturan → http://www.fatihturan.com 18 Kasım 2008 17:37
dreamweaverla hem çalışıp hemde koda müdahale ederek gitmeliyiz düşüncesindeyim.
emin 18 Kasım 2008 21:49
Peki bana xhtml öğrenmem için güzel bir türkçe kaynak verebilirmisiniz css için sanırım bu blog ve fatih hayrioğlu’nun blog’u yeterli olur
Arda YILMAZ 18 Kasım 2008 22:57
@Arda: xHTML’yi öğrenmek çok da zor değil. Yani çat pat İngilizce’den anlıyorsan bile yabancı kaynaklardan çok rahat şekilde öğrenebilirsin.
Bunun için mesela w3cschools ve xhtml reference sitelerine bakabilirsin.
Ayrıca illede Türkçe kaynak istiyorsan ideefix’deki xHTML ile ilgili kitapları deneyebilirsin.
fatihturan → http://www.fatihturan.com 21 Kasım 2008 13:59
mozilla firefox ile noscript eklentisini kullanmaktayım. CSS ile hazırlanmış çoğu site tam düzün görünmüyor hatta hiç görünmüyor. herşey birbirine girmiş gözüküyor. noscripte izin ver dersem anca görünüyor. komple js ilemi yapıyorlar?
ama bazı sitelerde css olmasına rağmen en azından temel olan iskelet yapısı sanki noscripte izin vermişim gibi düzgün duruyor? En iyi örnek nt mağazaları sitesi. isteyen bakabilir. reklam yapmıyorum çünkü bu siteye girince farkettim.
imajları volkan görgülü arkadaşın dediği gibi imajların enini boyunun ölçüsünü girince yüklenmese bile orada o şekil duruyor.
Açıkçası nt sitesine girince aklım karıştı.
emin: html + dreamweaver + php + asp dillerinin cdli anlatım paketlerine sahiptir. cssye bi türlü ısınamamaktadır. Hele hele jquery ve jscripte hiç kanı kaynamamış bir teklonoji meraklısıdır. :D
emin 24 Kasım 2008 06:48
Merhaba nt mağazaları sitesini noscript eklentili açtığımdan genel itibariyle iskeletinin doğru göründüğünü (firefox – 05 aralık güncel en güncel sürümü ile)bazı sitelerde görünmediğini yazmıştım.
İşte o düzgün görünmeyen sitelerden biri; http://www.erkayalar.com.tr/new/default.aspx
Bu siteye girdiğim an sayfaya sayfa demek için bin şahit istiyor.
Görmek isteyen arkadaşlarıma sunulur.
Kolay gelsin..
emin 06 Aralık 2008 20:29
Bu konuda bende hemfikirim, yeni başlayanların öğrenme aşamasında olduğunu düşünürsek bir şeyi öğrenmeden uygulama fikri pek sağlam temellere oturmuyor gibi geliyor. Yalnız bir açıdan faydalı olabileceğinide eklemeliyim, yeni başlayan için kod, tertip, düzen öğrenme maksadı ile kullanalabilir diye düşünüyorum.
mastermind → http://www.girilecek.net 21 Aralık 2008 18:41
bazı eskiler sen usta olacaksın ama aletin senden usta olacacak derler
ister web projesi yapalım ister web sayfası yapalım bence kullandığımız araçların güçlü olması önemli.
ortada notepad++ yada benzeri şeyler kullanarak daha iyi sayfa yapıyoruz gibi bir kanı olmasın
bence tam tersi daha doğrudur.
dreamweaver yada visual studio yada expression web kullandığınızda da html yazabilirsiniz ve daha rahat yazarsınız.
bu uygulamalarda yaptığınız ve başka browserlarda kaymış tasarımın html’ini notepad de de yazsanız dağınık gözükecektir.
araç çubuklarından biçim verip sayfa yapmak uzun vadede hatalıdır çünkü daha sonra değiştirmek istediğinizde canınız yanar. bunun için css kullanmalıdır bu css i notepad lede yazabilirsiniz.
ama visual studio yu kullanırsanız css i yönetmeniz kolaylaşır.
tam olarak bu yazının konusu olmasada birde debug mevzusu var. özellikle sunucu taraflı işlemler içeren bir uygulamanın geliştirme aşamasında debug edilmesi gibi bir gereklilik var
ben c# asp.net ile uygulamalar geliştiriyorum ve Visual web developer 2008 Expres kullanıyorum
ücretsizdir ve pek çok özelliği size zaman kazandıracaktır.
başta da belirttiğim gibi önce usta olmak lazımdır. html, css, javascript’i iyi ce öğrenmeden hangi araçları kullandığımızın önemi yok, sorunlar yaşarız
serdar → http://www.serdarb.com 26 Aralık 2008 23:52
Bu konu, tasarımcılar / kodlayıcılar tarafından en çok tartışılan konulardan biridir.
5-6 senedir tasarım ve kodlama ile uğraşıyorum. İlk olarak Dreamweaver ile başladım, hala da kullanmaya devam ediyorum. Başlarda, design kısmını da kullanır, ” div “leri, ” table ” ları otomatik olarak ekler, veritabanı ile iletişim için programın özelliklerini kullanırdım. Ancak zaman geçtikçe fark ettim ki, elime kod çöplüğünden başka bir şey geçmiyor.
Bu noktadan sonra, css olsun, php olsun, bütün kodları kendim yazmaya başladım. Ve çok da faydasını gördüm. Profesyonel çalışmalar için, bu bir seçenekten çok bir gereklilik diye düşünüyorum.
Hala Dreamweaver kullanmamın sebebi ise, arama / değiştirme, dosyaları sunucuya yükleme, projenin dosyalarına kolayca erişebilme gibi artıları olması. Ayrıca, otomatik tamamlama özelliği, işin temelini kavradıktan sonra, zaman kazandırıyor. Ne yazdığımı bildiğimden dolayı, her şey kontrolümde oluyor, projelerimi kod çöplüğüne dönüşmeden hızla tamamlayabiliyorum.
Benim tavsiyem, ne kullanırsanız kullanın, kendiniz yazın =)
M. Hakan Deryal → http://www.vebiki.com 09 Ocak 2009 03:35
Ber Moremotion kullanıyorum çokda memnunum kod bilmeyenler için birebir.
engin 22 Şubat 2009 22:42
Bu yazıyı yazmışsınız ama sizin yaptığınızı söylediğiniz gorseldukkan.com’a baktım hazır template kullanmışsınız hiç yakışmamış size hiç!
Onur Gültekin → http://onurum.hediyemnerede.net 02 Mart 2009 18:14
@Onur: Hadi ya!? Nerede satılıyormuş o hazır template? Göster de biraz inandırıcı olsun lafların.
fatihturan → http://www.fatihturan.com 02 Mart 2009 20:11
e text editor hakkında yazı yazıp yazmadığınızı bilmiyorum aradım ama göremedim belki gözümden kaçmıştır.
e text editor gibi kod tamamlayabilen editörler hangileridir? hangilerini önerirsiniz?(bedava olup olmaması önemli değil (paralı olanlar hatta daha çok özenilmiş oluyor) notepad++ kod tamamlama yok diye biliyorum)
css yazarken ayrı programlar var onlar hakkında nasıl bilirdiniz : )(cssvista, rapidcss vb.)
css frameworkleri ve kullanmamız hakkında neler düşündüğünüzü merak ediyorum (960’s gridsystem, bluprint vb.)
güzel yazınız için teşekkür ederim.
mavi beyaz → http://www.keyfiblog.com/ 22 Mart 2009 16:52
Bu yazında sana çok hak veriyorum. Ben bugüne kadar kodlamarımda her zaman Not Defterini kullanmışımdır. Dreamweaverda bir çok istenilmeyen stil bilgisi üretilebiliyor. FrontPage’de üretilen kodları saymıyorum bile. FrontPage bu bakımdan o kadar kötü ki kullanılmasına kesinlikle karşıyım.
Yazın gerçekten çok haklı. Ellerine sağlık
sagoral → http://www.trkodlama.com 30 Mart 2009 17:03
Geçtiğimiz hafta blogumda yazdığım Html ile ilgili makalemde bu konuya da değinmiştim. Güzel tesadüf olmuş. Faydalı bir makale olmuş. teşekkürler.
Demir → http://www.ozdtasarim.com 22 Mart 2010 12:40
notepad ++ derim. ayrıca notepad ++ otomatik tamamlama yok diyorlar ancak bu doğru değil. varsayılan ayarlarında kapalıdır sadece.
Alico → http://thealico.com 14 Ağustos 2010 15:47