Psd to Html Css Dersleri

Psd to Css Dersleri

Selamlar bu yazımızda Psd to Css yani photoshop veya benzeri bir yazılımla hazırladığınız web arayüzünü html css formatında kullanıma hazır bir web sayfasına çevirmenizi sağlayacak dersleri bir araya toplamaya çalıştık.

Daha önce yayınladığımız psd to html yazımızıda inceleyebilirsiniz ve bir diğer psd to html yazısını.



 



Aşağıda ingilizce anlatımlı psd to html & css derslerini bulabilirsiniz.

1. Code a Modern Design Studio from PSD to HTML


2. PSD/HTML Conversion: Code a Clean Business Website Design


3. Minimal and Modern Layout: PSD to XHTML/CSS Conversion


4. How to Code a Grunge Web Design from Scratch


5. Design and Code a Slick Website from Scratch


6. Code a Corporate Website from a Photoshop Design: PSD to HTML Tutorial


7. From PSD to HTML: Building a Set of Website Designs Step by Step


8. How to Code a Clean Portfolio Design (Plus Free Five-Page Template)


9. The Design Lab: PSD Conversion


10. Coding Up a Web Design Concept into HTML & CSS


11. How to Code up a Web Design from PSD to HTML


12. From PSD to HTML the easy way – Using Ultimate CSS Framework


13. Code a Vibrant Professional Web Design with HTML5/CSS3


14. Creating a Simple Photo Site — From PSD to HTML/CSS


15. Designing a highly-professional website, from the sketch to the code


16. PSD to HTML/CSS: Design, Slice & Code!


17. Convert Burnstudio from PSD to HTML [Very Detailed]


18. Convert 1stDelicious Portfolio Layout From PSD to HTML [Very Detailed]


19. Converting Dezign Folio From PSD to HTML [Very Detailed]


20. Brilliante Blog Layout – Coding The PSD File Into CSS and HTML


21. Convert Business PSD template to HTML/CSS tutorial


22. How to Code a Clean Minimalist HTML CSS Website Layout

Birde bu var:  50 en iyi psd to xhtml css çeviri dersi

 

Video Dersler - Görüntülü Anlatımlar

Slice and Export a Website Layout + HTML: Photoshop Tutorial!
http://www.youtube.com/watch?v=DVfxe4pqvo8

 

Photoshop Slices & HTML / CSS Coding Tutorial Part 1

http://www.youtube.com/watch?v=VD1Ha9aJNqs

 
PSD to HTML Part 1 - Toplam 6 bölümden oluşuyor
http://www.youtube.com/watch?v=IKeg1nhe-wE

 
Photoshop Tip: PSD to HTML made easy!
http://www.youtube.com/watch?v=5ch2kgc5DD0

Wordpress Blogunuz İçin Seo Ayarları : Kalıcı Bağlantılar

Wordpress Blogunuz İçin Seo Ayarları

Kalıcı Bağlantılar

Selamlar.
Wordpress blogunuzu oluşturduktan sonra yapmanız gereken ilk işlemlerden birisidir kalıcı bağlantıları ayarlamak. Çünkü arama motorları sayfalarınızı isimlerine göre indexler ve bu isimler daha sonradan değişirse tekrar indexlenmesi gerekir.
Kalıcı bağlantılara admin pangelinizde Ayarlar > Kalıcı Bağlantılar sekmesinden ulaşabilirsiniz


Hali hazırda seçebileceğiniz 5 farklı seçenek bulunmakta ancak bunlar seo açısından çok faydalı yapıda değiller.
Aklımızda tutmamız gereken bazı noktalar var bu hususta örneğin wordpress blogunuz için yazdığınız konunun ismi alan adınıza yakın yerleşimde olmalı.
Örneğin http://tasarhane.com/css-menu-yapimi-907.html
Eğer yazı adresi http://tasarhane.com/2012/02/06/css-menu-yapimi şeklinde veya http://tasarhane.com/kategori/css-menu-yapimi-907.html şeklinde olursa önceki yapı bu örnektekilerden daha ciddiye alınır ve sıralamada daha yukarıda çıkar. Tabi sıralama için tek etken bu değildir. Yazdığınız bir çok konu için arama motoru sıralamalarına baktığınızda önünüzde kategori isimli, tarihli, etiketli, saçma sapan uzantılı bir sürü sayfa göreceksiniz.

