Facebook yeni gerçekleşen F8 konferansında Facebook bütün görünümü değiştirecek yeni özelliği Facebook TimeLine özelliğini tanıttı..
Bu özellikle bir kullanıcının doğumundan itibaren, bugüne kadar paylaştığı önemli hareketleri yıl ve ay detayları verilerek sergilemenize olanak sağlıyor.
Facebook TimeLine şuan bütün kullanıcılara açılmadı şuan sadece Facebook Uygulama geliştiricilere açılmış durumda..
jQuery ile nesneleri süzerken belli css özelliklerine bakıp filter ve find kullanarak süzme işlemi yapılabilir.
$("#anasecici").filter(".baslik").css('background-color', 'red');
yukarıdaki kodda anasecici id li elemanın icindeki class özelliği “baslik” olan bütün elemanların arkaplanlarını kırmızı yaptık. Peki ya mantıksal işlem yapıldığında yani verinin durumuna göre süzme yapılacakken ne yapılmalı ?
Burada filter fonksiyonunu kullanırken .filter(function(){}) yapısını kullanabiliriz. Yaptığım sistemdeki biraz kompleks olan yapıyı örnek veriyorum.
HTML Kısmı
<li class="listele1"> <li title="12.20">12.20 Arabası</li> <li title="12.40">12.40 Arabası</li> <li title="12.50">12.50 Arabası</li> <li title="13.10">13.10 Arabası</li> </li>
js Kısmı
var zaman = new Date(); // ben sistemimde zamanla alakalı süzme yaptım, bu yüzden zaman adında bir değişken tanımladım.
$(".listele1 li").filter(function(index) { //buradaki index değişkeni listele1 in içindeki o anki li değeri olacaktır.
return $(this).attr("title").substring(0,2)==zaman.getHours() && $(this).attr("title").substring(3,5)>zaman.getMinutes();
}).css('background-color', 'red');
Kod açıklaması
Şuan saat 12:25
zaman.getHours()// ile güncel zamandan saati aldık. 12
zaman.getMinutes()// ile dakikayı aldık 25
$(this).attr(“title”).substring(0,2)// ile li elementlerinin title bilgilerini çekip bunun sadece ilk 2 karakterini aldık
$(this).attr(“title”).substring(3,5)// ile li elementlerinin title bilgilerini çekip bunun sadece 4. ve 5. karakterini aldık
Daha sonra koyduğumuz koşul ile saati eşit olan ve dakikası güncel dakikadan büyük olan elemanların arka plan renklerini değiştirdik.
Html5 çıkmasıyla bazı yapılarda değişikliklere gidildi ve html5 standartını getirenler , eskiden buyana devamlı olarak kullandığımız etiketlerin bazılarını artık askıya kaldırdılar. Bunlardan biri de köprüyü başka bir sekme/pencerede açmayı sağlayan target=blank etiketi oldu. Bunun yerine external etiketi kullanılıyor. Ama external etiketini şuan da Xhtml1.0 destekleyen sistemler tanımıyor. Burada jQuery işin içene karışıyor. Ve external olarak kodlanmış köprüyü Xhtml1.0 cümlesini anlayabileceği blank olarak değiştiriyor.
Kod kullanımı
$('a[@rel$='external']').click(function(){
this.target = "_blank";
});
/*
Kullanımı
<a href="http://www.emreeksioglu.com.tr/" rel="external">EmreEksioglu.com.tr</a>
*/
Javascript kullanımları tarayıcınızda çalıştığı için örümcekler tarafından problem yaratabilmektedir. $(“#link”).click() ifadesi arama motorları için güzel bir link değildir. Peki jquery sadece kod mu kolaştırıyor du arama motorlarında kötü bir performansı mı var ? tabiki hayır.
return false; komutu imdadımıza tam da burada yetişiyor.
Kötü Link Yapısı Örneği:
<p id="hakkimizda">Hakkımızda</p>
$("#hakkimizda").click(function(){
//Kodlar Gelsin
});
yukarıdaki örnek jquery kod yapısı için normal ama arama motorları için pek de dost bir link değildir.
Arama motoru Jquery Link Yapısı da aşağıdaki gibi olabilir
<a href="#hakkimizda" id="hakkimizda">Hakkımızda</a> // hrefde hakkimizda.html de yazılabilir. Size kalmış
//Yukarıdaki linkimiz hakkimizda imine gitmeden önce javascript kodunu çalıştıracaktır.
$("#hakkimizda").click(function(){
//Jquery Kodlarınız gelicek.
return false; // Bu kod hakkimizda.html sayfasına gitmeden tetiklenen click eventini durduracaktır.
});
bu şekilde arama motorları sitenizi indexlerken hakkimizda.html sayfası varmış gibi index alacaktır.
İndex aldıktan sonra siteniz.com/#hakkimizda sayfasına nasıl giriş yapılacağını ilerideki konularda anlatılacaktır =)
Eski bir siteniz var zamanında bazı sebeplerden dolayı domain’i değiştirmek istiyorsunuz. Yada Google sizi sandbox a attı. Eski yedeğinizi alıp yeni domanize kurdunuz.. Herşey güzel, peki ya eski sitenin Pagerank değeri yada Google’daki linkleri boşa mı gidecek? Herşeye yine sıfırdan mı başlayacaksınız?
Yok artık bilgisayarcılar her ne kadar sözde “asosyal ” olsa da gaddar değiller =) 301 yönlendirmesi yaparak eski pagerank değeriniz değişmeden taşıma işlemi yapabilirsiniz.
Adım adım o zaman nasıl eski sitemizi yeni domaine aktaracağımızı görelim.
1- Eski sistemimizin yedeğini alıyoruz. Ve yeni domainimizin hostuna atıyoruz.
2- Eğer ki Google Sandbox’ına girdiyse sisteminiz tekrar Google Web Master araçlarına ekleyip site haritanızı gönderin.
Normal prosedürü yaptıktan sonra gelelim asıl yönlendirme konusuna, web siteleri değişik programlama dilleriyle yazılabildiği için dolayısıyla kendinize uygun olan bir kod yapısı seçmelisiniz.
3- Uygun olan kod parçasını eski sisteminize yapıştırın.
.htaccess 301 Yönlendirmesi
Options +FollowSymlinks
RewriteEngine on
ReWriteCond %{HTTP_HOST} ^(www.)?eskisiteniz.com$ [NC]
ReWriteRule ^(.*)$ http://www.yenisiteniz.com/$1 [R=301,L]
Asp VB-Script 301 Yönlendirmesi
<%@ Language=VBScript %>
<%
Response.Status="301 Moved Permanently";
Response.AddHeader("Location","http://www.yenisiteniz.com/");
%>
Asp .Net 301 Yönlendirmesi
Php 301 Yönlendirmesi
Bu kodlarla artık eski sitenize giriş yapılmaya çalışıldığında yeni sitenize yönlendirilme işlemi yapılacaktır.
Gelelim son aşamaya Google Web Master Araçlarından adres değişikliği yaptığımızı Google’a bildirmek.
4-
Resimdeki işlemi de yaptıysanız artık yönlendirme işleminiz bitmiş demektir. Kolay gelsin =)
Hız web siteleri için en önemli faktörlerden biridir. Kimse çok yavaş bir sitede gezmek istemez. Facebook bile geliştirdiği programlama diliyle normal bir php dilinden %30 daha hızlı olduğunu duyurmuştu. Yavaş olan bir site arama motorları içinde önemlidir. Çünkü kullanıcı en hızlı biçimde aradığı bilgiye ulaşmak ister, ulaşamayınca sıkılıp, gider.. Google Web Master araçlarında da web siteniz için hız testinin olması durumun hassasiyetini göstermektedir.
Sıkıştırma olayının client tarafında değil de sunucu tarafında yapılması önemlidir, web sunucu veriyi sıkıştırır ve istemciye sıkıştırılmış olarak gönderir. Peki nasıl yaparız bu olayı?
.htaccess ile yapmak istersek
# compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript # Or, compress certain file types by extension:SetOutputFilter DEFLATE
Jquery ile resimleri html içinde değil de sayfa yüklendikten sonra yükletmek sayfanın açılış zamanını hızlandıracaktır.
Nasıl mı yapıyoruz ?
$('#resmim').attr('src', 'resim.jpg').load(function() {
alert('Resim Yüklendi');
});
Arama motoru dostu web siteleri yapmak için özel hata sayfalarından 404‘ü kullanıyorsanız, eğer gerekli ayarlar yapılmamışsa IIS üzerinde bunu ayarlarken Kilit İhlali (Access Violation) hatası alıyor olabilirsiniz.
Peki Nasıl Kurtuluyoruz ?
Öncelikle hatamızın sebebine bir bakalım,
Kilit İhlali (Access Violation) uyarısı ile karşılaşmanızın sebebi C:/Windows/system32/inetsrv/config klasöründeki applicationHost.config isimli dosyanızın içindeki bir kısıtlamadan kaynaklanmaktadır.
applicationHost.config dosyayı text editörünüzle açtıktan sonra ,
<httpErrors lockAttributes=”allowAbsolutePathsWhenDelegated,defaultPath”> satırını bulun.
lockAttributes=”allowAbsolutePathsWhenDelegated,defaultPath” kısmını silerek <httpErrors> şekline getirelim.
Sonra dosyamızı kaydedelim.
Tekrar 404 yönlendirmesi yapmayı denediğimizde Kilit İhlali (Access Violation) mesajı bir daha karşınıza çıkmayacak.
Uzaktan bağlantı programları ilk çıktıklarında büyük bir ilgi görmüştü, windows işletim sistemi içinde de dahil olan ama çok da kullandığımız bir özellikti. Sanırım şuan piyasadaki en iyi uzaktan bağlantı programı olan Teamviewer, mobil alanda da bir kaç adım atmış. Bence çok yararlı ve karizmatik gözüken uygulama ile desteklenen mobil platformlardan evdeki yada işteki bilgisayarınıza bağlanmanızı olanak sağlıyor. Ve artık “eren benim bilgisayarımdan şu dosyayı mail atarmısın” gibi isteklerimize son bulduruyor =)
Şuan Andoid, iPhone ve iPad’i destekleyen uygulamanın en yakın zamanda diğer mobil platformlarda görmek güzel olacaktır.
Apple’lar için şuan Applestorede bu uygulamayı indirebileceğiniz gibi, Android için de Android marketten indirebilirsiniz.
Gün geçtikçe web sitelerinden çok mobil çözümler daha da çoğalmaya başlıyor. Ve Google bu bölüm de karşımıza çıkıyor. Kendi mobil işletim sistemi Android için uygulama yapmak isteyenlere bir kolaylık sağlıyor.
Üstelik bunun için herhangi bir yazılım bilgisine sahip olmadan basit bir web arayüzü yardımı ile sağlıyor. Ve bu sayede Android uygulamaları çoğaltarak piyasadaki rekabette öne geçmeye hazırlanıyor.
Bu uygulama ile sadece genel kitlelere hitap eden mobil uygulamalar değil, kişilerin kendilerine özel uygulamaları oluşturmalarını hedefliyor.
Ama Google yetkililerin yaptığı açıklamaya göre tek korkularının- Nokia Ovi’nin içinde olan yüzlerce çalışmayan uygulama gibi- , çöp uygulamaların fazla olması..
Peki neler yapılabilir bu App Inventor ile;
Basit oyunlar,
Eğitim amaçlı yazılımlar,
Ses tanıma özelliği içeren mobil uygulamalar gibi uygulamalarla kullanıcıların mobil uygulama geliştirmesine olanak sağlıyor.
Şuan beta kullanımında olan App Inventor çok yakında tam hizmete geçileceği duyurulmuş.
Bu sistemi şuan Macintosh, windows xp, vista, 7, gnu/linux ubuntu8+, debian 5+ işletim sistemlerinde çalıştırabilirsiniz.
Ve de bilgisayarınızda java 6 da yüklü olması gerekiyor.
Google App Inventor tanıtım videosu