Son birkaç gündür kafamı SiberKültür üzerine yoğunlaştırmaya çalışıyorum. İlk meyvasını da almış bulunmaktayız.

Artık SiberKültür 'ü klavye tuşlarıyla da gezebileceksiniz. Evet, gayet ciddiyim. Dilerseniz deneyebilirsiniz!

İşin mutfağı

Herşeyden önce bu sistem tamamen JavaScript ile çalışıyor.

Klavyeden basılan tuşların algılanmasını sağlayan script, bu çekik gözlü arkadaşın ürünü. Oldukça basit bir kullanıma sahip olan kütüphanenin üzerine birkaç ek yaparak Drupal sistemine entegre ettim. Geçiş efektlerini ise pek sevgili JavaScript kütüphanemiz Prototype ile sağladım. Bunların hepsini birleştirmek zaman zaman çıldırtsa da sonucunda harcadığım birkaç saate deydiğini düşünüyorum.

Özellik listesi

• Şuanda 5 tuş sitede gezintiyi sağlıyor
• Prototype ile animasyonlar kazandırıldı
• Fare düşmanları ve sıkı okuyucular için büyük kolaylık

Bilinen hataları

• Firefox'da klavyeden herhangi bir tuşa basınca arama satırı çıksın seçeneğiniz seçiliyse çakışıyor (teşekkürler aftermath)
• Opera'da ön tanımlı olarak gelen gezinti tuşlarını kullanıyorsanız, çakışabiliyor
• Yazı detay sayfalarında ve arama gibi sayfalarda şuanda sadece anasayfaya gitme tuşu
  H
  çalışıyor

Geleceği

• En kısa zamanda, çekik gözlü klavye tuşları scriptini detaylıca anlatacağım
• CSS ile nasıl klavye tuşu yaparsınız yazısı yazacağım yazdım
• Üşengeçlik kaplamazsa her yanımı, diğer sayfalar için de kısayollar (arama gibi) yapacağım

Tarayıcılarda transparan elementler yaratmak başlı başına bir sorun. Zira neredeyse tüm tarayıcıların algılayışları birbirinden farklı.

Ancak aşağıdaki 4 satır tanımlama, bir objeyi her tarayıcıda %45 oranında saydam yapacaktır:

.saydam {
opacity: 0.45;
filter:alpha(opacity=45);
-moz-opacity:0.45;
-khtml-opacity: 0.45;
}

Bu css tanımlaması yapılmış bir imaj aynen şu şekilde görülecektir:

opacity: 0.75 W3C tarafından standart olarak kabul edilmiş saydamlık tanımlaması (güncel firefox, safari ve opera'larda çalışıyor),
filter:alpha(opacity=75); Internet Explorer için geçerli olan kod,
-moz-opacity:0.5 eski tip mozilla tarayıcılar için,
-khtml-opacity: 0.75; bu ise, eski tip safari tarayıcılar için geçerli.

Güncelleme:

Eğer bu kodların IE6'da çalışmadığını görürseniz sakın şaşırmayın. Zira IE6 için bir deveyi hendekten atlatmamız gerekiyor. Bu sefer böyle bir css yapısı ve bir adet transparan png dosyası kullanmamız gerekiyor:

*html .ie6saydam{
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘images/ie6_transparan.png’, sizingMethod=’scale’);
}

IE6 Transparan PNG'yi buradan indirebilirsiniz.

Web sitelerini kodlarken insanların vazgeçemediği iki şeyden birisi, tüm siteyi tablolarla kodlamaksa bir diğeri de boşluk vermek, boyutlandırmak için spacer.gif kullanmaktır heralde.

Tabloların kabusuna şimdi girmeyeceğim ancak spacer.gif gerçekten kurtulmamız gereken bir hastalık. Kısaca anlatmak gerekirse, bu minicik bomboş imaj ne kadar çok kullanırsanız sayfanızı o kadar da ağırlaştıran bir gereksiz icattır. Aslında spacer.gif kullanarak:

• 1kb'dan bile küçük olsa da her seferinde bu dosyayı çağırmanız gerekir
• Her çağırışınızda bu gif kadar img elementi kullanmaız gerekir
• Internet tarayıcılar yüklenen her resmi sayfada göstermek için bir güç harcar, bu da "render" zamanını artırır, her ne kadar küçük de görünse
• Spacer.gif yüzünden html dosyası dışında sunucuya bir istek gönderilmek zorunda kalınır

