Stüdyo Gri Fare Logo
English
English
Tekdöner ailesinin resmi web sitesi

<h1>Kodların gizemli dünyası</h1>

Mircosoft Widnows [Wersion 6.1.4567]
Copyright © 2000BC Mircosoft Corporation. Tüm haltları saklıdır.
C:\>_

ftp>mput *_

C:\>ftp www.dirty-basement.com_

Connected to dirty-basement.com.
220---------- Welcome to Pure-FTPd [privsep] [TLS] ----------
220-You are user number 3 of 1000000000 allowed.
220-Local time is now . Server port: 21.
User (dirty-basement.com:(none)):_

User (dirty-basement.com:(none)): ghetto_dude

331 User ghetto_dude OK. Password required_

Password:

230 OK. Current restricted directory is /
ftp> cd /safebox785
250 OK. Current directory is /safebox
ftp> mput *
200 PORT command successful
150 Connecting to port 54585_

Please wait...
All your files are being copied to dirty-basement.com/safebox785...

30.248 dosya başarıyla kopyalandı_

Uydurma DOS Ekranı Gösterisi © 2015 Armağan Tekdöner

Merak etmeyin, hiçbir dümen dönmüyor.
Sahte siyah ekrandaki yanlış yazılmış kelimeler, gerçekte işleyen bir program olmadığının ipucudur. Bu sadece bir JavaScript çalışmasıdır, sayfayı güncelleyince şov yeniden başlar.

Piyasa profesyonelleri için hazırlanmış bir vitrin

(grifare.net sitesinde bu konular daha detaylı olarak sunulmuştur.)

Ara sıra güncellenen bir cins tanıtım sayfasıdır.

Varsayılan ziyaretçi (bu nasıl söylem böyle? Bu sayfayı anlamak için Türkçe'den Türkçe'ye tercüman gerek) konuyu muhtemelen benden daha iyi bileceği için, yaratıldıkları dilde bile gerçekte anlaşılamayan bu tuhaf web jargonunu sakınmadan kullandım. İtiraf etmeliyim ki bu sayfanın yazarı değil de okuru olsam, teknik kısımların Türkçe'sini anlamazdım. Anlayana da aşk olsun.

"Bu yaşta, bu web şeysi de nereden çıktı?"

Geleceğin tümüyle üzerine inşa edileceği platformun web olacağı düşüncesinden hareket ettim. Aradığım her şey şimdiden burada!
Bence CERN'den daha ileri araştırma merkezinin adı web'dir. Web, Wall Street'i yıllar önce gölgede bırakmış bir mâli işlemler borsasıdır. İnsanlar fiziksel eylemleri gerçekleştirebilmek için bile ekran başında giderek daha fazla zaman geçireceklerdir, hatta en büyük meydan muharebeleri bile burada olacaktır.

"Öğrendiklerimizi kendimize saklarsak ilerleme olmaz," görüşündeyim ve bilime inandığım için açık kaynak yandaşıyım.

Rayından çıkmış telif hakkı olgusunun yakında Türkiye'de bile olsak e*emizi şeydeceğinden emin olabilirsiniz. Bugün alışkanlık böyle olsa da, ziyaretçilerini tehditler ve koşullar eşliğinde ağırlayan web sitelerini ben çatlak addediyorum. Verilmesi amaçlanan bir hizmetin veya yapılan bir gösterinin gizlisi-saklısı-özeli mi olur? "İçeriden aydınlatılmış-perde takılmamış-bakması yasak fakat," anlayışında vitrin mi olur? Hötöröflükte tesettür caiz midir? Sonra da diyorlar ki...
(Bu görüşlerim başkalarının telif haklarına saygı göstermediğim anlamına gelmez.)

Burada işinize yarayacak ne bulursanız alın, buyurun dükkân sizin.

Armağan Tekdöner, Web Geliştirici


Webce konuşmak — HTML

Ve 1989'da oyunu başlattı.

HTML5'in anlamsal yapısını çok beğendim ve tümüyle benimsedim. Eski güzel XHTML 1.0 transitional belge tipi'nde olduğu gibi içeriksiz elemanları kapatmaya devam etsem de, HTML5'in getirdiği her türlü artıyı uygulamaya çalışıyorum. Kodlama süreci boyunca geçerleme hizmetleriyle hataları ayıklıyorum ama %100 geçerli kod kullanmak gibi bir takıntım yok. Çünkü birçok yenilikten ve deneysel koddan mahrum kalmak demek bu. HTML, giderek XML'e dönüşme yolunda mı dersiniz?

Konum Belirleme: Yüksek müsaadelerinizle

HTML5/JavaScript işbirliği sayesinde kullanıcının yerini saptamak çok kolay artık. Fakat işlemesi için kullanıcının rızası gerekiyor ve eski tarayıcılarla çalışmıyor.

