Fatih Hayrioğlu’nun not defteri – 2009
2 Oca
Yazı Fatih HAYRİOĞLU tarafından CSS, Haberler kategorisine eklendi.
Geçen seneyi değerlendirirsem. Genel manada pek verimli bir sene olmadı. Çok fazla makale yayımlayamadım. Umarım 2010 daha iyi geçer.
Ocak
- Kuleli 1919 – Şeref Tipi Senenin ilk yazısı bir hatıra kitabı.
- sIFR, Flash Player10 ve Firefox sorunu Sorunlarla daha ilk günlerden boğuşmaya başlamışız.
- Operasyon Ergenekon – Şamil Tayyar Şimdi anlıyorum ki eskiden daha çok kitap okuyormuşum.
- WordPress 2.7′ye geçtikten sonraki sorunlarım – 1 En çok sorun yaşadığım sürümlerden birisi idi 2.7
- Windows Vista / Windows Defender Güncellemesindeki Sorunu ve Çözümü 2009 sorunlarla başlamış, orası kesin.
Şubat
- Şâh-ı Cihan Fatih Sultan Mehmed Han – Ahmet Çoşkun Tarih kitapları ile devam ediyor süreç.
- Float Uygulanmış Elementleri Tam Kapsayamama Sorunu İpuçları Bir çok projede defalarca karşılaştığımız float uygulanmış nesnelerin kapsayamama sorunu için ipuçları.
- CSS İpucu 18: Optimizasyon İçin CSS Medya Dosyalarını Birleştirmek Daha önceleri projemizde farklı bölümler için farklı css dosyaları kullanmayı önerir iken sonradan fazla dosya çağırmanın optimizasyon bakımından dezavantajlı olduğunu öğrendik.
- CSS İpucu 19: Tüm Tarayıcılar İçin CSS İle Saydamlık(Opacity) Ard arda ipuçları. saydamlık için css tanımları.
Mart
- Basit Resimli Menü Yapmak Ardalan kaydırma yöntemi ile menü oluşturmayı daha önce anlatmıştım ancak çoğu insana o anlatım karmaşık geldi. Bende daha basit nasıl anlatırım diyerek bu yazıyı yazmıştım.
- Internet Explorer 8′in Nihai Sürümü Çıktı O zaman yazmışım bu tarayıcının yetersiz olduğunu. İE9 seslerinin çıktı bu günlerde daha iyi anlıyoruz durumu.
- Internet Explorer 8′i 7 gibi yorumlama kodu İE8′in bize kaznadırdığı en güzel özelliklerden birisi bu galiba. Sen 7 gibi yorumla.
- RSS Adresimi Google’a Taşıdım Google’un feedburner’ı almasından sonraki bir değişiklik. Ben google’dan bu aracı daha da geliştirmesini beklerdim ama çok atıl kaldı bence.
- Futbol ve Küreselleşme – Pascal Boniface Seyretmek için çok zmana harcasamda hakkında pek kitap okumadığımı bir kez daha gördüm. Futbol hakkında okuduğum ilk ve tek kitap. Şimdilik
Nisan
- Tablo Satırına Verilen Ardalan Resminin Tekrarlama Sorunu Genel itibari ile sorun ve çözüm önerileri hakkında makalelerle geçmiş.
- CSS İpucu 20: Firefox’da Kaydırma Çubuğu Çıkarma Bazıları için bir sorun olarak görünsede bence bir sorun olmayan bir özellik.
- Sessiz sedasız 3. seneyi aştık Seneler çok çabuk geçiyor.
Mayıs
- Jquery İle IFrame Yüksekliğini İçeriğine Göre Otomatik Ayarlamak Çok kullanışlı ve güzel bir eklenti, bence tek sorunu yavaş çalışması.
- jQuery ile Basit Sekme Yapımı jQuery ile ilgili ilk makalem. jQuery 2009′da benim için tavan yaptı.
- CSS ile sayfalama görselliğini ayarlama Bir metot ve görselliği arttırma yöntemini anlattığım bir makale
Haziran
- CSS İpucu 21: CSS ile Seçilen Metinlerin Rengini Değiştirmek Tamamen görselliğe yönelik bir özellik ve hala ie desteklemiyor.
- CSS Kod Yazma Düzeni 2009′da yazdığım makaleler arasında en çok beğendiğim yazılarımdan bir tanesi. Genelde kodlardan bahsederim, ama bu sefer işin farklı ama önemli bir kısmını anlattığım bir makale.
- IE 8 için CSS Düzeltmesi(Hack) Bu düzeltmeyi pek kullanmadım. Bunun yerine ie gibi yorumla kodunu kullandım.
- Sayfa Dibine Yapışık Alt Alanlar(Sticky Footer) Bir çok kere kullandım ve sonunda yazdım.
- CSS ile Ziyaret Edilen Sayfa Bağlantılarına Şekil Vermek Pek kullanmasak dahi önemli bir özellik.
- Windows Vista .net Framework güncelleme sorunu ve çözümü Vista sorunları sene boyu bizi zorladı, ama yinede idare etti.
- Firefox’un Negatif Değerli z-index Desteği Firefox’un en büyük artılarından birisi sorunları olsada çabuk hallediyor ve bizleri uğraştırmıyor.
- Dış hat çizgisi(outline) özellikleri outline bir kişinin gözünden kaçan bir özellik. Bizimde gözümüze fazla batmamış ki yazmamız bu kadar gece kalmış.
- Dış Hat Çizgilerini(outline) Kaldırmak Her nekadar makale ismi kaldırmak diye geçsede içinde kaldırıp kaldırmamayı tartıştık ve alternarif yöntemleri sunduk.
- Firefox 3.5 çıktı Şimdilerde hız artışını daha iyi anladığım Firefox 3.5 sürümünün çıkışı önemli idi. Şu aralar dünyada lider.
Temmuz
- FireBug 1.4 sürümü çıktı Sadece görsellik olduğunu ve bayağı bir sorun çıkardığını şimdilerde görüyorum. Beni bu sürümü ile çok üzdü. Ama yinede kalbimizdesin FireBug
- CSS İpucu 22: iPhone için CSS Yazmak iPhone için web siteleri yaptık ama sonrasında biraz durağanlaştık.
- Safari ve Chrome’da metin girdi(textbox) alanlarını kenar çizgileri kaldıralım outline üzerine bir çok yazı yazmışız. Farklı tasarım uygulandığında kötü sonuçlar doğuruyor.
Ağustos
- iframe virüsü ve Saldırgan Site damgalamasından kurtulmanın yolu Virüslerin artık şekil değiştirdiği artık sistemler yerine sitelere yöneldiği şu günlerde bizim gibi arayüz geliştiricilerin daha dikkatli olması gerektiğini öğrendik.
Eylül
- VMware Kurarken “Setup failed to write data to the registry” hatası aldım Farklı yerlede ama yine sorunlar konumuz.
Ekim
- İE 6 iki CSS seçicisi Sorunu ve Çözümü ie6 ve sorun. ie6′dan bana çok ekmek çıkmış. Ama olmasa daha çok sevinirim.
- İnternet Explorer 6 ve 7 için Tablo tr elementine kenar çizgisi atamak sorunlar, sorunlar, sorunlar = ie
- Jquery ipuçları jquery çalışma hayatımı çok fazla etkilesede makalelerime fazla konu olamadığı kesin. 2010′da daha fazla değinmeye çalışacağım.
- @font-face kullanımı Çok güzel bir özellik hala bazı sorunlarıda olsa yakında daha cesurca kullanabileceğiz. Bu makale için çok zaman harcadığımı hatırlıyorum.
Kasım
- Arayüz Geliştiricilerin Görev Tanımı Bu makaleyi ilk başta yazmam gerekirdi ama sistemin oturması ve anlaşılması için zaman gerekti. Hala tam anlamıyla gerçekleşmese dahi büyük mesafe katettiğimizi düşünüyorum.
- Eksi Margin Kullanımı Çok eski süredir bekleyen bir makale konusu idi. Önemli bir konu anlaşılması ve derinlemesine bilinmesi gereken.
- CSS Yorumlarında Türkçe Karakter Kullandığımızda İE6′da Sorun Çıkarıyor Sosyal medyanın etkilerini yavaş yavaş hissettiğim bu senede friendfeed’de boy göstermeye ve geri dönüşlerden makale çıkarmaya başladım. İkinci makalem.
Aralık
- IE6′da Liste Ardalan Görmeme Sorunu Bilmiyorum bir şey yazmaya gerek var mı? ie6 = sorun
- PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması 2 senelik bir isteğin sonucunda sene sonunda anca çıkarabildim. Devamı 2010′da gelecek.
PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması
29 Ara
Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.
Yaptığım bir projeyi baştan sonra anlatmak uzun süredir düşündüğüm ama yapamadığım bir işti. Son denememde direkten döndü bu sefer inşallah tamamına erdireceğiz.
Fanatik Marşlar Nedir?
Fanatik Marşlar, taraftar marşlarının toplantığı tüm fanatiklerin buluşma noktasıdır. Barlarda, sahalarda, tirübünlerde, maç yolunda otobüslerde, trenlerde, salonlarda, stadyumlarda kısacası taraftarların her yerde söylediği tezahüratları bulabileceğiniz, sizin de takımınız için marşınızı paylaşabileceğiniz bir taraftar sitesidir.
Ayrıca Mustafa’nın siteyi tanıttığı televidyon’daki etohum programınıda izleminizi öneririm.
Bu projede Mustafa Özyurt ve Hasan Yalçın ile birilikte çalıştım. İki arkadaşımada teşekkürlerimi sunarak yazıma başlıyorum. Mustafa Özyurt hem projenin sahibi, hemde programlamasını yaptı. Tasarımlarda sevgili dostum Hasan Yalçın’a ait. Bende html, css ve javascript kodunu yazdım.
Yazının biraz uzun olacağı ve derlemesi zaman alacağı için makaleyi üçe böldüm
- I -Kodlama Öncesi Hazırlıklar
- II – Ana Sayfa Kodlaması
- III – Alt Sayfaların Kodlaması
I – Kodlama Öncesi Hazırlıklar
Projelere başlamadan önce tüm projelerde kullandığım klasör yapısını sizlerle paylaşmak isterim. İkonlar Windows Vista’nın kütüphanesinden, farklı ikonlar olabilirdi ama o zaman farklı bilgisayarlara o ikonları taşımak gerekiyor. İkon kullanmanın avantajı seçmek daha kolay oluyor. Her klasör isminden önce rakamlar koymamın nedeni sıralamayı istediğim gibi yapmak. Klasör ismi verirken Türkçe karakter kullanmamaya dikkat ediyoruz. Gerçi dosyalara, klasörlere isim verirken Türkçe kullanmayacağımızı biliyoruz.
00 – Gonderilen: Bu klasöre proje için gönderilen dosyaları koyuyorum. Projenin şablon psd’leri, içerik dokümanları(doc), resimler (jpeg, gif, png vd.), projede geçen yazı tiplerini(ttf) bu klasöre koyuyorum.
10 – Program: Bu kısma eskiden projede yazdığım program kodlarını koyuyordum. Son zamanlarda pek program yazmıyorum genelde css, xhtml ve javascript kısmını yapıyorum projelerin. Bu klasörü şimdilerde kullandığım eklentileri koymak için kullanıyorum. Örneğin akordiyon eklentisi, lightbox eklentisi, galeri eklentisi vb.
20 – Arsiv: Arşiv kısmında proje adımlarını belli aralıklarla arşivleyerek bu klasöre koyuyorum. Ayrıca devamlı güncelleme yaptığım projelerde güncellediğim her sayfa veya dokümanın yedeğini alıp bu klasöre koyuyorum. Bu mesleği iş olarak edinmek isteyen herkes yedek almayı bir görev bilmeli kendine. Yedeksiz çalışmanın bedeli çok ağır sonuçlar doğura bilir.
30 – Musteriye: Müşteriye klasörünü yaptığım projenin, işin, güncellemenin son dosyalarının sıkıştırılmış hallerini koyuyorum. Böylelikle çalıştığım ve müşteriye gönderdiğim dosyaların ayrımını daha kolay yapabiliyorum. Devamlı güncelleme yaptığım sitelerde bu klasörü daha yoğun kullanıyorum.
40 – HTML: Projede çalıştığım dosyaları bu klasöre koyuyorum. html, css, javascript, resimler ve flash dosyaları. Bu klasör içinde de bir düzenim var.
images: resimleri(jpeg, gif ve png) ve flash dosyalarını(.swf) buraya koyuyorum.
scripts: javascript dosyalarını(.js) buraya koyuyorum.
style: css dosyalarımı buraya koyuyorum.
html dosyalarıda HTML klasörü içinde kalıyor.
Bu genel proje standardım. Bazı projelerde bu klasör yapısı değişik olabiliyor. Mesela resim galerisinin olduğu sitelerde images/galeri/ klasörü açıp resimleri onun içine koyuyorum. Xml’leri yoğun olarak kullandığım projelerde bunlara ek olarak /xml/ klasörü oluşturuyorum. Flash yoğunluklu projelerde /swf/ klasörü açıyorum. Yani projeden proje farklılıklar gösterebiliyor, ama standardım bu.
Buraya kadar anlattıklarım hazır klasör yapısıdır, bundan sonra projeyi kodlamaya başlamadan önceki hazırlıklar olacak.
1- İlk olarak tüm psd’leri kontrol ederek hangi bölümlerin tüm sayfalarda aynı olduğu belirleyip ona göre kodlama yapmayı düşünüyorum. Genel bir değerlendirme bakışıda diyebiliriz buna.
2- İkinci olarak genel yapıyı görebileceğimiz bir eskiz çiziyoruz. Çizim her zaman bize neyin nasıl olacağı ve hangi alanlarda hangi teknikleri kullanacağımızı göstermesi bakımından önemlidir.
Her ne kadar sanal dünyada çalışıyor olsak da gerçek çizimler bize yardımcı olacaktır.
3- Eskizini çıkardığımız bu yapıyı sırası ile kodlamaya başlayacağız. İlk olarak boş bir html sayfası açıp index.html adı ile kaydederiz. Sonra boş bir css dosyası açarız. Aslında ilk açtığım bu boş dokümanlar bile bir şeyler içerir.
XHTML sayfamız
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>FanatikMarşlar.Com</title> </head> <body> </body> </html>
Bu dokümanı Adobe DreamWeaver ile oluşturduğumda dw benim için oluşturuyor.
- DocType olarak xhtml-strict kullanıyoruz. Doküman tipleri hakkında ayrıntılı bil için tıklayınız.
- Karakter kodumuz utf-8. uft-8 seçimi bizim karakter kodu konusunda sorunsuz çalışmamız için önemlidir. Ayrıntılı bilgi için tıklayınız.
- Genel html kodları (html, head ve body)
İlk yaptığım iş başlık kısmını değiştirmek olur.
<title>FanatikMarşlar.Com</title>
Daha sonra boş bir css dokümanı oluştururum. Genelde isim verirken ana, main, iskelet, veya sirket_adi nokta css şeklinde tanımlarım bu seferde site ismini tanımlıyorum fanatikmarslar.css Oluşturduğum bu dokümana sırası ile imza alanımı ve sıfırlama kodlarını ekliyorum.
/************************ ************************ Fanatik Marşlar - http://fanatikmarslar.com/ fatih hayrioglu 24 Eylul 2009 ie6, ff, opera, chrome, safari ************************ ************************/
Bunu benim imzam olarak nitelendirebilirsiniz. Genelde tüm projelerime eklerim. Bazılarında unuttuğumda oluyor. Daha sonra css sıfırlama kodlarını ekleyelim. Ben genelde standart sıfırlama tekniklerini kullanmam kendi ufak bir iki tekniğim vardır onları yazar geçerim. Ama bu sefer bazı sıfırlama kodlarının elenmiş halini kullandım ve koduma ekledim. Bide kapsayamama sorunu kodunu ekledim.
/* Css Sifirlama */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; text-decoration:none;}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
/* remember to define focus styles! */
:focus, a:focus, a:active{ outline: 0; }
/* remember to highlight inserts somehow! */
ins{ text-decoration: none; }
del{ text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse: collapse; border-spacing: 0;}
/* float uygulanan elemanları kapsayamama sorunu */
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/* IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
/* Css Sifirlama */
CSS sıfırlama tekniğini kısaca açıklarsak; Farklı tarayıcılarda farklı şekillerde yorumlanan html elemanlarının özelliklerini her tarayıcıda aynı görünmesini sağlayacak kodlara sıfırlama denir. Bu sayede her tarayıcıda bu elemanlar aynı sıfır noktasına gelecektir. Örneğin p{margin:0; padding:0}
Daha sonra xhtml sayfamıza css kodumuzu ekleyelim.
<style type="text/css">
<!--
@import url("style/fanatikmarslar.css");
-->
</style>
Bundan sonra genelde ben psd’yi açıp sırası ile eskizde çizdiğim yapıya uygun olarak kodlamama başlarım. Bunun dışında bir yöntem daha vardır ki ben genelde bu yönteme başvurmuyorum. Genel sayfa yapısını içeren kısımlar(üst alan, promo alanı, içerik alanı alt alan vb.) kodlanır ve içleri doldurulur. Dediğim gibi ben psd yi açarak sırası ile kodlamaya başlarım.
Tasarımlara bakınca site genel olarak anasayfadaki üç kolonlu yapı ve alt sayfadaki iki kolonlu yapı olarak ikiye ayrılıyor. Ana Sayfa kodlaması ile başlayalım
Bir sonraki makalede kaldığımız yerden devam edeceğiz.
IE6′da Liste Ardalan Görmeme Sorunu
7 Ara
Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.
İE hatalar serisini devam ediyoruz, ben uğraşmaktan ve yazmaktan bıktım ama ie hata vermekten bıkmadı.
Bu seferki hataya menüde denk geldim. Menüme background-image ile bir ikon koydum, her şey güzel ama ie6 görmedi. Araştırdım ve sonuç ie sorunu çıktı tabiki. Sorunun tam tanımı şöyle; listeleri(ul, ol ve dl) kapsayan elemana eğer float ve position:relative tanımı yaptı iseniz, ie6 liste background özelliklerini(resim veya renk) görmüyor.
Bu durmu bir örnek ile gösterelim.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ie lsite ardalan sorunu</title>
<style>
#menuKapsul{
position:relative;
float:left;
}
ul li{
background:url(ikon.gif) 3px 9px no-repeat;
list-style:none;
padding-left:12px;
}
</style>
</head>
<body>
<div id="menuKapsul">
<ul>
<li>Liste 1</li>
<li>Liste 2</li>
<li>Liste 3</li>
</ul>
</div>
</body>
</html>
Yukarı görülen basit bir listenin ardalanına resim yerleştiriyoruz. Kapsayıcı elemanada position:relative; ve float:left; tanımları atanmış olsun. Aktif tarayıcıların tümünde sorunsuz çalışan kodumuz, ie6′da sorunlu görünecektir. Sorun liste ardalan resminin görünmemesidir. Sorunu çözerken bayağı bir cebelleşmiştim. Sonunda çözümü bulunca ve bu çözümde çok basit olunca sevineyim mi üzüleyim mi şaşırdım.
Çözüm ise çok basit. Ardalan resmi uyguladığımız liste öğesine postion:relative tanımı yapıyoruz ve bu kadar düzeliyor.
ul li{
background:url(ikon.gif) 3px 9px no-repeat;
list-style:none;
padding-left:12px;
position:relative
}
bu kadar bu kod bizim sorunlarımızı gideriyor.
Bir başka çözüm yoluda kapsayıcı bir eleman daha ekleyerek bu elemana farklı konumlandırma değeri atayıp çözebiliriz, ama bu pek mantıklı değil, fazladan kod eklememiz gerektiği için. En iyi position:relative ekleyip sonuca gitmek.
Örnek kodu görmek için tıklayınız.
Bir ie6 sorununun daha üstesinden geldik bir başka ie6 sorunu ile daha karşınızda olana dek hoşça kalın.(Bu ie6 oldukça nasıl hoş kalacağız oda ayrı bir konu.)
CSS Yorumlarında Türkçe Karakter Kullandığımızda İE6′da Sorun Çıkarıyor
12 Kas
Yazı Fatih HAYRİOĞLU tarafından CSS kategorisine eklendi.
Bu durumla bir kaç defa karşılaştım ve sonuncusunda FirendFeed‘de yazdım, hatta benden önce Burak Dönertaş‘da yazmış konuyu. Konuyu biraz daha ayrıntısı ile burada paylaşmak istedim.
Sorunu başlıkta açıklayıcı bir şekilde anlattım sanırım. Biraz daha açarsam; css kodlarımızı yazarken çeşitli notlar alırız, örneğin sayfa yapısını oluşturan alanların isimleri(ustAlan), farklı tarayıcılar için yaptığımız düzeltmeler için tuttuğumuz notlar(kapsayamamaSorunu) vb.
CSS yorum satırları /* yorum */ işaretleri içinde yazıyoruz ve tarayıcılar bunları görmezden geliyor.
İnternet Explorer 6 eğer dosyanız UTF-8 ile kaydedilmemiş ise sorun çıkarıyor. Burada dosyayı utf-8 ve utf-8 BOM’suz kaydetmek arasında bir fark olmadı. Örnek dosyamı utf-8 ve utf-8 BOM’suz kaydettiğimde bu sorun düzeldi. Utf-8 ile kaydedince Türkçe karakterler bozuldu ancak tekrar yazıp kaydedince bir sorun olmadı.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
@import url("stil.css");
</style>
</head>
<body>
<p class="deneme1 deneme2">Fatih Hayrioğlu burada yorum yazmış sanane ie6, sen niye sorun yapıyorsun ki bu olayı.</p>
</body>
</html>
Bir paragraf yazı yazdık. Daha sonra
.deneme1{ font:12px Arial, Helvetica, sans-serif}
/*Türkçe katakter içermeyecek miş*/
.deneme2{ color:#f00}
Css dosyasının içine yukarıdaki kodları yazdım. CSS dosyasını eğer ANSI formatında kayıtlı ise ie6 css kodlarımı görmüyor.
Firefox ve diğer tarayıcılar ansi olmuş utf-8 olmuş fark etmiyor. Ama
İE6′da ise yukarıdaki gibi Türkçe karakter içeren yorum sonrasındaki sınıfı görmüyor. Daha sonra css dosyasını utf-8 olarak kaydedince sorun ortadan kalktı.
Eğer html ve css aynı karakter kodunda ise sorun olmuyor mesela ikiside iso-8859-9 ise sorun olmuyor. Ama ne zaman html utf-8 css iso-8859-9 olursa sorun oluyor.
Not: Karakter kodu değişiklikleri için NotePad++ kullandım.
Margin özelliği eksi değer alabilir. Eksi değerler bize tasarımsal olarak farklı uygulamalar geliştirmemize yardımcı olur. Tabi bir çok özellikte olduğu gibi burada da farklı tarayıcılarda bazı sorunlarla karşılacağız.
Eksi margin’li değerler bize görsel olarak avantaj sağlar, kodlamamıza yardımcı olur örneğin esnek yapılı sayfaları düzenlememizde ve bir elemanın çizgileri dışına taşırma işlemlerinde.
Eksi margin kullanımı bir hile değildir, CSS’in desteklediği normal bir değerdir.
Eksi margin bir çok yerde kullanıyoruz. Ancak biraz bilinçsiz kullanıyoruz. Ben burada çizgileri belirleyip ona göre hareket etmeyi düşündüm ve bu yazı ortaya çıktı. Eksi marginleri yakından tanıyalım.
Eksi Margin’i iki yerde uygularız.
- Sabit konumlandırılmış elemanlarda
- Float uygulanmış elemanlarda
Arayüz Geliştiricilerin Görev Tanımı
2 Kas
Yazı Fatih HAYRİOĞLU tarafından CSS, Web Standartları, XHTML kategorisine eklendi.
Şu anki bulunduğum durum ve FirendFeed’deki Arayüz Geliştiricileri grubunun etkisi ile bu yazıyı yazmayı düşündüm. Bir çok şirket eleman ararken bazı şartları ileri sürüyor, peki bunlar ne kadar gerçekçi. Bir listede ben çıkardım, sizlerde katkıda bulunursanız Arayüz Geliştiricilerini Görev Tanımı’nı çıkarmış oluruz.
Aslında bundan önce bir web ajansının yapısını ve iş akışını çıkarmak gerekir ve buna göre görev tanımları yapılmalıdır, ama o biraz daha kapsamlı bir iş.
Bizim memlekette genelde bir iş yapılır daha sonra standartları yerleşir. Aynı durum web mecrasında da var. Bir çok kişi bu mecrada çalışmasına ve bir sektör oluşmasına rağmen iş akışı ve görev tanımları tam olarak oturmamıştır. Ben yaklaşık 10 senelik bir çalışma hayatımdaki yaşadıklarım ve okuduklarım ile Arayüz Geliştiricileri için şöyle bir liste çıkardım;
- HTML bilmek: Çok iyi derecede HTML bilmelidir ve uygulamada gereksiz kod yığınlarında kaçınmalıdır.
- CSS Bilmek: Çok iyi derecede CSS bilmelidir. Katman tabanlı kodlamayı bilmelidir. Tablosuz sayfa yapısını tasarlamalıdır.
- Javascript: Çok iyi derecede javascript bilmelidir. Ajax ve javascript kütüphanelerinden birine(jquery, mootools, vd.) hakim olmalı ve uygulama geliştirebilmelidir.
- Gelişmiş Kod Yazma: Arama motorlarına, erişebilirlik ilkelerine, farklı platform ve tarayıcılara uygun kod yazmalıdır. En az kod ile en yüksek performansı almalıdır.
- İçerik Yönetim Sistemleri: Şirket içi CMS vb. içerik yönetim sistemlerini bilmeli ve kullanmalıdır.
- Mailing: Mailing standartların bilemeli ve buna uygun mailing kodları hazırlamalıdır.
- Görsel Araçlar: Adobe Photoshop, Firework veya benzeri bir programı kendi işini yapacak kadar bilmelidir.
- Takım Çalışması: Takım çalışmalarına uyumlu olmalıdır. Proje Yöneticisi, tasarımcı, flashçı ve programcılar ile etkileşimli çalışmalıdır.
- Yenilikçi: Web mecrasındaki gelişmeleri takip etmeli ve uygulamalarında bu yenilikleri gerektiğinde kullanmalıdır.
- Yabancı Dil: En az yenilikleri takip edecek kadar İngilizce bilmelidir.
- Sunucu Taraflı Diller: Asp.Net, PHP vb. sunucu taraflı dillerin genel mantığını bilmelidir.
Bu liste tasarımcı, programcı, flashçı ve Arayüz geliştirici ayrımını yapabilmiş şirketler için geçerlidir. Memlekette hala bu ayrımı yapmamış şirketlerin olması üzücü. Ayrıca yukarıda tanımladığımız Arayüz Geliştiricilerinin Görev Tanımı zamanla gelişebilir. Örneğin Arama motoruna uygunluk ve erişebilirlik ve javascript için gelecekte ayrı birimler kurulabilir. Daha da ileri gidip jquery geliştirici bile aranabilir. Malum sektör hızlı gelişiyor.