Ufacık birşeyin yarattığı kabusa bakın! Spacer.gif'in mucidi David Siegel keşke 1996 yılında bu müthiş icadı gerçekleştirmeseydi.

Neden Bunu CSS ile Çözmüyorsunuz?

Spacer.gif'i kullanma amacı genellikle boşlukları, yükseklikleri vs ayarlamaktır. CSS bize bu konuda bir sürü nimet sunmuşken neden bir resime ihtiyacımız olsun ki?

margin ve padding özellikleri bu işler için biçilmiş kaftan!

Hiç olmadı bir html elementi kullanabilirsiniz:

<spacer type="block" width="40" height="15">

Sıklıkla karşılaştığım sorunlar arasında, -arşivci bir yapım olmamasından dolayı her seferinde cebelleşirim- JavaScript ile bir sayfadaki spesifik olmayan objeleri bulmak ve özelliklerini değiştirmek yer alır.

Örnek vermek gerekirse, bir div içerisinde class'ı myLink olan tüm bağlantıları bulmam gerekebilir.

En İyi getElementsByClassName Fonksiyonu

Gerçekten iddialı fakat öyle. Robert Nyman tarafından yazılmış bu fonksiyonla, döküman içinde veya belirli bölgelerdeki elementleri bulabiliyor ve onlara müdahale edebiliyorsunuz.

Sayfanıza eklemeniz gereken Js kodu şu şekilde:

/*
Written by Jonathan Snook, http://www.snook.ca/jonathan
Add-ons by Robert Nyman, http://www.robertnyman.com
*/

function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}

Kullanımı ise gayet basit:

getElementsByClassName(nerede, "elementler", "class");

Sayfadaki tüm elementler arasında class'ı menu olanları bulmak için:

getElementsByClassName(document, "*", "menu");

Veya sayfadaki div'ler içerisinde class'ı left olanları bulmak için:

getElementsByClassName(document, "div", "left");

Yazmanız yeterli.

Bu script hakkında detaylı bilgiyi sitesinden alabilirsiniz.

Başlık bir çoğumuz için anlamsız gelebilir. Basitçe anlamını açıklamaya çalışayım izninizle. Biliyorsunuz CSS ile elementlere özellikler verebiliyor ve bunları değiştirebiliyoruz. Fakat bazı anlar oluyor ki, mesela bir yazının sadece ilk karakterini görsel olarak değiştirmek gibi, işimiz oldukça uzuyor, hatta dinamik sistemlerde imkansız bile olabiliyor.

Bu esnada, Türkçe kaba olarak sahte olarak çevirebileceğimiz pseudo, "birşeymiş gibi görünen fakat aslında olmayan" anlamına geliyor.

Pseudo-class'ların genel kullanımı şöyle:

seçici:pseudo-class {özellik: değer}

Şimdi de pseudo-class'ları tablosuna bakalım:

Henüz karşılaşmamışlar için söylüyorum, bugüne kadar css yazmak ve tüm browserlara uyumunu sağlamak için harcadığınız vakit neredeyse sıfıra düştü.

Reset.css, adı üzerinde css tanımlamalarından bazıları sıfırlıyor. Böylece, gerek Internet Explorer sürümleri, gerekse de Mozilla Firefox ve diğerleri için başlangıçta tüm elementler aynı görünüme kavuşuyorlar.

Piyasada bu türde birkaç css tanımlaması bulmak mümkün. Bunlardan en popüler ikisi Yahoo! UI Library ve Eric Mayer'in reset.css'leri. Ben ise çalışmalarımda Yahoo!'dakini kullanıyorum. Gerek işyerimde, gerekse de kişisel çalışmalarımda aldığım verimi tahmin bile edemezsiniz.

İşte Yahoo! Reset.css:


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}


Şüphesiz browser savaşlarında en çok yorulanlar web geliştiricileri. Kullanıcıların aksine onlar her platformu düşünmek zorunda. Kodladığımız bir JavaScript Firefox 'da da Internet Explorer gibi çalışıyor mu, yazdığımız CSS 'ler tüm browserlarda aynı görüntüyü veriyor mu gibi bir çok durumda resmen taklalar atmamız gerekiyor.

Genellikle standartlara uygun davransak da, her halükarda browser uyumsuzlukları yaşadığımız oluyor.

İşte bu ve bunun gibi sorunların üstesinden gelmek için madalyonun Firefox tarafında işlerimizi kolaylaştıracak Firefox eklentileri!