İstenildiğinde onay verirseniz, aşağıdaki düğme sizin yerinizi size gösterecektir.

HTML5 Doğrulamalar

HTML5'in yerleşik form doğrulamaları çok parlak bir fikir. Bilgiler sunucuya daha hiç gönderilmeden kullanıcı yanlışları hemen görüyor.

Demo Form
Aşağıdaki form hiçbir yere bilgi göndermiyor. Sadece yerleşik doğrulamalarla ilgili bir etüd.

Tüm alanlar zorunludur

Sayın












 

Bütün bu doğrulamaların aşağıdaki türden bir JavaScript saldırısıyla etkisiz hâle getirilebildiği malum. Sunucu taraflı olmayan doğrulamalar sadece kullanıcıya yol göstermek içindir, korsanlarla savaş ayrı konu.

Yazıcı için tasarlanmış doldurulabilir formlar

aandc ekran görüntüsü
2014'te AANDC'de çalışırken kodladığım .

Bunlar da Georgian College'de yaptığım 2013 - 2014 dönemine ait HTML5 çalışmaları.


Şık giyinmek — CSS

1994'te kuralları koyan sayesinde.

Özlü söz: Yıkmak için kurallar olması gerekir.

CSS (Geçişli Stil Sayfaları) sınırlarını zorluyor, ben de ayak uydurmaya çalışıyorum: Harici Geçişli Stil Sayfaları benim en sevdiğim oyun bahçesidir. Oyunlarım arasında PSD - HTML/CSS dönüşümleri, Bootstrap ve LESS gibi kütüphaneler ve çatılar, veya ekrana özel tasarım kurallarını kendim belirlemek var.

İşte bu sitenin harici css dosyası.

Web Fontları

Eskiden kullanıcının bilgisayarında kurulu olmayan fonta hayat yoktu. WEB FONTLARI sayesinde artık her türlü ciks font herkesin ekranında görüntülenebiliyor.

Kimse bana "bu font bende zaten var," demesin.

Bootstrap

Bootstrap Demo sayfasına bağlantı
Izgara Sistemi uygulaması

Yukarıda bağlantısı verilmiş çalışmanın css dosya indeksi.

Suckerfish Navigasyon Menüsü

"Bağlantılar" hiçbir yere bağlı değildir.

Harekete geçmek — JavaScript

1995'te öncü oldu ve hareket başladı.

Kullanıcı taraflı yazılım boru değildir, hurafelere inanmayın.

Amaç kullanıcı deneyimini daha iyiye götürmek. Canlandırılmış resimlerle yaratılan dinamizm, etkileşimli slayt gösterileri sayesinde daha çok resmi daha az yerde sunmak, formları doldururken ipuçları veren kullanıcı dostu doğrulamalar, veya dönüşümlü bannerlar...

Diyaloglar bile gelişti

JavaScript ancak okay deyince kapanan şu eski taciz mesajlarından...

... veya arkası gelmez bu diyaloglardan daha fazlasını yapıyor.
Bu eğlence 5 – 12 tıklama arasındadır.

Doğrulamalar

JavaScript doğrulamaları kullanıcı hatalarını kaynağında önler.

Screenshot of a validation exercise
Kullanıcı taraflı doğrulamalar

Kullanıcı taraflı doğrulamalar tarayıcı ayarlarıyla kolayca etkisiz hâle getirilebildiğinden, korsanlar bunlara sadece gülüyorlar: Burada güvenlik önlemlerinden söz etmiyorum. Korsanın işi yok da bana boş alan mı gönderecek?
JavaScript doğrulamalar, özellikle kıllık olsun diye gönderilen boş formlara karşı ilaç gibidir, o tip vandal kullanıcılar ciddi bir tehlike arz etmeseler de, veritabanlarımızı boş veya çöp girdilerle doldurmak istemeyiz.

JavaScript enjeksiyonları

Gelelim daha karanlık konulara. HTML5 doğrulamaların bittiği yer.

İşte bir gerçek örnek:

2 - 8 arası karakter yazıp gönderiniz

 
  1. İsim alanına tek karakter, 8'den fazla karakter, rakam veya özel karakter girmeyi, ya da boş göndermeyi deneyiniz. Sistem kabul etmeyecek.
  2. Tarayıcınızın adres çubuğunun içine tıklayın, mevcut adresi silin, oraya aynen javascript: yazın. (Bunu kopyalayıp yapıştıramazsınız.) Enter tuşuna henüz basmayın.
  3. Sonra şu griye boyalı yeri kopyalayıp $('#js_form #js1').removeAttr('maxlength pattern required'); ...
  4. ... adres çubuğuna yazdığınız javascript: kısmının devamı olarak yapıştırın. Enter tuşuna basın. Hiçbir şey olmamış gibi görünecektir.
  5. İsim alanına tek karakter, 8'den fazla karakter, rakam veya özel karakter girmeyi, ya da boş göndermeyi yeniden deneyin. Sistem şimdi kabul edecek.