Yapınızın nasıl olabileceğine dair başka fikirlerde geliştirebilirsiniz.
Wordpress blogunuzun kalıcı bağlantılarını özelleştirmek için kullanabilecekleriniz;

%year%
Yıl bilgisini çıkarır yani özel yapı kısmını
/%postname%/%year%/ şeklinde kullanırsanız yazınız http://tasarhane.com/css-menu-yapimi/2012/
şeklinde çıkar siz kodu nereye nasıl yazarsanız orada çıkar yani. / yerine - kullanabilirsiniz.


%monthnum% ise ay bilgisini getirir.
/%year%/%monthnum%/%postname%/ derseniz
http://tasarhane.com/2012/02/css-menu-yapimi/ olur.

%day% gün bilgisidir
%hour% saat bilgisi
%minute% dakika bilgisi
%second% saniye bilgisini bağlantıya ekler.
%post_id% yazınızın kimlik numarası demektir.

%postname% konu/yazı adı demektir.
%category% kategori
%author% yazar demektir

Mesela çok yazarınız varsa konunun kime ait olduğunu çabuk bulmak adına faydalı olabilir. Hatta yazarlarınızın ismini wordpress, seo, photoshop, css, php gibi tanımlamalar olarak girerseniz kategori değeri yazmadan bağlantıya kategori bilgiside girmiş olursunuz. Denenebilinir yani.

Benim kullandığım yapı /%postname%-%post_id%.html şeklinde. Nedenine gelince yazı adının alan adına yakın olmasının avantajını kullanmak. Konu kimliğini girmekte yazı bağlantısını diğer aynı isimli konu sahiplerininkinden farklı kılıyor olması. En son olarakta .html uzantısını arama motorlarının seviyor olması.
/%category%/%postname%/ mesela bu şekilde kullanım oldukça sık ama ben önermiyorum çünkü örnek yazımda olduğu gibi css menü yapımı diye isim verirken konuya önünde birde css kategorisinde olduğunu belirten bir alana ihtiyaç yok. Bu yazıyı örnek alarak konunuza Seo Ayarları : Kalıcı Bağlantılar diye isim verirseniz wordpress kategorisinde olduğunu belirtmek faydalı olur.
Tabi her şey her geçen gün hızla değişiyor bildiklerimiz değişebilir son gelişmelere göre araştırıp hazırlıklar ona göre yapılmalı.




Kategori temelini değiştirmezseniz category olarak ingilizce görünür yani http://tasarhane.com/category/html-css
Eklenti temelini değiştirmezsenizde tag olarak http://tasarhane.com/tag/css
Ben zamanında değiştirmediğim için şimdi ellemiyorum ama değiştirmek yararlı olacaktır.

Unutmadan bağlantı ayarlarınızda kategori değeri belirledi iseniz ve konunuza birden fazla kategori tanımladıysanız kategori id'si en düşük olan yazı bağlantısında görünür.

Haydi kolay gelsin. Allah'a emanet olun.

Tasarhane.com için Analiz Seo Rapor - 2012 02 04

Sitenin son durum raporlarını konu olarak eklemeye karar verdim. Bilgisayarda bi yerlere atıyorum çok ilgili olmadığım içinde arayınca bulamıyorum. Bu şekilde hem tarih bilgisi olur hemde daha düzenli bir yapıya sahip olur inşallah :)

WM Aracı Güncel Durumu için http://wmaraci.com/?url=http://tasarhane.com

2012 02 04 tarihli durum


Sitebilgi Güncel Durum http://www.sitebilgi.net/?url=http://tasarhane.com

2012 02 04 tarihli durum


Tarih itibariyle Google Pagespeed raporu sonucu: 86/100


