Kategori: Web Tasarım

Günümüzde sunulan ve üzerinde çalışılan web tasarımlar, bir sanatsal çalışma olmaktan tamamen sıyrılarak kullanıcıları yormadan daha minimalist tasarıma ve kullanıcı dostu olmakla beraber, web sitesinde gezinmeleri için sadeleşme yolunu seçmiştir. Web 3.0’a hazırlanıyoruz.

Firefox ile Textarea Wrap Sorunu

Wrap özelliği sayesinde textarea içindeki sözcüklerin alt satırlara kaydırılması (yani dikey kaydırma çubuğunun görünmez yapılması) veya bu özelliği kapatarak (wrap=’off’) sözcüklerin kutu içinde kaydırılmadan, yatay kaydırma çubuğununun görüntülenmesini sağlayabilirsiniz.

Bu işi javascript ile yapmak gerektiginde txtarea.wrap = ‘off’ veya daha saygılı bir kod olan document.getElementById(‘txtarea’).wrap = ‘off’ kullanılıyor.

Sorun uygulamanızın tüm tarayıcılarda çalışma iddiasına sahip olduğunda başlıyor. Malesef yukarıdaki saygılı kod bile Firefox tarayıcılarda işlemiyor. Javascript içerisinden bu özelliği ne kadar ayarlamaya çalışırsanız çalışın sonuç alamıyorsunuz. Çünkü Firefox real-time‘da wrap özelliğini (attribute) dinlemiyor. Aslında bu sorun, Firefox’daki bir hatadan kaynaklanıyormuş ve tabiki de raporlanmış. Rapor adresi:

https://bugzilla.mozilla.org/show_bug.cgi?id=302710

Raporlandığı sayfada IE ve FF tarayıcılarda çalışan kod da yayınlanmış. Javascript ile sözcük kaydırmak (word wrap) için aşağıdaki fonksiyonu kullanabilirsiniz.

<html>
  <head>
    <title> Wrap bug in Firefox</title>
  </head>
<body>
  <textarea id="txtarea" style="width:200px;height:100px">
  Looooooooong line
  </textarea>
  <script>
  function setWrap(obj, val) {
    obj.setAttribute(‘wrap’, val);
    var parNod = obj.parentNode, nxtSib = obj.nextSibling;
    parNod.removeChild(obj);
    parNod.insertBefore(obj, nxtSib);
  } 
  setWrap(txtarea, ‘off’);
  </script>
</body>
</html>


Yazan: Tankado

Firefox Webmaster Eklentileri

Web uygulamaları geliştirenlerin işine yarayabileceğini düşündüğüm önemli Firefox eklentileri.

  1. change user agent for certain sites : User Agent Switcher
  2. find the color code of a given pixel : ColorZilla
  3. capture screenshots : ScreenGrab!
  4. capture screenshots : Pearl Crescent Page Saver
  5. check the validity of links on a page : LinkChecker
  6. copy and format selected text/title/url : Copy URL+
  7. debug ajax/css/html/javascript : FireBug
  8. debug javascript : JavaScript Debugger
  9. download an entire website : SpiderZilla
  10. edit CSS stylesheet : EditCSS
  11. find whois information of the site : domainFinder
  12. inspect the DOM of HTML, XUL, and XML pages : DOM Inspector
  13. inspect the selected element with DOM Inspector : InspectThis
  14. measure pixel width with a ruler : MeasureIt
  15. modify http/https headers and post parameters : Tamper Data
  16. preview the Adsense ads that might be shown on a page : Adsense Preview
  17. run automated tests on a site : TestGen4Web
  18. see anchors on the page : Show Anchors
  19. see color contrast page information : Colour Contrast Analyser
  20. see cookie information for a page : View Cookies
  21. see current page’s heading structure in a sidebar : Document Map
  22. see errors categorizxed by type : Console2
  23. see GET and POST parmeters of the page : UrlParams
  24. see how a page will look on mobile screen : Small Screen Rendering XPI
  25. see http headers of a page : Header Monitor
  26. see IP address of the site : ShowIP
  27. see web development references in a sidebar : DevBoi
  28. see Xpath information : XPather
  29. simulate WAP browsing by viewing WML : wmlbrowser
  30. test nightly versions of Firefox : Nightly Tester Tools
  31. validate html : HTML Validator
  32. view css styles; view html in another app; validate css/htmlWeb Developer
  33. view page html source constructs directly on the page : X-Ray
  34. view rendered source : View Source Chart
  35. view source with an externall app : ViewSourceWith
  36. write lorem ipsum content for test page : LoremIpsum Content Generator
  37. Back to Top of the Page
  38. Suggestions/Corrections : Comment in blog : wordpress : I want a Firefox Extension to …

