bildirgec.org

Web projelerinde kullanıcı tabanlı içerik üretebilmek için gerekli en önemli araçlardan biri yazı alanlarıdır. (textarea)
Kullanıcının kendini daha iyi ifade edebilmesi için de bu yazı alanlarını özelleştirmeniz ve zenginleştirmeniz gerekmektedir. Çünkü kullanıcı bu alanları verimli kullanabilmek için gerekli temel bilgiden yoksun olarak kabul edilir. Zaten hedef kitlenin de böyle bir ön bilgiye sahip olması beklenemez.

İşte bu noktada WYSIWYGprensibine göre geliştirilmiş zengin metin editörleri (RTE – rich text editor) yardımınıza koşar.
Bu zengin metin editörleri; yani RTE’ler, temel olarak HTML etiketi textarea’yı özelleştirir. Javascript destekli olarak bu alan için bir iframe yaratır ve çeşitli ön tanımlı araçlarla size bir metin editörü hazırlar. Böylece kullanıcı gerçek bir metin editörü kullanıyormuş gibi biçimlendirilmiş yazı girebilir.
Artık geliştirilen projelerde JQuery’nin vazgeçilmezliği ortada olunca ben de sizler için güncel popüler JQuery tabanlı metin editörlerini bir araya toplamak istedim. Böylece JQuery destekli projelerinizde başınızı ağrıtmadan kolay ve hızlı bir şekilde metin editörü ekleyebileceksiniz.

MarkitUp

Resmi Web Sitesi | Demo

Google dan bir ilk daha, google insan vücudunu detaylı olarak inceleyebileceğimiz body browser geliştiriyor.

Google Body Browser

web üzerinden “WebGL” destekli tarayıcı ile yayınlanacak olan flash veya java gibi eklentilere gereksinim duymayan uygulama ile kas ve kemikler ve iç organlar rahatlıkla görüntülenebiliyor.

Google Body Browser

En çok tıp öğrencilerinin işine yarayacak gibi dursada meraklıları içinde faydalı bir uyulama olacak gibi duruyor.

Firefox, eklentileriyle her zaman ihtiyaçlarımı karşılayan bir browser olmuştur.
Ancak hantallığı beni kendisinden vazgeçirdi. Keza chrome’da artık çok hantal.

opera hız açısından çok iyi (özellikle ilk açılışta)
ancak ihtiyaçlarımı karşılamakta yetersiz görünüyordu.
keşfettigim belki de bir çoğunuzun önceden bildiği bir kaç minik özellikle benim için bir numaralı koltuğa (şuan için) oturmuş durumda. peki nedir bunlar?

Misal 1:

Adblock eklentisi malum vazgeçilmez. Kendisini firefox’tan iyi tanırız. banner’ları bir güzel engeller. opera’da bunun için bir eklenti kullanmanıza gerek yok. Gördüğünüz gibi sitede bir kaç banner var. Sağ tıklayıp “içerik engelle“ye tıklıyoruz. Ardından istemediğimiz banner‘ları seçiyoruz ve sonrasında tamama tıklıyoruz. Gördüğünüz gibi banner’lar kayboluyor. Bu kadar basit. Ancak şöyle bir zayıflığı var. Websitesi, sayfanın aynı yerindeki banner’ı farklı bir reklamla değiştirirse tekrar engellemeniz gerekiyor ki buna şükür diyerek diğer misalimize geçiyoruz.

Opera 11. sürümünün çıkmasıyla Chrome, Firefox ve Safari gibi eklenti dünyasına kapılarını açtı.
Bu yazıda belirtilen eklentileri kullanabilmek için Opera 11 yüklü olması gerekmektedir.
1- Translate
Chrome’un Google Çeviri eklentisi gibi çalışmakta. Girdiğiniz sayfayı istediğiniz dile çevirmenizi sağlıyor.

Translate Eklentisi

2- Image Preview
Öngösterim resimlerinin üzerine geldiğinizde daha büyük versiyonlarını yeni sayfa açmadan görmenizi sağlıyor. Facebookta özellikle çok işe yarıyor.

Image Preview Eklentisi

3- Weather Forecast
İstediğiniz şehrin hava durumunu bu eklenti sayesinde anında öğrenebiliyorsunuz.

Weather Forecast Eklentisi

Çalışan insanların gün içerisinde çoğu zaman sordukları sorudur “Mesainin bitmesine ne kadar kaldı?” Artık bu sorunun cevabını hemen almanız için Google Chrome eklenti geliştiricileri bir eklenti geliştirmiş; Goddamn Work.

Goddamn Work

Mesainizin başlangıç ve bitiş saatlerini giriyorsunuz, eklenti de size kaç saat ve dakika kaldığını gösteriyor. Aslında çok basit bir eklenti ama kim bilir belki bir çok kişinin işine yarar 😉
Eklentinin web adresi için buraya.

Google Chrome, popüler tarayıcılar arasında eklenti desteğine sahip olan ikinci tarayıcı. Firefoxi kadar eklentisi bulunmasada oldukça fazla eklentiye sahip olmaya başladı. Aşağıdaki eklentiler sayesinde web hayatınızı daha rahat bir hale getirebilirsiniz. Eylül ayının popüler yararlı Google Chrome uzantıları;

Eye Dropper

Chrome ve Chromium uzantısı olan Eye Dropper, web tasarım ve geliştiriciler için oldukça hoş bir uygulamadır. Sağ üstte yer alan küçük logosuna tıkladıktan sonra web site içeriğindeki herhangi bir rengin Hex şeklinde size gösterir.

Instant Image Editor