Web Developer

En eski web geliştirici eklentisi bu olsa gerek. Web Developer araç kutusuyla; javascript, css, formlar ve daha bir çok şeye müdahale edebiliyor, düzenleyip, kapatabiliyorsunuz. Özellikle yağtığınız sayfalar üzerinde testler yapmanız için en iyi araç.

Html Validator

W3C 'nin html validasyon servisinin Firefox yansısı. Hazırladığınız sayfaların web ile uyumunu gözlemlemek için kullanabileceğiniz bir araç.

Firebug

Firebug, herhangi bir sayfa üzerindeki html elementlerine, css 'e ve javascript 'lere anlık olarak müdahale edebilmenizi sağlıyor. Ayrıca debug işlemlerinizi de çok kolaylaştırıyor.

Screengrab!

İşte favori eklentilerimden birisi. Özellikle web ajanslarında çalışıyorsanız, arada sırada da olsa web sitesinin tüm sayfa görüntüsünü almanız gerekebilir. Ekran alma yöntemiyle bunu defalarca yapıp, birleştirmeniz gerekir. Ancak bu eklenti tüm sayfayı, ne kadar uzun olursa olsun, anında size resim olarak veriyor.

IE Tab

Bir Firefox bağımlısıysanız, Internet Explorer 'ı açmak sizin için çok zor olabilir. Bu aşamada IE Tab, size Firefox üzerinden açtığınız bir tabde sayfanın Internet Explorer 'da nasıl görüneceğini görme imkanı sağlıyor.

Safari View

Internet Explorer 'ı düşünürken, Safari 'yi düşünmemek olmaz tabiki de. Bu eklentiyle sitenizin Safari 'de nasıl göründüğünü test edebilirsiniz.

FireFTP

Ftp programı olarak henüz kendinize bir uygulama seçmediyseniz, FireFTP size Firefox üzerinde bir şans tanıyor.

User Agent Switcher

Bilmeyenler için, bir web sitesine girdiğinizde, browser kimliğiniz sunucuya iletilir, yani Firefox kullanıcısı mısınız, yoksa mobil bir kullanıcı mısınız bunun ayırımını yapmaya yardımcı olur. Bu eklenti sayesinde sunucuyu kandırabiliyorsunuz.

SwitchProxy Tool

Özellikle ülkemizde Internet 'e gelen yasakları düşündüğümüzde proxyler çoğumuzun içli dışlı olduğu uygulamalar. Firefox üzerinden proxylerinizi yönetmek istiyorsanız bu eklentiyi kullanmalısınız.

ColorZilla

Webde gezerken bazı renk temaları gözünüze çok hoş gelir ve arşivlemek istersiniz. Veya grafik programınızdan kaydettiğiniz görselin renkleriyle browserda kullandığınız renkler arasında uyumu yakalayamamışsınızdır. İşte ColorZilla bu noktada yardımınıza koşuyor, Firefox üzerindeki renkleri piksel piksel görmenizi sağlıyor.

My Image Here

Bir web sitesinde reklam görseli nasıl duracak gibi testlerinizde bu eklenti işlerinizi oldukça kolaylaştıracaktır. Bu eklenti, herhangi bir sayfada bulunan görseli başka bir görselle değiştirmenize yarar.

SeoQuake

Arama Motoru Optimizasyonu (SEO), bir çoğumuzun dikkat ettiği ve önemsediği bir konu. Sitenizin arama motoru optimizasyonunu geliştirmek için en iyi araçlardan birisi de bu Firefox eklentisi.

KGen

Bir başka arama motoru optimizasyonu konusu da sayfanızda bulunan anahtar kelimelerdir. Bu eklenti sayfesinde kullanmanız gereken anahtar kelimeleri anında oluşturabilirsiniz.

Extended Copy Menu

Özellikle editörlerin işine yarayacak bu eklenti, herhangi bir sitede bulunan metini daha akıllıca kopyalayabilmenizi sağlıyor. Örneğin bir sayfada seçtiğiniz metini html kodlarıyla kopyalayabiliyorsunuz.

Tamper Data

Bu Firefox eklentisi sayesinde web sitesi üzerinde gelip giden her türlü sorguyu görebilir ve düzenleyebilirsiniz. Özellikle 404 tespiti ve açık yakalama konularında çok başarılı.

HackBar

Bu eklenti, Firefox aracılığıyla sitenizi altyapı açıklarına karşı test edebilirsiniz. Özellikle sql açıkları konusunda olukça başarılı.