PHP, MySQL, Javascript, CSS Cheat Sheets

Cheat Sheet dediği şey belli bir konuyla alakalı çok sık kullanılan ve genelde ezberlenmesine gerek olmayan hatta hatırlatma amacıyla da kullanılabilen çizelgelerdir. Tam olarak Türkçe karşılığının olmaması (ya da benim bulamamam) üzücü. Aşağıda PHP, Javascript, MySQL, CSS, ActionScript, Apache mod_rewrite ve Renk çizelgeleri yer alıyor.

Cheat Sheet dediği şey belli bir konuyla alakalı çok sık kullanılan ve genelde ezberlenmesine gerek olmayan hatta hatırlatma amacıyla da kullanılabilen çizelgelerdir. Tam olarak Türkçe karşılığının olmaması (ya da benim bulamamam) üzücü. Aşağıda PHP, Javascript, MySQL, CSS, ActionScript, Apache mod_rewrite ve Renk çizelgeleri yer alıyor.

Okumaya devam et “PHP, MySQL, Javascript, CSS Cheat Sheets”

Yazdırılamayan ve ekran görüntüsü alınamayan sayfa yapmak

Yazıcıdan yazdırılamayan ve ekran görüntüsü alınamayan sayfalar yapmak için bir parça kod. Çok güvenilir bir koruma sağlamadığnı söyleyeyim. Bu işlerden biraz anlayan birisi altından girip üstünden çıkabilir.

<HTML><HEAD>    <style media="print">    body { display : none; }    </style></HEAD><BODY onload=setInterval("window.clipboardData.clearData()",20)>Burasi sayfanin icerigi</BODY></HTML>   Panoya erişim şekli FireFox tarafından desteklenmediği için bu tarayıcıda panoyu temizleme işlevi çalışmıyor.

Extract URLs in text data with Javascript

Daha önce sitede duyurduğum bağlantı (link) arşivi projesi için hazırladığım kullanışlı javascript programcığı. readClipboardData(), parseURL() ve pasteFromClipboard() fonksiyonlarından oluşan programcık panodaki metin verisi içerisinde yer alan URL’leri tespit edip ayıklıyor ve tamamını string olarak geri döndürüyor. Ana fonksiyon olan pasteFromClipboard() ilkönce panodaki  metin verisini readClipboardData() fonksiyonu yardımıyla okuyor (IE ve FF farketmiyor) ardından parseURL() içindeki regex (Regular Expression) cümlesi yardımıyla özyinelemeli (Recursive) olarak teker teker elde ettikten sonra string olarak ana fonksiyona aktarıyor.  pasteFromClipboard() fonksiyonu ise son olarak URL’ler arasına newline (\n) yerleştirerek string formunda tekrar geri döndürüyor. Kodları buradan test edip indirebilirsiniz.

Read Clipboard & Set Clipboard

Javascript ile panoya metin kopyalamak ve panodaki metni almak için kullanılabilecek fonksiyonlar. Internet Explorer (IE) ve Firefox (FF) web tarayıcılarını da destekliyor.

Javascript ile panoya metin kopyalamak ve panodaki metni almak için kullanılabilecek fonksiyonlar. Internet Explorer (IE) ve Firefox (FF) web tarayıcılarını da destekliyor.
Okumaya devam et “Read Clipboard & Set Clipboard”

Javascript ile port tarama

“Myspace.com gibi sosyal bir siteyi ziyaret ederken veya yahoo webmail ile e-postalarınızı kontrol ettiğinizi hayal edin. Siz web sayfalarını okurken web sayfasındanki javascript kodu indirilmiş doğal olarak tarayıcınız tarafından otomatik olarak çalıştırılmış. Script tüm yerel ağınızı tarıyor, linksys modeminizin model numarasını öğreniyor modeminize komutlar göndererek kablosuz ağınızı aktive ederek şifrelemeyi devre dışı bırakıyor. Şimdi bunun 24 saatte 1 milyon kişiye olduğunu düşünün.” diyor tanıtım yazısında.