Web sitesinde herhangi bir imaj dosyasını anında düzenleme imkanı veren çok hoş bir uygulama. Pixlr tarafından yapılan bu uzantı ile anında yeni tabda imaj üzerinde düzenleme yapabilirsiniz.

Chrome Editor

Web Tasarımcılar için üretilen bir eklenti olan Chrome Editor, chrome üzerinden html, css, javascript kodlarını anında düzenleme imkanını size sunuyor.

CSS3 tamamen yaygınlaşmasa ve tüm tarayıcılar tarafından tam olarak desteklenmemiş olsa bile birçok başarılı uygulama yapılmakta. Web sitelerinizi daha interaktif ve daha renkli hale getiren bu uygulamalar arasında çizim örnekleri bile bulunmakta. Günümüzde hala imajlar kabul görürken css‘nin sınırları zorlanarak ascii karakterler ile birçok farklı çizim örnekleri de yapılıyor. Birçoğunun detaylı açıklaması da verilen aşağıdaki uygulamaların benzerlerini siz de yapabilirsiniz.

Sweet CSS3 Buttons
(Tatlı CSS3 Butonları)

Bu tatlı css3 butonları sayesinde web sitenizini oldukça renklendireceksiniz.

CSS Logo

Tamamen css kullanılarak çizilen bu logolar uğraş gerektirse de gerçeğini aratmayan cinsten. Tamamen ascii karakterler ile yapılan bu logolar arasında CBS, CNCB-e (NBC), BMW, Univision gibi şirket logoları da var.

CSS Olympic Logo
(CSS Olimpik Logo)

…..

Linux’un aksine Windows işletim sistemi 64-bit’e geçişte oldukça geride kaldı. Pek çok linux kullanıcısı işletim sistemlerinde 64-bit tarayıcılar (örneğin Opera) kullanabiliyor.

Windows cephesinde ise 64-bit tarayıcı kullanımı önündeki önemli engellerden biri adobe flash player.

Windows 64-bit’te Flash Player neden sorun? Flash player için alternatif olarak Silverlight kullanılamaz mı?
————————–

Adobe Flash Player günümüz modern web sitelerinin vazgeçilmez bir parçası. Microsoft’un Flash Player‘a karşı geliştirdiği Silverlight bazı özellikleriyle daha iyi olsa da özellikle platform (işletim sistemi) uyumsuzlukları ve büyük dosya boyutu gibi özellikleriyle flash player‘a tam bir alternatif değil.

Flash Player – Silverlight için detaylı bir karşılaştırmayı burada okuyabilirsiniz.

mozilla‘nın kullanıcı deneyimlerinden sorumlu bölüm başkanı aza raskin, kullanıcıların dramatik biçimde boğuşmak zorunda kaldıkları sekme kaos’unu yok edebilecek, “tab candy” adını verdikleri bir projeyi geliştirmeye başladıklarını duyurdu.

“tab candy”, bir eklenti değil. raskin’e göre bu yeni bir özellik ve ekibin planı, bu özelliği gelecekte çıkaracakları versiyonlarda kullanıma sunmak. işin özünde kullanıcılar açık sekmelerini bir pencere içinde ayırıyor, kategorilere bölüyor ve her kategori yeni bir sekme oluyor.

tıkladığınızda altındaki alt sekmeleri firefox‘a gönderiyorsunuz. böylece mesela 50 tane sekme bile açsanız bunları bir kez düzenledikten sonra ekranda yalnızca 5 sekme görüyorsunuz. diğer 45 sekmeyle uğraşmıyorsunuz. her bir gruba yine firefox üzerinden sıçrayabiliyor, bir başka grubu görüntülemek üzere alıp getirebiliyorsunuz. işiniz bitince geri arkaplana gönderiyorsunuz. bu bir çeşit 3 boyutlu desktop uygulaması gibi düşünmek mümkün. (3d küp efekti içermiyor, yanlış anlaşılmasın)

arkadaşlar ömrümü çürüten tarayıcı uyumsuzluklarına nazaran araştırmalarım sonucunda elde ettiğim bilgileri sizlerle paylaşmak istedim, malum web master ların en büyük sorunu tüm tarayıcılara uyumlu web sayfalar yapabilmektir.
aşağıda örneklemeli olarak anlattığım kod kullanımlarını sayfamıza uyarlayarak kullanmanız yeterli olacaktır.
yapmış olduğumuz web sayfasında kullandığımız bir adet css imizi çoğaltmak istemiyoruz ve bu css içinde tüm tarayıcılara uyumlu olsun istiyoruz o zaman yapacağımız işlem ;
/* ie 6 ve ie den önceki versiyonlar */ *html #cciid { color: pink }
/* ie 7 ve ie7 den önceki versiyonlar */ *:first-child+html #cciid { color: red }
/* ie 7 ve ie 7 den üstü tarayıcılar */
html>body #cciid { color: yellow }
/* new tarayıcılar (ie 7 burada yok) */
html>/**/body #cciid { color: blue }
/* opera 9.27 ve dah önceki sürümler */
html:first-child #cciid { color: pink }
/* apple safari */
html[xmlns*=””] body:last-child #cciid { color: red }
/* opera9+, safari 3+, ff 3.5+, chrome 1+, gibi gibi */
body:nth-of-type(1) #cciid { color: pink }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #cciid { color: blue }
/* safari3, chrome 1+ üstü versiyonlar */
@media screen and (-webkit-min-device-pixel-ratio:0) { #cciid{ background: #ffffff; border: 1px solid #000000 }
}
/***** class ve id içinde hack ******/
/* ie6 ve daha öncesi */ #cciid{ _color:blue }
/* ie7 ve daha öncesi */ #cciid{ *color: blue } /* or #color:blue */

html kodu :

tarayıcı