Dikkat...

... bu demo sadece burada bu formda çalışır. Bu form hiçbir şey yapmıyor, hiçbir yere gönderilmiyor ve veritabanı bağlantısı yok.

jQuery

Tekerleğin icat edildiğini duydum ve aynı şeyleri yeniden icat etmeye niyetim yok. Daha az kodla daha çok iş yapmak varken, neden yerli JavaScript'e bulaşalım?
İşte bir jQuery tabanlı alışveriş listesi uygulaması. Orada bolca CRUD operasyonları var.

— Eğer HTML web uygulamaları için tasarlanmış olsaydı, işte böyle bir şey olurdu.

Aşağıya yazacağınız şey tepetaklak olacak, kırmızıya boyanacak ve boldlaşacak. Üstelik bunlar siz herhangi bir şey göndermeden olacak. Düşünce okumaya doğru yolculuk devam ediyor.

{{string.trick1}}

Hareketli Grafik

Demo sayfaya bağlantı
Dev Şalter Gösterisi

Yukarıdaki ekran görüntüsüne tıklayarak "Dev Şalter" gösterisini inceleyin.

jQuery: Devingen Portal

cell phone screenshot

Bu meretlerin Türkçe'si beni de gıcık ediyor. Sürç-i lisan ettiysem affola, Google'ın yalancısıyım.

Bir yeraltı faresi olarak e-posta almak için cep telefonuna ihtiyacım yok. Ama normal insanlar başka, herkes leyleği havada görmüş adetâ.
İşte jQuery Mobile bunun için var. Siteyi 'da görün.

Bu arada, bu sitenin harici JavaScript dosyası emir ve görüşlerinize hazırdır.


Geçmişe mazi, yenilenmiş sayfaya gazi derler — PHP

1994'te sunucu taraflı yazılımı baştan yarattı.

"Az önce buradaydı ama ben sayfayı yenileyince tamamen yok oldu," mu diyorsunuz?

Cevabım "Aynı nehirde iki defa yıkanılmaz, çünkü ne o nehir aynı nehirdir, ne de siz aynı insansınızdır," olacaktır, aynen Heraklitüs'ün söylediği gibi.

Oluşturma, okuma, güncelleme ve silme

Bir zamanlar site yöneticileri her şeyden ama her şeyden sorumluydu, atan sigortayı bile adamlar değiştiriyordu yani.

Artık işler zor. Sanırım site yöneticiliği işi sadece site yönetimiyle sınırlandı. İçeriğin güncellenmesi başka, olayın kodlanması başka uzmanlık alanı olalı çok oldu.

bir admin uygulamasının ekran görüntüsü
Adminator Inc.

4 esas işlemi yapan admin tarafı burada. Aynı admin tarafını kullanarak güncellenebilen, veritabanına bağlı web sitesi de aynen burada.

Konum Belirleme ve fazlası: Size soran olmadan

Bir web sayfasına girdiğiniz anda, ziyaret ettiğiniz site hakkınızda tonla bilgi toplama yeteneğine sahip. Konumunuz bunlardan sadece bir tanesi. Bizim sitenin kimse hakkında herhangi bir bilgi toplamakta en ufak bir çıkarı yok. Bu bölüm, verilerin kimseye soru sormadan da elde edilebildiğini göstermek içindir.
Burada gördüğünüz hiçbir şey bizim veritabanına doldurulmuyor.

Selam Baltimore / US

PHP aşağıdaki verileri elde etti
IP adresiniz: 54.198.142.121
Tarayıcınız: not detected
Tarayıcınızın sürümü: 2.0

PHP Postacı

Otomatik e-postalama işlemlerin teyidi veya belgelerin çoğaltılması gibi birçok yararlı amaca hizmet ediyor. Ama istenmeyen postalardaki patlama veya dolandırıcıların ekmeğine yağ sürülmesi de hiç hoş olmadı. Yakın zamana kadar kazanılan sahte piyangolardan veya Afrika'daki genç milyoner dullardan gelen e-postalardan geçilmiyordu..

Belli ki son yıllarda istenmeyen e-postalara karşı çok güçlü önlemler alınmış. Bu tarz bir e-postanın gelen posta kutusuna ulaşması artık neredeyse imkânsız. Aldığınız bu tip mektupların ne kadar azaldığını fark ettiniz mi?