Deneysel bir güvenlik çalışmasının girişi böyle başlıyor. Javascript kullanarak basit bir port tarayıcısı yapmışlar. Tarayıcıları bir ip aralığındaki web hizmeti veren bilgisayarları tarayıp, sunucu yazılımını teşhis edebiliyor (Şimdilik sadece IIS ve Apache) ve herhangi bir yazılım açığını kullanmadığı için de kötüye kullanımını engellemenin pratik bir yolu yok. Daha fazla bilgi için bu pdf dosyasına veya sitelerine göz gezdirebilirsiniz. Tarayıcıyı denemek için buradan buyrun.

Kaynak: http://www.spidynamics.com

AJAX loading indicators

Başlıktan anlaşılması gerekn şu, sitelerimizde AJAX kullandığımızda büyük bir ihtimalle ihtiyaç duyacağımız küçük yüklenme animasyonları vardır ya, onlar işte. Tam da bu konudaki arşivimi genişletmek üzere google ile farklı atraksiyonlar denerken ilk defa aradığım konu ile tam alakalı bir site buldum ;). Sitenin adresi www.ajaxload.info. Adından da tahmin edebileceğiniz gibi bu sitede sadece AJAX için yükleniyor animasyonları yer alıyor. Site aracılığıyla tasarımınıza uygun göstergeler de oluşturabiliyorsunuz. Site ihtiyacınızı karşılamıyor ise nacizane toparladığım arşivimi de buradan indirip kullanabilirsiniz. Ayrıca şu adreslere de göz gezdirebilirsiniz:

http://www.napyfab.com/ajax-indicators/
http://mentalized.net/activity-indicators/
http://www.ajax.su/ajax_activity_indicators.html
http://www.esnips.com/doc/4c626465-312c-4a3
6-ab70-a1ab6f041489/AJAX-Activity-Indicators.htm…

Ve ayrıca yine web uygulamalarınızda kullanabileceğiniz bir kaç hoş simge de buradan iniyor.

AJAX generic form parser

Burada esasında AJAX’lı uygulamalarda zamandan ve koddan tasarruf sağlasın diye hazırlanmış örnek bir uygulama yer alıyor. Kodlarının en önemli noktasını web formunun kolayca gönderilmesini sağlayan el  yapımı javascript  fonksiyonu oluşturuyor. getForm ismindeki fonksiyon parametre olarak verilen formdaki tüm input nesnelerini (checkbox ve radio’da dahil) isim ve içerikleriyle bilrlikte string formatına çeviriyor.

Burada esasında AJAX’lı uygulamalarda zamandan ve koddan tasarruf sağlasın diye hazırlanmış örnek bir uygulama yer alıyor. Kodlarının en önemli noktasını web formunun kolayca gönderilmesini sağlayan el  yapımı javascript  fonksiyonu oluşturuyor. getForm ismindeki fonksiyon parametre olarak verilen formdaki tüm input nesnelerini (checkbox ve radio’da dahil) isim ve içerikleriyle bilrlikte string formatına çeviriyor.
Okumaya devam et “AJAX generic form parser”

LAMP, WAMP, MAMP geliştirme paketleri

Dinamik web siteleri geliştirenlerin işine yarayacağını düşündüğüm bazı yazılımlardan haber vermek istiyorum. Aslında yazılım paketleri desek daha doğru olur. Konu PHP tabanlı web uygulamaları geliştirmeyle ilgili. PHP tabanlı web uygulamaları geliştirirken, web tarayıcı programını saymazsak (FireFox,Netscape,IE) olmazsa olmaz üç programa ihtiyacımız vardır. Bir web sunucu, PHP yorumlayıcısı ve bilgilerin sorgulanması için de bir adet veri tabanı sunucusu (Mysql,Postgresql,Firebird,Oracle vb.)

