Flashcentury » CSS

javaScript Kodlarınızı Sıkıştırmak İçin Araçlar

Huseyin Kocak — Wed, 08 Oct 2008 23:55:44 +0000

Web Sitenize ufakta olsa hiz kazandırma için üzerinde tüm çalışmaları tamamladığınız JavaScript kütüpanelerinizi (dosyalarınızı) sıkıştırmak mantıklı bir hareket olabilir.

Aşağıda JavaScript dosyalarınızı sıkıştırma ( Javascript compressor )hizmet veren belli başlı siteleri listeledim, beğeninize göre aşağıdaki sitelerden istediğiniz bu iş için kullanabilirsiniz.

Online Javascript compressor hizmeti veren bu sitelerden bazıları dosyaları tekrar okunabilir hale getiriken bayıları sadece dosyanızı sıkıştırmala hizmetini tamalıyor, bu noktada size tavsiyem sıkıştıracağınız js dosyasının ilk önce bir kopyasını almanız olacaktır. Bu sayede eğer ileride Javascript dosyanizda bir düzenleme veya ekleme yapmanız gerekirse kopyaladığınız dosya üzerinde yapabilirsiniz.

Javascript ‘tin yanı sıra aynı sıkıştırma işlemini Css üzerinde yapmak isterseniz CSS Kodlarınızı Sıkıştırmak İçin Araçlar isimli makaleden faydalanabilirsiniz.

CSS Kodlarınızı Sıkıştırmak İçin Araçlar

Huseyin Kocak — Wed, 08 Oct 2008 23:26:57 +0000

Eğer sitenizde çok ağır Css dosyaları varsa bu araçlar yardımı ile css dosyalarınızın boyutlarını küçültebilir veya eski haline dönüştürebilirsiniz.

Css dosyalarını sıkıştırma hizmeti ( CSS Compressor ) veren siteleri kendi beğenime göre sıralızorum siz bu siteler arasından beğenize göre tercihinizi yapabilirsiniz.

Her ne kadar Css dosyalarınızı küçülterek sitenize ufak çaplı hız kazandırsanızda, aynı işlemi Javascript kütüpaneleriniz üzerinde de uygulayarak Css dosyalarınızdan elde ettiğiniz performansın daha fazlasını saglayabilirsiniz. Zira Javascript kütüpaneleri Css dosyalarına kıyasla çok daha büyük olabiliyor.

Online Javascript compressor Hizmeti veren sitelerin listesine javaScript Kodlarınızı Sıkıştırmak İçin Araçlar isimli makaleden ulaşabilirsiniz.

SitePoint.com ile Css Reference

Huseyin Kocak — Wed, 01 Oct 2008 15:35:30 +0000

Css etiketlerini sık sık unutuyorsanız veya Css öğrenmeye yeni başlamışsanız. SitePoint.com tam size göre bir hizmet sağlıyor. Css ‘de kullanmak istediğiniz etiketi yazıyorsunuz ve size bu etikete dahil ne kadar referans varsa listeliyor.

Sıtenin sunduğu en güzel hizmet ise incelemek için tıkladığınız referans hakkında birçok bilgiyi, örnek kullanımını, alt değerlerini, hangi browser ‘ların (tarayıcıların) desteklediğini ve yine sol tarafta seçtiğiniz referansa benzer diğer referansları hiyerarşik bir sirayla veriyor olması.

Yukarıda da belirttiğim gibi özellikle Css ‘ye yeni başlayan arkadaşların çok işine yaracağini umduğum Sitepoint.com ‘un bu hizmetini favorilerinize eklmenizi tavsiye ederim.

Css Nedir?

Huseyin Kocak — Wed, 01 Oct 2008 08:43:19 +0000

Css yani orjinal acilimiyla Cascading Style Sheets (Katmanli Sitil Sablonlari) web tasarimin vazgecilmez unsurlarindan biridir. Basit bir tanim yapmak gerekirse Html`nin vitrini diyebiliriz. Yani Css araciligiyla bir linke, yaziya, resime, tabloya veya html dökümanin tümüne bir sitil verebiliriz fakat Css`nin gercek gücü tüm siteye hükmedebilmesinde sakli yani basit bir islemle tüm sitedeki yazilarin fontunu degistirebilir veya tüm sitedeki linklerin rengini ayarlaya bilirsiniz.