RankDeğeri sonucu http://www.rankdegeri.com/tasarhane.com
RankDeğerine göre 2 olan prımız 0 çıktı ne yapalım canı sağolsun..
Ayrıca 2300 dolar fiyat biçmiş siteye var mı arttıran :p


Arttıran varmış http://www.urlappraisal.net/appraisal/tasarhane.com.html
11bin78 dolar değer biçti siteye.


Bu kadar yeter heralde şimdilik bi daha ki sefere biraz daha detaylı yazarım. Belkide yazmam.

Yalnız bunca raporun ardından binge sorunca senin 2020 sayfan var bende diyor oda kayıtlara geçsin.

Wordpress Blogunda Yılın En Çok Yorum Alan Konularını Listelemek

Wordpress blogunuzda

yılın veyahut kendi belirlediğiniz tarih aralıklarının en çok yorum alan konularını listeleyebilirsiniz.
Bunun için aşağıda kodu wordpress blogumuzda tema içerisinde uygun yerde kullanıyoruz.

Tarih aralıklarını buradan değiştiriyoruz = BETWEEN '2011-01-01' AND '2011-12-31' ORDER

comment_count DESC LIMIT 0 , 5"); kısmında ki 5 görüntülenen konu sayısını veriyor istediğiniz gibi ayarlayabilirsiniz.

Aşağıdaki şekilde kullanırsanız 2012 yılında en çok yorum yapılan 5 konuyu görüntülemiş olursunuz.
İyi bloglamalar.



[php]<h2 class="title">2012 Yılının En Çok Yorum Alan Konuları</h2>
<ul>
< ?php
$result = $wpdb->get_results("SELECT comment_count,ID,post_title, post_date FROM $wpdb->posts WHERE post_date BETWEEN '2012-01-01' AND '2012-12-31' ORDER BY comment_count DESC LIMIT 0 , 5");

foreach ($result as $topten) {
$postid = $topten->ID;
$title = $topten->post_title;
$commentcount = $topten->comment_count;
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>">< ?php echo $title ?></a></li>
< ?php }
} ?>
</ul>[/php]

Kaynak: http://www.wprecipes.com/how-to-display-the-most-commented-posts-of-2008

Site arayüzünü güçlendirecek jquery eklentileri

Nivo manşetten Mosaic'e kadar 10 farklı jquery eklentisi.

Küçük ekranlar için düşey menü, Elastislide manşet uygulaması toplamda 25 farklı jquery eklentisi.

Elasslide manşet uygulamasının örnek kullanımı bu sayfada.

21 farklı jquery eklentisi

Burda da çok kullanışlı 17 jquery eklentisi bulunuyor.

Css Menü Yapımı

Hazır siteye css menü eklemişken konusunuda paylaşayım dedim. İnternette pek çok css menu hazırlama sitesi var ve olayı baya kolaylaştırıyorlar. Ben sitemdekini css menu makerdan indirip özelleştirdim. Ayrıca başka css menü hazırlama siteleride var. Avantajı tabiki sadece css olması javascript ihtiyacı duymaması.

Css Menu Maker

ile hazır temalardan uygun olanı seçip customize kısmında özelleştirme yaptıktan sonra epostanıza zip dosyasını indirebileceğiniz linki atıyorlar.
http://cssmenumaker.com

http://www.cssmenubuilder.com/home
http://css3menu.com/
http://www.mycssmenu.com/
http://www.menuyapma.webmasterci.com/ buda webmasterci.com'un css menu yapma sayfası.

Birde böyle bir site var kolayca ve görsel olarak menunüzü hazırlayıp kodlarını zip dosyası olarak indirebiliyorsunuz.
http://purecssmenu.com
Üyelik gerektiriyor ama işlem kolay ve hızlı

Nasıl yapılır videosu
http://www.youtube.com/watch?v=Z2WR59gF7qo

Radyo Viva Dinle : Online Canlı Radyo Dinle

Radyo Viva Dinle

Online Canlı Radyo Dinle

Radyo Viva Dinle : Online Canlı Radyo Dinle