SQLite Manager

Firefox eklentileriyle neler yapılabileceğinin bir örneği SQLite Manager. Bu eklentiyle bilgisayarınızdaki SQLite veritabanlarını yönetebiliyor, sql sorguları gönderebiliyorsunuz.

SiberKültür Hangilerini Kullanıyor?

1. IE Tab
2. Tamper Data
3. Screengrab!
4. Firebug
5. Web Developer

tercih ettiğimiz bazı temel Firefox eklentileri. Bunlar sayesinde gerek ajansta, gerekse de kişisel işlerimizde oldukça zaman kazandığımızı söyleyebiliriz.

Peki Siz?

Siz web tasarımı ve geliştirme yaparken hangi eklentileri kullanıyorsunuz? Yorum olarak yazmaktan çekinmeyin!

Dünyaca ünlü online ödeme sistemi Paypal üzerinde gözümle görsem inanmam dedirticek bir açık yakalandı.

Öyle ki, Paypal ile ödeme yapılan satış sistemlerinde herhangi miktardaki bir ürün veya hizmeti fiyatı ne olursa olsun değerinin çok altına almak mümkün. Yani 1.000$ lık bir yazılımı, 1$ a alabiliyorsunuz. Tam anlamıyla bir kaos diyebiliriz. Çünkü Paypal sistemi dünya çapındaki sistemlerin büyük bir yüzdesinde tercih ediliyor.

Açığı bir örnek üzerinde görmek isterseniz aşağıdaki benim test ettiğim ekran görüntülerine tıklayabilirsiniz. Örneklemeyi yaparken kesinlikle işlemin onay sürecini geçmediğimi belirtmek isterim.

Açığın mantığı ise asıl şaşırtan olay. Çünkü bu açığı kullanmak için ne hackleme hakkında üstün bir bilginiz olması gerekiyor, ne de bir bilgisayar dahisi olmanız. Açıkcası bu güvenlik açığını detaylı olarak buradan yazmak istemiyorum zira etik olarak oldukça olumsuz olacak ve bu açığı kullanacak bir sürü insanın başının belaya girmesini istemiyorum.

Herşey müşterilerin isyanıyla başladı! Dünyanın 8. harikası Internet, artık hayatın ta kendisi oldu ve insan yaşamının en önemli eylemini birinci önceliğine aldı: rekabet.

İşte bu noktada teknik gurular işin altyapı ve mantığını kurarken, marka uzmanları da buna bir isim buldu Web 2.0.

Web 2.0 Nedir?

Bu yeni web, artık müşteri (kullanıcı) her zaman haklıdır psikolojisiyle çalışıyor. Yani, yapılan herşey kullanıcı için, onun hayatını kolaylaştırmak için yapılıyor.

Bu bağlamda:

Web 2.0, daha fazla kullanıcının bulunduğu uygulamayı gerek görsel gerekse de yazılımsal olarak akıllı olarak geliştirmek

diyebiliriz.

Türkiye'de Web 2.0: Neredeyiz?

Ne yazık ki çoğu akım ve teknoloji gibi Web 2.0 da Türkiye'de bir hayli geriden gidiyor. Üstelik, bu yeni akım sadece tasarımdan ibaret olarak düşünülüyor, ki bu büyük bir yanılgı. Aslında herşey daha iyi uygulamalar üzerinde, yeni ve sade tasarımların pazarlanmasından ibaret.

Neyseki son zamanlarda kurumsal bazda olmasa da proje bazlı olarak Web 2.0 uygulamaları görebiliyoruz.

Birçoğumuz kenarından köşesinden duyduk veya henüz haberdar bile değiliz Microsoft'un bu yeni oyuncağından: Microsoft Silverlight!

Açıkcası webde adı geçmeye başladığı günden beri pek bir merakla takip etmekteydim bu yeni teknoloji ürününü. Tabiki de vaktimin ufacık bir kısmını ayırabildiğim için çok da doğru bilgilerle dolu olmadığımı gördüm, geçen hafta katılma şansını yakaladığım Microsoft Silverlight ve Expression Studio Eğitimi sayesinde.

Haftanın 3 gününü kaplayan bu eğitimden geriye kalanları sizlerle paylaşmaya ve Microsoft Silverlight'ı anlatmaya çalışacağım. Tabiki bu eğitimin mimarı sevgili Daron Yöndem kadar olmayacaktır.

Devamını okuyun