Dinamik web siteleri geliştirenlerin işine yarayacağını düşündüğüm bazı yazılımlardan haber vermek istiyorum. Aslında yazılım paketleri desek daha doğru olur. Konu PHP tabanlı web uygulamaları geliştirmeyle ilgili. PHP tabanlı web uygulamaları geliştirirken, web tarayıcı programını saymazsak (FireFox,Netscape,IE) olmazsa olmaz üç programa ihtiyacımız vardır. Bir web sunucu, PHP yorumlayıcısı ve bilgilerin sorgulanması için de bir adet veri tabanı sunucusu (Mysql,Postgresql,Firebird,Oracle vb.)
Okumaya devam et “LAMP, WAMP, MAMP geliştirme paketleri”

Siteniz farklı tarayıcılarda nasıl gözüküyor?

browsershots.org adresi sitenizin farklı işletim sistemi ve web tarayıcılarında (internet browser) nasıl gözüktüğünü gösteriyor. Beta aşamasında olan siteye görmek istediğiniz sitenin adresini vererek Epiphany, Firefox, Galeon, Konqueror,Mozilla, MSIE (Mikrosoft İnternet Tarayıcı), Opera ve Safari gibi tarayıcılar ile Linux, MacOS ve Windows gibi işletim sistemlerinde nasıl göründüğünü görebiliyorsunuz. Dilerseniz 800×600 veya 1024×768 gibi çözünürlüklerde belirtebiliyorsunuz. Site görüntülerinin hazırlanması doğal olarak uzun süreceğinden adres daha önceden taranmışsa hemen gösteriliyor, değilse taranmak üzere iş kuyruğuna atılıyor.

CSS ve Script yoğunluklu sayfaların ziyaretçilerin tarayıcılarında nasıl gözüktüğünü öğrenmek için yararlı bir servis.

Yazan: Tankado

JScript(R) mi, JavaScript(R) mi?

HTML icinde script bloklari yazarken language ozelligi ile kullanacağımız kodun türünü belirtiyoruz JScript veya JavaScript olarak. Sisteme erişim gerekiyorsa VBScript’de olabiliyor.

JScript ile JavaScript arasinda bazi farklar var. JScript(R) Mikrosoftun implementasyonu, JavaScript(R) ise Netscape’in. Ikisi arasinda compatibility’den bahsedilmiyor, daha dogrusu firmalarin boyle bir gayretleri yok. Aynen DOM modelini yorumlamalarında olduğu gibi farklar var. Ama ikisinin de implementasyonu ECMA 622 adindaki bir kodlama standartına dayaniyor. ECMA-622, ECMA isimli sirketin script implementasyonunun adı. JScript(R) ve JavaScript(R) ECMA-622 den türetildiği için uyumlulugu garanti ediyor ama kendi aralarında aynı şey geçerli değil. JScript(R), Windows Scripting icin genisletmeler iceriyor, VBS (Visual Basic Script) tadinda genişletmeler içerdiğini söyleyebiliriz. Örneğin ActiveX nesnelerini dahil edip kullanabiliyorsunuz, do-while ve swtich gibi kontrol ve döngü deyimleri, hata yakalama (try-catch,throw) ve düzenli ifadeler (Regular Expressions) gibi… JScript’in temel ECMA implementasyonundan olan diğer farklarini gormek isterseniz buraya tiklayin. 

JScript’de  dogal olarak JavaScript’de bulumayan bazi methodlar var. Web de dahacok Netscape in JavaScript’i ragbet goruyor. Google da boyle soyluyor. "language=JavaScript" 4M sonuc dondururken "language=JScript" 9K donduruyor.

Yazan: Tankado

GeSHi – Generic Syntax Highlighter

PHP’de geliştirilmiş sintaks renklendirici. Sayfalarınızda kullanıcıdan gelen program kodlarını dilin yazım kurallarına uygun olarak renklendirermek istiyorsanız GeSHi’yi kullanabilirsiniz. 50’ye yakın programlama diline destek veriyor ve bir sf.net projesi. Yazılımın PHP içindeki kullanımı aşağıdaki gibi. Çok kısa.

$geshi =& new GeSHi($source, $language);
$geshi->setTheme(‘yourIDE’);
echo $geshi->parseCode();

Demo adresinden örnekleri inceleyebilirsiniz.
GeSHi’nin ana sayfasına buradan ulaşabilirsiniz.