30 Aralık 2013 Pazartesi

Bu fotoğraf Photoshop mu? Nasıl anlarız?

Takipçilerimizden gelen soruların büyük bir kısmı bu soruyu içeriyor : “Bu fotoğraf Photoshop mu? Nasıl anlarız?”


ela main


Bir fotoğrafın Photoshop ile düzenlenip düzenlenmediğini anlamak için ilk gözlerinizi sonrasında da teknolojiyi kullanmanız gerekiyor. Hadi bu konuyu biraz detaylandıralım.


Bir fotoğrafın Photoshop olup olmadığını nasıl anlarız?


Öncelikle şunu belirtelim. Artık neredeyse her görsel Photoshop ile işleniyor. Belki renk ve efekt katılmıyor ama en azından yeniden boyutlandırıyor. Bu yüzden karşınıza çıkan çoğu görsel temelinde Photoshop imzası taşır. Yani JPG/GIF/PNG dosyalarını not defteri ile açıp içerisinde Photoshop ibaresi görmeniz artık hiçbir şeyin kanıtı değil.


Bu sorunun iki ayrı cevabı var. Ve ikisi de 100% garanti vermiyor. İlk olarak en çok ilginizi çekecek metod olan Teknoloji faktörü ile başlayalım. Zaten bu konumuzun genel teması da görüntü hata düzeyi analizi (Image Error Level Analysis) olarak belirtilebilir.


Error Level Analysis


Hata Düzeyi Analizi olarak çevirebileceğimiz bu teknik, görsellerdeki büyük geçiş ve seviye bozukluklarını çözümlememizi sağlıyor. Dijital olarak manipüle edilmiş görselin, varsa uğradığı hasarı tespit etmemizi sağlıyor. Açıklamayı biraz daha basitleştirelim. Onlarca piksel ve renkten oluşan bir görselin renk yoğunluğunu sıkıştırararak bozulmaları tespit etmemize ELA (Error Level Analysis) diyoruz. Hadi bir örnek ile devam edelim.


aw ELA


Yukarıdaki fotoğrafı inceleyerek devam edelim. Sağdaki fotoğrafta hakim olan gri tonlaması bazı kısımlarda mavi ve kırmızı piksellerle bölünmüş sizlerin de fark ettiği gibi. İşte bu kısımlarda geçişler o kadar dar alanda yapılmış ki bu tarz piksel patlamaları olmuş. Bu bize ne gösterir?


  1. Sol kısımdaki sağ, kaş, göz, cilt ve dudak rengiyle oynanmış.

  2. Sol ve sağ kısımdaki metinler sonradan eklenmiş

  3. Arka plan tamamıyla değiştirilmiş

İşin güzel kısmı bunların 690×216 boyutlarındaki küçültülmüş bir görsele bakıp söyleyebiliyoruz. ELA‘nın temelini öğrenmek, Usame Bin Laden ve Saddam’ın öldürülüş veya Amerika’nın Ay’a ayak basış fotoğraflarını çözümlemenizi sağlamayabilir. Fakat efekt uygulanmış bir fotoğrafı algılamakta teknik olarak en başarılı yöntem olarak gösterilebilir.


Bir görseli ELA testine nasıl sokarız?


Bunu yapmamızı isteyen mükemmel bir web sayfası var. FotoForensics bu analizi direkt olarak web üzerinden yapmamızı sağlıyor.


Yukarıdaki adresten görsellerinizi ELA formatına çevirip bu tekniği kullanabilirsiniz.


Detaylı Örneklendirme


Ruth Steck’in fotoğrafıyla bir örneklendirme yapalım. Orjinal fotoğraf :


Ruth Steck


Şimdi bu fotoğraftaki anne ayıyı ve yavruları Photoshop’un Clone Stamp isimli aracıyla yok edelim.


Ruth Steck2


Şuan fotoğrafta bir oynama olduğu ilk bakışta bile anlaşılabiliyor. Fakat biz yine de bir ELA sonuçlarına bakalım.


ELA Analyze


Yukarıdaki sonuç görüntüsünde soldaki orjinal fotoğrafımız, sağdaki ise Photoshop ile düzenlenmiş fotoğraf. Oluşan mavi ve kırmızı pikseller manipüle edilmiş bölgeleri bize göstermekte.


Diğer bir silahınız ise gözleriniz!


Bir görselin Photoshop ile değiştirilip değiştirilmediğini fark etmek için en önemli silahınız gözlem yeteğiniz olacaktır. Işık yoğunluğu, renk tonlamaları, gereksiz parlamalar veya alakasız tonda pikseller size bir manipülenin olduğunu işaret edecektir. Bu yüzden ELA’nın bile çözemeyeceği oynamaları doğru gözlem ile yakalayabileceğinizi belirterek bu makalemize de son veriyoruz.


Kaynaklar


http://www.errorlevelanalysis.com/


http://www.theatlantic.com/infocus/2012/11/national-geographic-photo-contest-2012-part-ii/100414/


http://lifehacker.com/5644259/how-to-detect-a-photoshopped-image