Css ilk olrak 1995′de ortaya çıkti ve akabinde 1996 yılında W3C ’e kabul edildi. W3C ’ye katılması ile tüm tarayıcılar tarafından desteklendi. Bu tarihten itibaren W3C ’ye üye olan tüm tarayıcı grupları CSS ’nin yeni versiyonlar tarafından desteklenmesini kabul etmiştir. Css ise günden güne yeni özelliklerle gücüne güc katarak Mayıs 1998 ′de Css 2 ′ye geçiş yapılmıştır. Su an Css 2.1 versiyonunu kullanmaktayiz.

Simdi bu kadar ön bilginin üzerine Css ‘nin ne olduguna biraz daha derinlemesine girelim Html etiketleme sistemiyle calisan basit bir dildir sadece var olan etiketleri yazarsiniz ve ortaya basit bir Html sayfasi cikar ama dizayn olarak cok yetersizdir örnegin bir linkin üzerine mause gelince renginin degismesi gibi basit bir islemi bile xyapamazsiniz iste tam bu noktada Css imdadimaza yetiyor Css ile Html etikezlerine hükmedebiliyorsunuz hatta Html etiketlerine class `lar atayip özel dizaynlar sagliyabiliyorsunuz. Css `nin nasil kullanildigini ilerleyen derslerde adim adim isleyecegiz ve tanidikca cok seveceginize inandigim ve web tasarim unsurlari arasinda en basit olduguna inandigim bir dildir.

Css bir web sayfasinda üc iki ayri sekilde kullanilabilir bu kullanilis sekilleri ;