PHP postacı eskisi gibi olmasa da hâlâ işbaşında. Aşağıda küçük bir uygulama var ve sadece egzersiz için yaptım. Lütfen deneyiniz, içinde zararlı madde yok ve benim de kimseye istenmeyen posta göndermek gibi huylarım yok.

 
(Email vermek istemiyorsanız şu hizmet size göre olabilir.)

... kutucukları seçiniz...

(Bu eğlencenin devamı İngilizcedir, 3-5 satır tercüme için bir yığın dosya daha eklemeye üşendim açıkçası.)

PHP Postacı, veritabanına girdi yapan buradaki tek uygulama. Lütfen bunu kullanarak kimseye istenmeyen e-posta göndermeyiniz. IP adresiniz ve başka bilgileriniz veritabanında saklanacaktır, alıcıya da IP adresiniz gönderilecektir.

Doğrulamalar

Web formlarla dolu ve birçok ciddi iş için gerçek veri gerekiyor. Bankanın web sitesi müşteriye ismini sorduğunda "123" veya "qwer" cevabını alırsa, işlem yapamaz kuşkusuz.

Bütün giriş alanları, korsanların en sevdiği yerlerdir ve kod enjeksiyonu yapmak için birebirdirler. Giriş alanları, doğrulamalarla korunmalıdırlar. Bunlar kullanıcının istenmeyen karakterleri girmesini engeller. Örneğin, kullanıcı adı için gösterilen alana 10.000 tane karakter veya sayılar girilmesine gerek yoktur. Doğrulamalar, düzenli ifadeler sayesinde sadece beklenen tipte girişlere izin verirler. (Tabii gerçeği sahte zannederek onaylamayan kötü hazırlanmış düzenli ifadeler de yok değil.

İşte bir sunucu taraflı doğrulama çalışması. Kullanıcı taraflı doğrulamaların aksine, bunları devre dışı bırakmak olanaksızdır. Bu nedenle en önemli güvenlik önlemleri bunlardır.

Bu da isteğe göre özelleştirilebilir eski moda bir XHTML form. Dosyalar burada: İndir


Kasa — MySQL

MySQL denilen ilişkisel veritabanının "My" kısmı, adını onu dünyaya getirenlerden Michael "Monty" Widenius'un kızından almış. 1995'teki mucitler işte bu adamlar: .

Ceketin sadece 100 lira edebilir. Eğer cüzdanında 100.000 lira limitli kredi kartın varsa ve cüzdanın ceketinin iç cebindeyse, ceketini ortalıkta bırakma derim.

Veritabanları günümüzde kasa daireleridir. Birçok evde hiç yoklardır, birçok evde birkaç tanesi vardır ama içlerinde değerli bir şey yoktur. Ama şu çok pahalı evler aslında sadece kasalarının içindekiler sayesinde değerlidir.

SELECT php_bilenler FROM mysql_bilenler
WHERE ( patron_ismi='oracle' AND alet_ismi='workbench' )
ORDER BY yetenek_seviyesi;

Yapısal Sorgulama Dili'ni iyi konuşuyorum ve samanlıkta iğne aramanın ilmini anladım: Milyon girdi içeren bir veritabanında bile arananı-aranmayanı veyahut köşe bucak saklananı bulabilirim.
Georgian College'da yaptığım kapsamlı MySQL çalışmaları:

Humber College'den kalma ders notlarımı aşağıdaki bağlantılardan indirebilirsiniz. (2010 tarihlidir, umarım yararlananlar çıkar.)


İnsanın da okuyabildiği bir bilgisayar dili düşünün — XML

XML bir şey yapmaz diyorlar. Ne yani, ekrana takla mı attırsın? Aslında hangi yazılım kendiliğinden ne yapmış ki? Hepsini biz insanlar yapıyoruz.

"Birbirine benzemeyen sistemler arasında iletişim sağlamak," — Dr Charles Goldfarb.

XML dosyaları kem gözlerden ırak tutulsalar da, web siteleri onlara muhtaçtır. DTD, XSLT, RSS, ve neler neler... XML teknolojisi, çılgıncasına veri depolamaya müsaittir. İleri uygulamalar bir yana, sadece site haritaları bile XML'in ne ölçüde gerekli olduğunu anlamaya yeter.

Bu sitenin XML haritası ve RSS beslemesi dosyalarına bakarak yaptığımız XML uygulamalarını görebilirsiniz. Ya da 2011 tarihli çalışmalarımdan şu örneklere göz atın: XML-XSL applications.


Ağaca bakarken ormanı ıskalamaktan kurtulmak — CMS

Eğer 'ın başını çektiği WordPress (2004) veya 'ın yarattığı Drupal (2001) gibi İÇERİK YÖNETİM SİSTEMLERİ (CMS) olmasaydı, dev kurumlar veya trilyon dolarlık ekonomiler bugün web sitelerini nasıl yaparlardı, merak ediyorum..

Bazen metnin kendisi fontundan önemlidir ve bazı web siteleri kullanıcıların yazdığı metinlerle ayakta değillerdir. Benim bildiğim yazarlar kendi metinlerini kendileri yazarlar.

İçerik Yönetim Sistemleri kodlamaya değil, içeriğe konsantre olmaya yarar. Birçok yararlı site kodlamaktan zerre kadar anlamayan insanların eseri ve buna en ufak bir itirazım yok.

Herkese iyi haber: Kodlamayı azaltmak amacıyla sunulan bir sürü sistem var.
Bize iyi haber: Bu sistemleri özelleştirmek, yine de kodlama uzmanlığı istiyor.

WordPress add-on'larını ve Drupal modüllerini seviyorum.

Drupal'la yapılmış bir web sitesi


Ser verip sır vermemek — Steganografi ve Kriptografi

Web Güvenliği - Steganografi, Kriptografi, Şifreler, Şifrelemeler, Karmalar ve fazlası

Steganografi

Varlığı gizlenmiş mesaj, (mesajın kendisini saklamak fikri) M.Ö. 440 tarihlerine dayanıyor.

ÖrneklerTalimat

Steganografi örnek 1:
0 piksel font - aynı renk arka plan numarası

Selam moruk.
Başka bir gizli mesaj da şu olabilirdi: 'Viens à l'hotel à minuit comme d'habitude tu ne peux pas savoir comme j'ai envie de toi, comme j'ai envie que tu me prennes là, tout de suite.'Ne haber?
  • Metindeki "Selam moruk. Ne haber?" yazan satırları seçiniz.
  • Seçtiğinizi kopyalayınız.
  • Gizli mesajı okumak için istediğiniz bir metin editörüne (notepad gibi) yapıştırınız.

Steganografi örnek 2:
Yanlış yönlendiren dosya uzantısı numarası

Aşağıdaki gülen yüz gizli bir mesaj içeriyor.

gizli mesaj içeren bir resim dosyası
  • Resmin üzerine sağ tıklayın
  • İstediğiniz adla nereye isterseniz kaydedin
  • Kaydettiğiniz dosyayı bulup, (notepad gibi) bir metin editörüyle açın
  • En alttaki satırı okuyun

Steganografi örnek 3:
Dosya uzantısını değiştirme numarası
İleri kullanıcı bilgisi gerektirir, Notepad++ veya benzeri bir gelişmiş metin editörünüz var mı?

Aşağıdaki bağlantı 3 saniyelik bir ses dosyasıdır. Çalınca "Hello John Doe" der. Lütfen tıklayıp dinleyiniz.
(Eğer tarayıcınız kaydetme veya açma seçenekleri sunarsa, direkt olarak kaydedebilirsiniz.)

  • Kaydedilmemişse henüz, istediğiniz adla nereye isterseniz kaydedin
  • Kaydettiğiniz dosyayı bulup, (Notepad++ gibi) gelişmiş bir metin editörüyle açın
  • "ATTENTION! SELECT and DELETE ALL YOU SEE ABOVE ALONG WITH THIS PHRASE AND SAVE THE FILE WITHOUT CHANGING ITS EXTENSION! LEAVE NO BLANK SPOTS AT THE TOP AFTER DELETION. DELETE UNTIL HERE" diyen sonlardaki 213. satıra yakın cümleyi bulun
  • Bu cümlenin üstünde ne varsa, cümlenin kendisiyle birlikte hepsini seçerek silin, tepede boş yer kalmasın
  • Dosyayı kaydedin ve editörü kapatın. Dosyanın uzantısını .mp3 yerine .jpg olarak değiştirin
  • Çift tıklayarak dosyayı açın ve mesajı keşfedin

Kriptografi

İçeriği gizlenmiş mesaj, (mesajın anlamını saklamak fikri) M.Ö 19.yüzyıla kadar uzanır.

İkâme yöntemiyle şifreleme. Mantık basit ama, hangi karakterin hangi karakter yerine konduğunu bilmeyince olayı çözmek hiç kolay değil. Örneğin "12345678" şifresinin "istanbul" demek olduğunu anlamak, 1'in i, 2'nin s, 3'ün t, 4'ün a, 5'in n, 6'nın b, 7'nin u, 8'in l yerine konduğunu bildikten sonra çocuk oyuncağı. Buna "anahtar" deniyor. Anahtar yoksa "12345678" şifresini çözmek için, hele metin tek kelimeyse, kahin olmak gerek. Ama metin uzun olunca, insan gözü oruntuyu (patern) şak diye algılıyor.

Ama bugün kazın ayağı öyle değil. Bakınız aşağıdaki demo.

Şifrelemeler



  
Girdiğiniz kullanıcı adı:
Girdiğiniz şifre:
MD5 yazısını böyle şifreliyor: d41d8cd98f00b204e9800998ecf8427e
MD5 yazısını böyle şifreliyor: d41d8cd98f00b204e9800998ecf8427e
SHA1 yazısını böyle şifreliyor: da39a3ee5e6b4b0d3255bfef95601890afd80709
SHA512 yazısını böyle şifreliyor:
cf83e1357eefb8bdf1542850d66d8007d620e4050b5715dc83f4a921d36ce9ce47d0d13c5d85f2b0ff8318d2877eec2f63b931bd47417a81a538327af927da3e
DES yazısını böyle tuzluyor ve şifreliyor: texQN4goIMuj6
DES yazısını böyle tuzluyor ve şifreliyor: meo50yJkjynKw


Hassas bilgilerin veritabanlarında nasıl kaydedildiğini görmek için, istediğiniz karakterleri girip düğmeye basın.
Kaydedilen veya gönderilen hiçbir şey yok. Bu sadece bir demo.


Nasıl bir websitesi istersiniz? — Proje Yönetimi ve Bilgi Mimarisi

Proje Yönetimi kendi başına işleyen bir yazılım değildir.

"Haydi ama yahu! Şu bizim 78 sayfalık siteyi bu hafta sonu yapıversen, içine de bir ürün satış sayfasıyla bir forum koyuversen olmaz mı sanki?"

Web sitesi yapmak bir projedir

Sanıldığından çok daha fazla kalem efendiliği gerektirir, genellikle birden fazla webci çalıştırır, bazen zayiât verilir. Ufak bir sitenin 3 aydan kısa sürmesini beklemek hayâldir, büyük siteler bir senede bitse başarı sayılır. Gerçek örnekler eşliğinde bu gelişim sürecinin evreleri aşağıdadır.

Ben böyle çalışıyorum.

  1. ÖN ARAŞTIRMA
    Müşterinin sektörü üzerinde araştırma yap ve sektörün ileri gelenlerinin web sitelerinde neler olduğuna bak. Detaylı bir ARAŞTIRMA RAPORU sun. (Bir hafta kadar sürüyor.)
  2. ÜRÜN ÖZELLİKLERİ
    Web sitesinde hangi özelliklerin yer alacağını sıralayan bir ÜRÜN ÖZELLİKLERİ BELGESİ hazırla. Bu aynı zamanda bir sözleşme niteliğinde oluyor ve onaylanması bir ayı geçebiliyor. Ayrıca webci olarak kendi sorumluluklarını sınırlayan bir de hukuki metin sun.
  3. Ana sayfanın ÇİZİMİ
    Geometrik şekillerden oluşan bir çizim hazırlayarak, müşteriye ana sayfanın görsel bir şemasını sun. Diğer ögelere (renk, font, resim gibi) girilmeden neyin nerede olacağı belirlensin. Bu çizimlere TEL ÇERÇEVE deniyor, birkaç günde hazırlamak mümkün.
  4. ZAMAN ÇİZELGESİ
    Hangi işi kimin ne zaman yapacağının adını koyan PROJE YÖNETİM PLANI isimli bir başka belge sun .
  5. TASARIM
    Görüntü işleme yazılımları marifetiyle ana sayfa için bir eskiz hazırla ve katmanları korumak için .psd formatında kaydet. Müşteriye .jpg dosyasını sun. İstenen değişiklileri .psd üzerinde kolayca yapıp, yeni bir .jpg sunabilirsin. Onay sürecinin bir-iki haftada bitmesi beklenebilir.

    İşte bir Karşılama Sayfası tasarım paketi:  .jpg TASARIM   .psd TASARIM dosyasını İNDİR   HTML versiyonu

    2 başka tasarım örneği için simgelerde gezin     

  6. YAPIM
    İstenen değişiklikleri yaptıktan sonra, eğer site elle kodlanacaksa CSS-HTML dosyalarını yaz. Eğer CMS kullanılıyorsa kişiselleştirme çalışmalarına başla. Navigasyon nasıl olacak? Müşteriyle beraber kararlaştır. Artık eklentileri ve modülleri kurabilirsin. Bu süreç en uzun olanıdır ve 2-6 ay arası sürmesi normaldir.
    (Bütün inşaat çalışmalarını ve denemeleri, geçici alan adları kullanarak kendi sunucularımızda gerçekleştiriyoruz. Bu esnada yapılan işler, robots.txt dosyasındaki şu basit komut sayesinde   User-agent: * Disallow: / arama motorlarına kapalı oluyor. O alanın adresini kimseye duyurmadığımız için, davetsiz misafir sayısı yok denecek kadar az olacaktır. Ama müşteri tüm gelişmeleri istediği anda izleyebiliyor. Müşterinin sunucusunda hiçbir işlem gerçekleşmediğinden, mevcut siteye bu süreç dahilinde el sürmemiş oluyoruz. Müşterinin sunucu bilgilerini bilmiyoruz bile.)
    Burada esas olan müşteriden sürekli geri bildirim ve yorum almak. Haftada bir düzenli Skype toplantıları yap. Bu sürecin amacı, içeriği hazır olmasa da her özelliğiyle çalışan bir web sitesi elde etmek.
  7. TRANSFER
    Test sunucudaki site tümüyle bitip onaylandıktan sonra, bütün dosyalar müşterinin sunucusuna, bir başka alan adının altına yükleniyor. Burada .sql dosyasını transfer etmek işin püf noktası. Yeni alan adı altında her şeyin doğru olarak göründüğünden emin ol.
    Bu süreç, müşteriye yönetim paneli eğitimi vermek için en uygun zaman. Böylece gerçek içerik de müşteri tarafından bir yandan yüklenmiş oluyor.
    Müşterinin eski web sitesi halen asıl geçerli site ve henüz kimse yeni siteyi bilmiyor.
    Kara kutu testi yaparak her şeyin istendiği gibi çalıştığından emin ol. Bütün bu sürecin de bir aydan fazla sürmesi beklenebilir.
  8. CANLI YAYIN
    Eski siteyi yedekle ve o siteye ait dosyaları sunucudan sil. Yeni yaratılmış alan adı altındaki tüm dosyaları gerçek alan adının altına taşı. Bu işlemlerin bir Cumartesi gecesinde birkaç saat içinde tamamlanması normaldir ve siteye en az ihtiyaç duyulacak zaman seçilir.
    Ve nihayet yeni site yayında!
    (Hemen bir XML site haritası yarattırmayı ve yüklemeyi unutma.)
  9. ARAMA MOTORLARI
    Site adresini arama motorlarına kaydet, gerekli araçları kur ve ayarları yap. Bir haftan var.
    (O hafta boyunca siteyi de gözlem altında tut.)
  10. PARA
    Bakiyeyi tahsil et ve bara koş, ama sakın eskiden alıştığın şekilde dut gibi sarhoş hâlde araba kullanma, Kanada'da adamı oyarlar.

Gerçekten de tam olması gerektiği gibi mi? — Kalite kontrolü

Kalite kontrolü bitmeyen bir süreçtir.

— Ürün Özellikleri Belgeleri boş yere yazılmazlar

Kalite kontrolü, aşağıdaki şu 4 ana madde esas alınarak yapılır.

  1. Web sitesi, ürün özellikleri belgesinde yapacağı söylenen bir işi yapmıyor.
  2. Web sitesi, ürün özellikleri belgesinde yapmaması gerektiği söylenen bir işi yapıyor.
  3. Web sitesi, ürün özellikleri belgesinde sözü geçmeyen bir işi yapıyor.
  4. Web sitesini gezmek zor, kullanmak zor, site yavaş, veya – testi yapan kişiye göre – son kullanıcı bir şeylerin yanlış olduğunu düşünecek.

Bu site kara-kutu testinden geçmiştir.


Arama Motorlarıyla Arayı İyi Tutmak — SEO

Stüdyo Gri Fare'yi kuruluş olarak Google'la, grifare.info'yo bir web sitesi olarak Bing'le, bu sitedeki pdf dosyalarını Yandex'le.

"Ölümsüzlük iksirini elde ettim ama satacak müşteri bulamıyorum."

(Hatırlatma: Bu bölümdeki yöntemler sadece küçük ve orta boy yarı-şahsi web siteleri için geçerlidir. Setur'a seyahat sitesi yapmayı öğretmiyorum.)
Bugünkü arama motorları öyle birkaç sihirli anahtar kelime kullanarak kandırılacak cinsten değil. Eğer maksat bir konudaki arama sonuçlarında üst sıralara yükselmekse, benim ilkem efendi takılmaktır.

SEO anlayışım

Eğer içeriğin kendisinde iş yoksa, site sahibi burada sıraladığım tekniklerden pek bir şey beklemesin. İşi olduğundan çok daha önemli göstermek de mümkün değildir. Döviz büronuzun TCMB'den daha büyük olduğunu Google'a anlatamazsınız. Buna rağmen, bu oyunun da kuralları var ve kurallara uymak lazım. Yoksa iş karman çorman olur, Google size hak ettiğiniz önemi bile vermez.

Kendime Talimat

  1. Web sitenin ne hakkında olduğu şak diye anlaşılsın.
    Başlık uygun mu? Tanımlama ve anahtar kelimeler her bir sayfada var mı?
  2. Anahtar kelimeleri dikkatle seç.
    Sitede geçmeyen kelimeleri hiç koyma. Sözlüğün tekini kopyalayıp yapıştırma, 20'den fazla anahtar kelime Google için kuru kalabalık. İyi bir anahtar kelime "yazar fotoğrafçı" olabilir ama tek başına "fotoğraf" kelimesi seni bir yere vardırmaz. veya gibi sitelere girip anahtar kelimelerini analiz et.
  3. Dosya isimlendirme yöntemleri.
    img1 adlı fotoğraf ile sayfa10 adlı sayfa, robotlara bir şey ifade eden isimler değillerdir. İyi bir sayfa adı istanbul_photographs.html şeklinde olabilir. Bütün fotoğrafların "alt yazısı" var mı?
  4. Microdata modası: Yapılandırılmış Veri
    Bu site tarafından belirlenmiş en son moda kelime haznesini kullanıyor. Kelimeleri ha bire değiştirseler de, en azından önemli isimler için bu işaretlemeleri kullanmak gerektiğini düşünüyorum.
  5. Örümceklere talimat verdin mi? Korunacak dizinler neler?
    Mutlaka robots.txt dosyan olsun ve robotlara ne yapacaklarını söylesin. (Bu bir robot dosyasıdır.) Pekiyi ya .htaccess dosyan www'siz girişleri www'ye yönlendiriyor mu?
  6. Analitik araçları.
    Kurulumunu yap ve izle.
  7. Tam ne olduğunu, nerede olduğunu ve ne yaptığını bilmediğin hosting şirketleriyle çalışma, kara listeye girersin, haberin bile olmaz.
  8. Çapraz tarayıcı uyumluluğu.
    Mutlaka en az 4 tarayıcıyla, bence Internet Explorer, Firefox, Chrome ve Safari ile siteye bak. Mesela IE8 bile doğru gösteriyor mu? Sakın sadece son sürümlere güvenme, onlar üç aşağı beş yukarı aynılar. Ama birçok insan tarayıcı falan güncellemiyor.
  9. Site haritası çok hayatidir.
    XML ve HTML site haritaları mutlaka var olmalı ve XML dosya arama motorlarına gönderilmeli.
  10. Kimsin?
    Müthiş laflar olduğunu düşünüp şu neden bahsettiği bile belli olmayan "bizmiş, ileri teknolojiymiş, yüksek kaliteymiş, uzun dönemli ilişkiymiş" şeklindeki kurumsal traşlara sakın ha yer verme. "Hakkımızda" sayfan mutlaka olsun ama orada senin de herkes gibi ismi-cismi olan bir insan olduğun görünsün, kullanıcıya sen bir web sitesiymişsin gibi davranma, sen bir insansın.
  11. İçerik içerik içerik...
    Ve bil ki kullanıcılar da arama motorları değil, onlar da aynen senin gibi insan. Anlamlı, doğal ve özgün şeyler yaz. Gramer bir Alman kasabası değildir, metinlerini bunu unutmadan yaz. İmlâ hatasından kaçın, kimseye "abara" kiralayamazsın. Mahsus hatalı imlâ kullanmayı hiç deneme, "Arçelk" yazdın diye kimse seni Arçelik zannetmez. Bu taktik sadece web sitene toplam 2 saniye için girecek ziyaretçi sayısını artırır, ki bu da bir şeyler ters gidiyor demektir.

Kullanıcılar var ki web geliştiriciler de var — Kullanıcı Deneyimi

Web geliştiriciler olarak kendimizi öğretmen, kullanıcıları da öğrenci sanmayalım.

Her şey o websitesinin kimin için hazırlandığı sorgusuyla başlamalı. Belki de kendimizi öğrenci, kullanıcıları öğretmen gibi görmeliyiz.

2015'te Georgian College'de yaptığım bir demet çalışma.

  1. Personalar
  2. UX Proje Araştırma Dosyası
  3. UX Proje Tasarım Dosyası
  4. İşlevsel Özellikler Dosyası
  5. Formlardaki UX Sorunları

Fotoğraf İşlemek — Tabiatı baştan yaratmak değildir

Kötü Fotoşop uygulaması örneği Benim görüntü işleme anlayışımın, soldaki zavallı fil üzerinde görünen yaratıcı(!) uygulamalar'la uzaktan yakından ilgisi yoktur. Ama tabii ki yapabilirim.
Bence en anlamlı 5 Fotoşop aracı:

  1. Web için kaydet
  2. Renk seçici
  3. Eğriler
  4. Ton/Doygunluk
  5. Katman Biçemi

Web için kaydetmek: Çalıntı görünümlü resimler zarar veriyor

JJ'in tümüyle aynı şu fotoğrafı doğru ve yanlış kaydetmeye birer örnektir.

İyi foto Kötü foto

Son güncelleme (TSİ): 2018-02-16 20:23:50 EET