Bu fotoğraf Photoshop mu? Nasıl anlarız?

27 Aralık 2013 Cuma

Photoshop ile Çift Yüz İllüzyonu

Bu dersimizde Photoshop ile son zamanlarda sosyal ağlarda sık sık gördüğümüz çift yüz illüzyonu (double face illusion) örneği oluşturuyoruz.

aw youtube screen


Videoda kullanılan yüzey tipleri aşağıdadır :
Yüzey 1


Yüzey 2


Video Dersler


Video derslerimizi takip etmek için YouTube kanalımıza abone olabilirsiniz.



Photoshop ile Çift Yüz İllüzyonu

25 Aralık 2013 Çarşamba

Sayfa açılışında div'in en altı nasıl gösterilir?

bottomdiv Bir tasarım üzerine son sürat çalışırken karşınıza küçük bir engel çıkar ve saatlerinizin boş yere uçup gitmesine sebep olur. Bu makalenin çıkış noktası da bu minik sorunlardan birinin çözümü ile alakalı.


Web sayfanız açıldığında overflow tanımlı bir öğenizin kaydırma çubuğunun (scroll) en altta olmasını istiyorsanız doğru makaledesiniz.


Örneğin bir chat sistemi hazırladığımızı varsayalım. Yeni yazılan mesajlar bir div’in içerisine otomatik olarak ekleniyor. Yukarıdan aşağıya doğru eskiden güncele bir listeleme yapılıyor. Kullanıcılar bu chat sistemine girdiğinde o div’in en üstündeki eski mesajı değil, en alttaki güncel mesajı görüntülemeli. İşte sizlerle birlikte hazırlayacağımız JavaScript kodu da tam olarak bu işlevi görüyor.


Nasıl hazırlanır?


Öncelikle üzerinde çalışmak için bir <div> oluşturalım. Aşağıda örnekte kullandığım kodlar mevcut. Burada önemli olan div’e bir ID tanımlaması yapmamız. Örneğimizde ise bu tanımlama adobewordpress şeklinde.


HTML Kodları



<div id="adobewordpress">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis consequat iaculis. Cras bibendum libero a massa pretium molestie. Nunc non mauris nulla. Vestibulum massa magna, semper ac fermentum ac, imperdiet ac purus. Donec eu sapien rutrum dui posuere sollicitudin. Nulla quis fermentum ipsum. Suspendisse eu hendrerit leo. Donec congue arcu libero, nec lacinia leo gravida vitae. Donec libero diam, convallis et molestie a, ornare eu lorem.</p>
<p>Vestibulum augue ipsum, euismod tristique tempor id, ornare ac nunc. Donec nulla ligula, ullamcorper sit amet congue non, sodales sed sapien. Curabitur ut placerat sapien, venenatis dapibus nunc. Curabitur sit amet elit eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas quis quam risus. Praesent blandit justo vitae varius posuere. Cras dignissim metus et leo tempus pretium. Quisque vitae leo nunc. Ut scelerisque tempus vehicula. Integer sollicitudin volutpat augue, in volutpat justo tempus eget. In at nunc risus. Praesent congue scelerisque facilisis.</p>
<p>Div'in en altı burası</p>
</div>

Şimdi geldik CSS kodlarımıza. Burada 3 tanımlama yapacağız : Uzunluk, genişlik ve overflow. Bu tanımlamalar sayesinde div üzerinde kaydırma çubuğu gözükecek, div sabit bir boyutta gösterilecek.


CSS Kodları



#adobewordpress{
width:200px;
height:200px;
overflow:auto;
}

Ve son olarak JavaScript kodlarımız geliyor. Buradaki kodları div’in altına yerleştirmeniz gerekmekte. focusBottom tanımlamasıyla adobewordpress ID’li öğeye erişiyoruz, daha sonra ise div için açılışa varsayılan scroll mesafesini belirtiyoruz.


JS Kodları



<script type="text/javascript">
var focusBottom = document.getElementById("adobewordpress");
focusBottom.scrollTop = focusBottom.scrollHeight;
focusBottom.scrollLeft = focusBottom.scrollWidth;
</script>

Şimdi bu çalışmamızı Codepen üzerinden canlı olarak test edelim.


Örnek




Sayfa açılışında div'in en altı nasıl gösterilir?

29 Kasım 2013 Cuma

Kartvizit nasıl hazırlanır?

aw kartvizit


Kurumsal kimlik üzerine çalışmalarımız kartvizitler ile devam ediyor. Kartvizit, bir tasarımcı için küçük boyutlu ama etkili bir oyun sahası. Tasarım bilginizden ziyade yaratıcılığınız bu tarz çalışmalarda size fazlasıyla yardımcı olacaktır.


Nasıl hazırlanır?


aw youtube screen


Kartvizit ölçüleri nedir?


Eğer baskı yapacağınız yerde bunu mümkün kılıyorsa baskı boyutlarını belirlerken özgür olmalısınız. Google’ın görsel aramalarında “kartvizit” veya “business card” diye arama yaptığınızda birçok boyutta ve farklı tipte kartvizitle karşılaşırsınız. Fakat yine de sektörde ağırlıklı olarak kullanılan boyutlar şöyle:


Genişlik : 8,6 cm


Yükseklik : 5.4 cm


Çözünürlük : 300 Piksel/cm


Renklendirme : CMYK


Yukarıda hazırladığımız çalışma da bu özellikleri taşımaktadır.


Video Dersler


Video derslerimizi takip etmek için YouTube kanalımıza abone olabilirsiniz.



Kartvizit nasıl hazırlanır?

10 Ekim 2013 Perşembe

Çekiliş ile Template Monster'dan ücretsiz tema!

cekilis 150x150


Merhaba arkadaşlar. Güzel bir etkinlik ile sizlerleyiz.


Template Monster, sizlerin de bildiği gibi dünyanın en büyük tema arşivlerinden birisi. Sadece WordPress, Drupal ve Joomla gibi CMS&Blog sistemlerini değil, onlarca tip kaliteli hazır web taslağını bünyesinde bulundurmakta.


Günümüzde ise Template Monster Türkiye (http://www.templatemonster.com/tr) ekibini oluşturmakta. Türkiye servisinin açılması sizler gibi biz Adobewordpress ailesini de sevindirdi.


Süreç dahilinde Türkiye ekibi ile anlaşmalı olarak küçük bir organizasyon yapmaya karar verdik. Adobewordpress‘in takipçilerinden birine, Template Monster’dan istediği herhangi bir temayı hediye edeceğiz.



Yarışmaya katılmak için;


Facebook sayfamızdan (https://www.facebook.com/AdobeWordPress) paylaştığımız ilgili bildiriye cevap yazarak yarışmaya katılabilirsiniz.


Örnek mesaj : Template Monster’ın #11111 numaralı temasını web sayfamda kullanmak istiyorum. Bu yüzden çekilişe katılmak istiyorum. Elektronik posta adresim : mail@mail.com


Template Monster üzerindeki temalar #11111 şeklinde numaralandırmıştır. Beğendiğiniz temanın numarasını mesajınızda belirtmeniz gerekmektedir. İstediğiniz temayı http://www.templatemonster.com/tr adresinden seçebilirsiniz.


Elektronik posta adresinizin doğru olması önemli, çünkü indirim kuponu şirket tarafından size e-posta olarak yollanacaktır.


Yarışmanın tek bir kuralı var. O da birden fazla kez katılamayacağınız.


Sonuçlandırma


Bu çekiliş Template Monster sponsorluğunda yapılmaktadır. Çekiliş sonuçları 20 Ekim 2013 tarihinde adobewordpres.com ve ilgili sosyal ağlarımızdan açıklanacaktır. 3 şanslı kişiye, bildirdikleri elektronik posta adresleri üzerinden hediyeleri iletilecektir.



Çekiliş ile Template Monster'dan ücretsiz tema!

9 Ekim 2013 Çarşamba

Wp-admin listelemelerindeki sütunların sayısını arttırın!

codepress admin column Codepress Admin Columns, Wp-admin’i geliştiren, listelemelerde yeni seçenekler yaratan mükemmel bir uygulama. Eklenti yönetici paneli arayüzünüzü çok daha efektif kılmak konusunda iddialı.


Yazılar, sayfalar, bağlantılar, ortamlar, kullanıcılar ve yorumlar gibi listeleme öğelerine yeni sütunlar ekleyen eklenti, filtrelemelerinizi kolaylaştıracak.


Makalemizin devamında eklentiyi detaylandıracağız ve kurulumu ile ilgili bilgileri paylaşacağız.


Neler getiriyor?


Kurulum sonrası karşılaşacağınız gelişmiş filtreleme sütunlarını ekran görüntüleriyle tanıyalım.


admin columns


Yazı türleri için eklenecek sütunlar


posts column


Featured Image, Excerpt, Post Attachments, Page Order, Page Templates, Post Formats, Taxonomies, ID, Slug, Sticky, Word count, Roles, Status, Number of Attachments, Last Modified, Comment count, Before More Tag Content, Custom Fields


Kullanıcılar için eklenecek sütunlar


User ID, First name, Last name, Url, Register date, Biographical Info ( description ), Number of Posts Types, User Custom Fields


Beraberinde user level, capabilities, admin color, nickname gibi listelemeler de bu sıralamaya dahil edilebilir.


Medyalar için eklenecek sütunlar


media column


Media ID, File name, Height, Width, Dimensions ( width x height ), EXIF and IPTC image data, Description, Caption and Alternate tekst , Mime-Type, Media Custom Fields, Filesize


Yorumlar için eklenecek sütunlar


Yorum alanı için çok fazla filtre mevcut fakat öne çıkanlarını tanıyacak olursak :

Avatar, Author IP, Agent, ID, Comment excerpt, Comment Meta data,


Bağlantılar için eklenecek sütunlar


ID, Target, Description, Notes, Owner


Kurulum


Eklenti tamamıyla ücretsiz.


WordPress’e eklentilerin nasıl kurulduğunu kısaca hatırlayalım.


  1. Dosyayı indirin ve zip içerisinden çıkarın.

  2. Eklenti klasörünü FTP aracılığıyla ‘/wp-content/plugins/’ dizinine upload edin,

  3. WordPress admin panelinizden Eklentiler alanına gidip eklentiyi etkinleştirin.

Download Adresi : codepress-admin-columns.zip



Wp-admin listelemelerindeki sütunların sayısını arttırın!

3 Ekim 2013 Perşembe

Photoshop ile Cilt Sorunlarını Düzeltme

Bu dersimizde portrelerdeki cilt sorunlarını Photoshop aracılığıyla düzeltiyoruz.


aw youtube screen



Photoshop Dersleri


Video derslerimizi takip etmek için YouTube kanalımıza abone olabilirsiniz.



Photoshop ile Cilt Sorunlarını Düzeltme

6 Eylül 2013 Cuma

Photoshop ile görselleri piksele çevirin!

pixel apple Bitmap fotoğrafların yeniden ölçütlendirilmesinde belirginleşen pikseller her zaman düşmanımız değil. Çizimlere ve resimlere uygulayacağımız pikseller sayesinde şık ve etkileyici görüntüler elde edebiliriz. Özellikle ATARI ve Gameboy gibi eski tip oyun konsollarında gördüğümüz görüntü tipini elde etmek istiyorsanız bu teknik tam size göre.


Photoshop ile fotoğraflarınıza mozaikler halinde pikseller ekleyebilir, bunları matematik defterlerindeki gibi karelerle çevreleyebilirsiniz.


Pixel ART her türden noktasal çizime verilen isim. Bu makalemizde ise internette anlatıma rastlayamayacağınız bu ilginç tekniği öğreneceğiz. Hazırlayacağımız tekniğe benzer bir action dosyası burada 4$’a satılmaktadır. 


Nasıl yapılır?


Aşağıdaki videoda söz konusu tekniğin nasıl yapıldığını 3 örnek ile anlatıyoruz.


aw youtube screen


Video derslerimizi takip etmek için YouTube kanalımıza abone olabilirsiniz.


 


Fotoğraf pikselleştirme


Yukarıda paylaştığımız 4$’lık action dosyası ve bizim hazırlayacağımız örnekleri kıyaslayalım.


4$’a satılan Action dosyası


photoshop pixelart


Adobewordpress’in anlatımıyla hazırlayacağınız örnek


aw pixelart


Kapanış


Hazırladığımız bu piksel fotoğraflar sizleri de eskiye götürmüştür. Street Fighter gibi eski oyunlar gözümüze hala bu dolu dolu renkli pikseller sebebiyle güzel gözükmektedir. Hatta bu tip tasarımlar ile çizgi romanlar ve yeni oyunlar üretilmekte.


street fighter


İyi çalışmalar.



Photoshop ile görselleri piksele çevirin!

1 Eylül 2013 Pazar

WordPress'te kırık linkler (404) nasıl düzeltilir?

wp broken links 404 hatasına sebep olan kırık linkler (broken links) web sayfanızın SEO değeri için büyük risk oluşturmakta. 


“404 page not found” hatası sitenizin ve markanızın değerini düşürür. Bunun önüne geçmek için hata oluşturan adresleri bulmalı ve önlem almalısınız. Gözünüz korkmasın. WordPress sitenizde bu işlemi yapmanıza yarayacak birçok kullanışlı eklenti mevcut.


Bu makalemizde WordPress‘te kırık linkleri bulan ve onarımı kolaylaştıran mükemmel bir eklentiyi inceleyeceğiz. Karşınızda “Broken Link Checker!


Kırık linkler nasıl onarılır?


İlk olarak Broken Link Checker eklentisini kurmanız gerekiyor. Eklentiyi kurduktan sonra kullanımı üzerine konuşacağız. WordPress’e eklenti kurulumunu hatırlayalım.


Kurulum


Eklenti tamamıyla ücretsiz.


WordPress’e eklentilerin nasıl kurulduğunu kısaca hatırlayalım.


  1. Dosyayı indirin ve zip içerisinden çıkarın.

  2. Eklenti klasörünü FTP aracılığıyla ‘/wp-content/plugins/’ dizinine upload edin,

  3. WordPress admin panelinizden Eklentiler alanına gidip eklentiyi etkinleştirin.

Download Adresi : broken-link-checker.zip


Nasıl çalışır?


Eklenti kurulumdan sonra wp-admin‘e giriyoruz. Araçlar ve Ayarlar menüleri altında eklentimiz yerini alıyor. Araçlar > Kırık Bağlantılar alanına gidiyoruz ve ilk panelimizi tanıyoruz.


broken link checker


Açılan pencerede toplam linklerimiz ve kırık bağlantılarımız listeleniyor. Listelemede yüksek ihtimal kırık bağlantı 0 olarak gösterilecektir. Aramayı güncellemek için sağ taraftaki Arama alanına gidiyoruz ve hiçbir formu öğesini doldurmadan Aranan Bağlantılar buttonunu tıklıyoruz.


broken link checker2


Eklenti şimdi var olan linkleri tekrar kontrol edecektir. Eğer kırık link ile karşılaşırsanız Adres düzenleme linkine gidin ve adresi onarın.


Önemli hatırlatma : Eklenti de tarama yaptığınız bağlantının o an için 404 hatası vermesi sitenin tamamıyla kapandığını göstermez. Dolayısıyla kırık linklerinize müdahale etmeden önce ilgili siteyi bir süreliğine takibe alın.


Şimdi gelelim Ayarlar menüsü altındaki Bağlantı Bildirici paneline. Bu kısım kırık linklerimizi otomatik olarak kontrol etmemizi sağlıyor. Bir çeşit ping aracı gibi düşünebiliriz. Cevap vermeyen adresleri otomatik olarak 404 şeklinde algılıyor.


broken link checker3


Kapanış


Kullanıcılarımızın çoğunun eklenti fazlalığından çekindiğinin farkındayız. Ne kadar çok eklenti, o kadar yavaş site genellemesi aslında doğru. Broken Link Checker eklentisini gönül rahatlığıyla sitenizi kurabilirsiniz. Herhangi bir yavaşlamaya sebep olmayacağı gibi işiniz bittiğinde hiçbir iz bırakmadan silebilirsiniz.


Bu tarz performans ve SEO destekleyici eklentiler kullan at mantığıyla çalışabiliyor. Bu da WordPress sitenizi gençleştirmenize yardımcı oluyor.


Unutmayın, kırık linkler sadece tarayıcıların verdiği 404 hatalarından ibaret değil, SEO çalışmalarını baltalayan tehlikeli bir problemdir.


İyi çalışmalar.



WordPress'te kırık linkler (404) nasıl düzeltilir?

20 Ağustos 2013 Salı

Joomla'dan WordPress'e geçiş nasıl yapılır?

joomla to wordpress Joomla aynı WordPress gibi dünyanın en çok kullanılan CMS’lerinden birisi. Fakat WordPress ile aynı kullanışlılığı sunmadığı zamanlar olabiliyor. Dolayısıyla yola Joomla ile çıkmış birisi daha sonra WordPress’e taşınmak isteyebilir. Özellikle binlerce eklenti ve tema desteği WordPress’i daha çok tercih edilen CMS yapmakta.


Bu makalemizde “Joomla’dan WordPress’e nasıl geçiş yapılır?” sorusunu cevaplayacağız.


Joomla’dan WordPress’e geçiş


İlk olarak sunucumuza WordPress kurarak başlıyoruz. Bu işlemi localhost üzerinden de yapabilirsiniz. Tercih sizin.


WordPress kurulumundan sonra wp-admin‘e giriyoruz ve taşıma işlemimizde bize yardımcı olacak eklentiyi kuruyoruz. Aynı zamanda WordPress’e eklentilerin nasıl kurulduğunu hatırlayalım.


FG Joomle to WordPress Eklentisini


Eklenti tamamıyla ücretsiz.


WordPress’e eklentilerin nasıl kurulduğunu kısaca hatırlayalım.


  1. Dosyayı indirin ve zip içerisinden çıkarın.

  2. Eklenti klasörünü FTP aracılığıyla ‘/wp-content/plugins/’ dizinine upload edin,

  3. WordPress admin panelinizden Eklentiler alanına gidip eklentiyi etkinleştirin.

Download Adresi : FG Joomle to WordPress


Kurulumu tamamlayıp eklentiyi aktifleştirdiğimizde Tools > Import alanına gidiyoruz. Seçimler arasında Joomla (FG) olduğu dikkatinizi çekecektir.


Bu alanda Joomla web sayfanızın adresini ve veritabanı bilgilerinizi girmeniz gerekiyor. Eğer veritabanı bilgilerinizi hatırlamıyorsanız Joomla sitenizin admin panelinden Global Configuration > Server alanını kullanın. Bu pencere altında bilgileriniz listelenmektedir. Ayrıca FTP’de ana dizinde bulunan configuration.php de bu bilgileri barındırmaktadır.


global configuration


Database bilgilerinizi girdikten sonra Behavior alanına geçiş yapın. Eğer görsellerinizi de WordPress’e taşımak istiyorsanız Force media import seçeneği aktifleştirin. Son olarak Important content from Joomla to WordPress buttonunu tıklayarak işlemi tamamlayın.


behavior joomla to wp


Böylece eklenti taşıma işlemini başlatacaktır. Joomla sitenizin içerik genişliğine göre bu süreç uzayabilir. İşlem tamamlandığında atılması gereken son adım Dahili Linklerin düzenlenmesi olacaktır. Modify Internal Links buttonunu tıklayarak bu adımı da tamamlayabilirsiniz.


Karşılaşacabileceğiniz hatalar


Taşıma işlemi esnasında karşınıza birkaç küçük sorun çıkabilir.En bilinen hata aşağıdaki gibidir.


“Fatal error: Allowed memory size of ****** bytes exhausted”


Büyük dosya transferlerinde karşılaşılan bu hata tipinin çözümü için buradaki makalemize göz atabilirsiniz.


Ayrıca veritabanı hatası alırsanız daha önce girdiğiniz bilgilere tekrar göz atın. Yanlış bir veri girmiş olmalısınız.


 



Joomla'dan WordPress'e geçiş nasıl yapılır?

18 Ağustos 2013 Pazar

SEO kaybı yaşamadan WordPress'i başka bir domaine taşımak

wordpress paket WordPress sitenizi başka domaine taşımak ilk bakıldığında göz korkutucu bir işlem. Özellikle sitenizin SEO değeri taşıma esnasında kalitesini yitirirse bu her şeyin sonu olabilir. Kimse web sayfasının tüm değerinin saniyeler içerisinde yok olmasını istemez.


Adobewordpress ailesi olarak WordPress için el atılmamış konuları değerlendirmeye devam ediyoruz. Artık zorunlu domain değişiklikleri sizi korkutmasın. Çünkü tavsiyelerimiz sayesinde SEO değerinizi yitirmeden WordPress sitenizi başka domaine taşıyabileceksiniz.


Domain değişiminin Google’a etkisi


Kullanıcılarımızın neredeyse tamamı Google’ın çalışma prensibine hakim. Dolayısıyla domain değişikliğinde yaşayacağınız trafik kaybını size hatırlatmamıza gerek yoktur diye düşünüyoruz. Fakat yine de özetlemekte fayda var.


WordPress sitenizin domainini değiştirdiğinizde Google belirli bir süre içerisinde eski domaindeki indeksleri temizleyecektir. Bu da Google’dan gelen trafiğinizi, dolayısıyla hitlerinizi düşürecektir. Fakat içeriğinize güveniyorsanız bu sizi endişelendirmesin. Çünkü kısa sürede yeni domaininiz altında da aynı başarıları elde edeceksiniz.


Daha sonra yeni domaininiz teker teker indekslenmeye başlayacak. Yeni verilerin indekslenmesi işlemini hızlandırmak için Google Webmaster Tools’u kullanabilirsiniz. Google gibi getir aracı işinizi fazlasıyla görecektir. Bu aracı tanımak için buradaki makalemize göz atabilirsiniz.


Unutmayın, bu makale WordPress sitenizi başka bir domaine taşımayacak, sadece size yol haritası belirleyecek.


Son olarak bir tavsiyede bulunmak isteriz. Eski domainizi açık tutup 1 yıl boyunca yeni domainize yönlendirmeniz trafik kaybınızı minimuma indirecektir.


Başlamadan önce


İlk olarak sitenizin her türlü yedeğiniz alın. Yazı ve kullanıcıları dışarı aktarın, FTP’den tüm dosyaları bilgisayarınızın sabit diskine kopyalayın. Hatta hakimseniz phpmyadmin üzerinden SQL yedeği bile alın. Yedekleme için daha önce size tanıttığımız BackWPup ve WP-DBManager gibi eklentileri de kullanabilirsiniz.


Burası önemli, tüm sitenizi güvence aldığınıza emin olun.


WordPress sitenizi taşıma


İlk olarak eski sitenize WordPress Duplicator isimli kopyalıyıcı eklentiyi kurun. Bu eklentinin “Backup, Copy, Clone” sloganı her şeyi açıklar nitelikte. Eklentiyi kurduktan sonra wp-admin‘e Duplicator isimli bir menü gelecektir. Create diyerek yeni bir kopya oluşturalım.


create duplicator package


Create’i tıkladıktan sonra işlem başlayacaktır. Oluşturulacak kopyalama için bir isim belirtiyoruz. Eğer isim belirtmek isterseniz eklenti otomatik olarak blogun ismini atayacaktır. İşlem web sayfanızın içeriğinin genişliğine göre uzayabilir.


duplicator packages


Sonunda bütün dosyalarınız ZIP formatında yedeklenecektir. Dosyaları rahatlıkla bilgisayarınıza indirip yedekleyebilirsiniz. Installer.php dosyası taşıma işleminin devamında işimize yarayacaktır.


Şimdi FTP ile yeni web sayfamıza bağlanıyoruz. WordPress’i taşıyacağınız alanın tamamıyla boş olduğuna emin olun. Daha sonra bu alana ZIP dosyasını ve  installer.php‘yi yükleyin. Şimdi tarayıcı sayesinde installer.php’yi görüntüleyin.


Örnek URL : http://www.adobewordpress.com/installer.php


Karşımıza aşağıdakine benzer bir ekran gelecektir.


duplicator installer


Bu alanda veritabanımıza erişim bilgilerimizi giriyoruz. Formu onaylamadan önce veritabanınızın erişilebilir ve boşaltılmış olmasına dikkat edin. Ayrıca “I have read warning and notices” kutucuğunu işaretlemeden önce uyarıları okumanızda fayda var.


Eğer işlemi başlatmak isterseniz  “Run Deployment” buttonunu tıklayın. Böylece ZIP içerisindeki dosyalar yeni sitenize taşınacak, installer.php işlemini tamamlayacaktır. Eklenti şimdi sizi Update sayfasına yönlendirecektir.


Update alanında yeni ve eski domainleriniz tanımlanmalıdır. Eklenti bu işlemi otomatik olarak yapacaktır fakat yine de kontrol etmenizde fayda var. Daha sonra Update buttonunu tıklayarak işleme devam edebilirisiniz.


Bu işlemden sonra kısa bir Test uygulaması görüntüleyeceksiniz ve her şey hazır. Şimdi yeni sitenizin wp-admin paneline giderek Settings(Ayarlar) > Permalinks(Kalıcı Bağlantılar) alanına gidin. Admin panelinize giriş yaparken eski sitenizdeki kullanıcı adı ve şifrelerinizi kullanabilirsiniz.


Kalıcı bağlantılardaki ayarlarınıza göz atın. Eski sitenizdekiden farklılıklar olmasa bile tekrar kaydedin. Kalıcı bağlantılarınızı tekrar kayıt ettikten sonra installer.php, installer-data.sql ve installer-log.txt dosyalarını FTP’den silebilirsiniz.


Artık tüm sitenizi kısa bir teste tabi tutabilirsiniz. Görsellerinize ve konularınıza göz atın. Çalışmayan ve eksik alanlara tek tek müdahale edin. Yüksek ihtimal bir problem ile karşılaşmayacaksınız.


Burada bitmedi.


Google trafiklerimizi korumak için 301 yönlendirmelerini düzenleyelim


En önemli adımlardan birine geldik. Google’daki sonuçlarımızın yeni sitelere yönlenmesini sağlamak için 301 alanlarını düzenleyeceğiz.


Daha önce söylediğimiz gibi eski sitenizi aktif tutmanız bu yüzden önemli. Şimdi FTP aracılığıyla eski web sayfamıza bağlanıyoruz. Ana dizindeki .htaccess dosyasını düzenleyeceğiz. Eğer hali hazırda htaccess dosyanız yoksa masaüstünüzde bir not defteri oluşturup sunucunuza upload edin. Daha sonra txt uzantılı bu dosyayı .htaccess olarak yeniden isimlendirin.


HTACCESS’in en üstüne aşağıdaki kodları yapıştırın.



#Options +FollowSymLinks
RewriteEngine on
RewriteRule ^(.*)$ http://www.yenisiteadresi.COM/$1 [R=301,L]

Bu işlem sonrasında eski sitemizi tam anlamıyla yeni sitemize yönlendirmiş olduk. Şimdi geriye kalan adımları da tamamlayarak işlemi bitirelim.


Google’ı domain değişikliğinden haberdar edelim


En önemli adımlardan bir diğeri ise Google’ı taşınmanızdan haberdar etmektir.


Şimdi Google Webmaster Tools‘a gidiyoruz. Sol menüdeki Configuration alanından Change of Adress seçimini yapıyoruz.


webmaster tools change of adress


Yeni adresinizi belirttikten sonra Google bu adresini de onaylatmanızı isteyecektir. Daha önce üye olurken yaptığınız gibi yeni domaininizi de onaylatın.


Kullanıcıları da taşınmanızdan haberdar edin


Sizi siz yapan kullanıcılarınızı da bu taşınmadan haberdar etmelisiniz. Gerçi bu işi yukarıda anlattığımız 301 yönlendirmeleri büyük ölçüde yapacaktır, fakat yine de Twitter, Google+ ve Facebook gibi sosyal ağ hesaplarınızdan bilgilendirici paylaşımlarda bulunun.


Kapanış


Taşıma işlemi her zaman gözümüzü korkutmuştur. Bu makaleye rağmen yine de süreç can sıkıcı olacaktır. Adobewordpress olarak sizler için küçük bir rehber hazırlamak istedik. Umarım işinize yaramıştır.


Bir sonraki makalemizde görüşmek üzere, hoşça kalın.



SEO kaybı yaşamadan WordPress'i başka bir domaine taşımak

17 Ağustos 2013 Cumartesi

Favicon nedir? Nasıl oluşturulur? WordPress'e nasıl eklenir?

wordpress favicon ico


Web sayfalarının isminin hemen solunda gösterilen küçük boyuttaki iconlara Favicon denir. Favicon görselini bir web sayfası için olmazsa olmaz listesine sokabiliriz. Gayet basit bir şekilde hazırlanan bu iconlar içeriğinizi özetler niteliktedir.


Favicon.ico


Yukarıda da tanımladığımız gibi tarayıcılarda site isminin solunda gösterilen küçük iconlara verilen isimdir.


Favicon.ico dosyasının boyutları değişsede temel özelliği kare şeklinde eş uzunluktaki kenarlara sahip olmasıdır. İdeal boyut  için 16×16 piksel kullanılabilir fakat bu oranın katları 32×32, 64×64, 128×128 piksel gibi boyutlandırmalar da sorun yaratmayacaktır.


Favicon görselleri tüm tarayıcılarda çalışmakta fakat tahmin edebileceğiniz gibi Internet Explorer gösterimi sadece .ico uzantısı için yapmakta. Dolayısıyla makalemizin devamında .ico formatına sadık kalacağız.


Favicon.ico nasıl hazırlanır?


Photoshop gibi görsel editörleri sayesinde kendi faviconlarınızı hazırlayabilirsiniz. Tek yapmanız gereken kare boyutlarında çalışmak. Yukarıda belirttiğimiz örnek piksel boyutlandırmalarından birini kullanabilirsiniz.


Çalışmanızı çizdikten sonra önemli bir diğer adım, kaydetme işlemine geliyoruz. Görsellerinizi PNG uzantısıyla kaydederseniz hem kalite kaybı yaşamazsınız, hem de transparan arka planlarınızı korursunuz.


PNG formatındaki dosyasını ICO‘ya çevirmek için Favicon Generator‘u kullanabilirsiniz. Bu site PNG dosyalarını hızlıca ICO dosyasına çevirmekte.


Web sayfama nasıl Favicon.ico eklerim?


Yukarıdaki adımları izleyerek bir .ico dosyası oluşturdunuz ve sıra onu web sayfasına eklemeye geldiyse yapacağınız işlem gayet basit. Hazırladığınız dosyayı FTP aracılığıyla ana dizininize atın.


WordPress kullanıcıları buraya dikkat, dosyalarınızı wp-content, wp-admin ve wp-includes gibi klasörlerin bulunduğu ana dizine atmanız gerekiyor. Temaların olduğu kısma yükleme yaparsanız aşağıdaki adres satırı çalışmayacaktır.


Favicon görselinizi sitenize eklemek için aşağıdaki kodları <head></head> içerisine yerleştirin.


WordPress kullanıcısıysanız bu kodları temanızın header.php dosyasına ekleyebilirsiniz.



<link rel="icon" type="image/x-icon" href="http://www.adobewordpress.com/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.adobewordpress.com/favicon.ico" />

Yukarıda adobewordpress.com olarak adreslendirdiğimiz alanlara kendi web sayfanızı eklemelisiniz.


Yapamadıysanız üzülmeyin


WordPress temalarını düzenlemek bazen karmaşık olabiliyor. Yukarıdaki adımları izleyerek WordPress sitenize Favicon ekleyemediyseniz üzülmeyin. Buradaki eklenti sayesinde de aynı işlemi yapabilirsiniz.


Kapanış


Favicon için seçtiğiniz veya hazırladığınız görsellere özen göstermenizi öneriyoruz. Web sayfanızı 16×16 piksel boyutlarda özetlemeniz pek kolay olmasa gerek…



Favicon nedir? Nasıl oluşturulur? WordPress'e nasıl eklenir?

16 Ağustos 2013 Cuma

İlham almanız için 25 el çizimi web tasarımı

ugur bocegi İlhamın nereden geleceği belli olmaz.


Günümüzde çizgisel tasarımlar fazlasıyla ilgi çekmekte. Sizde el çizimi bir web sayfası oluşturmak istiyor ve nereden başlayacağınızı bilemiyorsanız doğru yerdesiniz.


Adobewordpress olarak 25 adet el çizimi tasarımı derledik. Bu liste size kesinlikle ilham verecektir!


İlham veren el çizimi tasarımlar


Aşağıdaki 25 adet web sayfası bu makalenin yayınlandığında aktif durumdaydı. Fakat listenin içerisinde kapanış bildirisi yapan birkaç web sayfası var. Örneğin Sketch Odopod 8 yıllık yayın hayatını yakın zamanda bitireceğini açıkladı.


Bu yüzden linkler kırılsa da büyük görsellerle en azından tasarımları erişilebilir kılmak istedik.


Kinetic Singapore


Kinetic Singapore
Siteye git


Bearskinrug


bearskinrug
Siteye git


Jesus Rodriguez Velasco


Jesus Rodriguez Velasco
Siteye git


Kutztown University


Kutztown University
Siteye git


Mikimottes


Mikimottes
Siteye git


Dean Oakley Web Design


Dean Oakley
Siteye git


Biola Undergrad


Biola Undergrad
Siteye git


Esteban Munoz


Esteban Munoz
Siteye git


Robbin Waldemar


Robbin Waldemar
Siteye git


Coo Coo Core


Coo Coo Core
Siteye git


Deborahcavenaugh


Deborahcavenaugh
Siteye git


Sketch Odopod


Sketch Odopod
Siteye git


Hugsformonsters


Hugsformonsters
Siteye git


Kevadamson


Kevadamson
Siteye git


Design Portfolio


Design Portfolio
Siteye git


Twodesigners


Twodesigners
Siteye git


Le Carnet Ordinaire


Le Carnet Ordinaire
Siteye git


Ygrin


Ygrin
Siteye git


Eldodo


Eldodo
Siteye git


Paper Beats Internet


Paper Beats Internet
Siteye git


Candc Coffee


Candc Coffee
Siteye git


Clever Craft


Clever Craft
Siteye git


Snailbird


Snailbird
Siteye git


Our Wildlife Garden


Our Wildlife Garden
Siteye git


Maluquinha Festas


Maluquinha Festas
Siteye git



İlham almanız için 25 el çizimi web tasarımı