Disardan import edilerek ( .css dosyalari olusturulur ve Html sayfamiza dahil ederiz.)
ve taglari arasinda tanimlayarak (.css dosyasi olusturup disardan importetmek yerine direk sayfanin icerisinde tanimlayabiliriz)
Html etiketleri icine style olusturarak css olustururuz (Kullanim sekli itibarizle ilk iki secenekten farklidir. Css`nin en basit kullanim seklidir fakat fakat bu sekilde kullanmak ilk etaptta size zaman kazandirsada ileride düzenleme yaparken biraz ugrastirabilir.)

Css kullanim sekillerini bir sonraki derste anlacagim. Eger Ajax ‘e merak saldiysaniz Css en önemli yapitaslarindan biridir hatta Ajax teknigi icin bilinmesi gereken en önemli programlama dillerini siralamak gerekirse Javascript -> Css -> Xml ….. seklinde siralayabiliriz.

Bir sonraki Css dersimizde ilk örneklerimizi yapmaya baslayacagiz. Eger Css ilginizi cekti ve gelismelerinden ve yeniliklerinden haberdar olmak istiyorsaniz; Css orjinal sitesine bu sayfadan ulasabilirsiniz. Bir sonraki dersimizde görüsmek ezere.

Ajax Nedir?

Huseyin Kocak — Thu, 25 Sep 2008 23:39:04 +0000

Ajax yani orjinal acilimi ile “Asynchronous Javascript and XML” 2005 yılında “Jesse James Garrett” tarafından kullanılmıştır. Ajax bir programlama dili degil aslinda bir tekniktir. Yani bir tanim yapmak gerekirse Css, JavaScript, Dom ve XML dillerinin, web tarayıcısında hazır bulunan XmlHttpRequest nesnesi etrafında birlikte kullanılmasıdır. Ajax bu programla dillerinin gücünü bir araya toplar ve ortaya harikalar sunar.

Eger web sitesi tasarliyorsaniz ilaki azda olsa HTML, JavaScript, Css gibi programlam dilleri hakinda bilginiz var demektir. Ajax bu programlama dillerinin harmanlanmis halini kullandigi icin ögrenilmesi zor degildir. Sadece teknik hakkinda bilgi sahibi olmaniz ve iyi bir kurgu yapmaniz yeterli.

Ajax ‘in bize sagladigi ajantajlari siralamak gerekirse ;

Ögrenilmesi kolaydir
Iyi bir kurgu sonucunda web sayfasinin sadece gerekli bölümlerini ziyaretciye gösterip diger bölümleri ziyaretcinin istegine sunabilirsiniz. Bu sekilde Web sitenize hiz saglayabilirsiniz.
Ziyaretciye sanki bir masaüstü program kullaniyor hissi verir.
Örnegin bir form dolduruken ziyaretcinin sectigi bilgiler dogrultusunda form secenekleri esneklik kazanabilir
Bircok islem tek bir sayfada gerceklestigi icin bant genisligi (bandwith) sinirinizi minimuma indirebilirsiniz.
Görsel olarak klasik sitelere kiyasla cok üstündür.

Peki ajax ‘nin dezavantaji varmi derseniz, her nekadar ajantajlari dezavantajlarini bastiriyor olsa da evet vardir ;

Arama motorları, tabi en basta Google Ajax ile sunulan bilgileri görmüyor ve indexlemiyor.
Insanlarin büyük bir kismi hala klasik sitelere alisik oldugu icin bazen ajax uygulamalarini yadirgayabilirler. Örnegin bir link tikladiklarinda sag tarafta icerik gösterildigi halde ziyaretci yeni bir sayfa acilacak diye bekleyebilir. Bu sorunu cözmek icin bircok ajax gelistirici hazirladigi uygulamalarda loading teknigi kullanmaktadir.
Bazi durumlarda ziyaretcilerin Web Tarayici programlari üzerinde ileri geri tusuna basmalari beklenmedik sonuclar cikarabiliyor.
Ajax Server icin cok rahatlatici olsada tüm agirligini ziyaretcinin bilgisayarina verir. Yani Web sitenize giren kimsenin bilgisayari yavas ise ajax islemciyi biraz daha zorlayagi icin web siteniz o bilgisayarda yavaslaya bilir. Fakat gün gectikce eski bilgisayarlar ortadan kalkacagini düsünürsek bu asilmasi pek zor bir problem degil gibi gözüküyor
Yukarida soruna paraler baska bir problem ise ziyarecinin bilgisayarinda javascript kapali ise veya bir antivirüs programi javascript uygulamalarini engelliyorsa siteniz o ziyaretcinin sayfasinda sorunlu calisabilir.

Ajax konusunda en cok dikkat etmeniz gereken husus ilk olarak web sitenizi analiz edip sadece gerekli yerlerde kullanmanizdir ve firefox, internet explorer, Chrome, opera vb… gibi diger browser ‘lerde web sitenizi kontrol ediniz.

Gelisen web 2 teknoloji ile önde gelen bir cok Web Sitesi Ajax kullaniyor örnegin youtube, Google, Ebay, Yahoo, Facebook, Hotmail bunlardan sadece birkaci ve ileleyen zaman icerisinde Ajax Teknigi webtasarimin vazgecilmez yapitaslarindan biri olarak yerini aldi.

Ilerleyen dersler icerisinde adim adim ajaxla nasil uygulamalar gelistirecegimizi anlatacagim, eminim Ajax ‘i ögrendikce cok seveceksiniz

Hazır Kod Siteleri

Huseyin Kocak — Wed, 24 Sep 2008 19:55:35 +0000

Bazen hali hazır da bir kod gerekebilir örneğin Asp ile bir script yazarken “ya jmail ile nasil mail gönderiyordum ?” veya “javascript ile popup acakma icin hangi kodu yazıyordum ?” derseniz işte imdadınıza yetişeceğini umduğum hazır kod siteleri ;

Asp, Asp.Net, Php, Javascript, css, xml, wml, html, sql vb… birçok kategoride kod bulabilirsiniz.

Sitelerin hepsini bir araya toplayarak size sunuyorum ;

Ayrıca bu konuda işe yarar yeni siteler keşfettikçe bu başlık altında güncellemeye devam edeceğim.