Web, işletme ve inovasyon hakkında bir takım yazılar İletişim için Form

Defocuyu takip etmek isteyenlere, RSS - FeedBurnerSanal Alemde Ben, Friendfeed - Flickr - Twitter - Vimeo


Joomla 1.5.x Tema Yapımı-2

Herkese merhaba. İşlerimin yoğunluğu ve yükseklisans sınavlarının başlaması nedeniyle, şu sıralar pek bir şey yazamıyorum. Neyse ki bugün bir fırsatını bulup, geçen haftalarda yayınlayacağımı duyurduğum "Joomla 1.5.x Tema Yapımı-1" adlı dersin devamını yazabildim.

Geçen derste bir Joomla tema klasörünün içinde bulunması gereken dosyalardan ve bu dosyaların ne işe yaradıklarından bahsetmiştik. Bugünse kolları sıvayıp bir Joomla teması yapacağız.

Temamızı yaparken ilk önce ona bir iskelet oluşturmalıyız. Ben bunun için aşağıdaki "template.css" dosyasını yazdım.

CSS:
  1. body{
  2. font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  3. font-size: 14px;
  4. background: #EDE9DD;
  5. }
  6.  
  7. div#main_body{
  8. margin: 0 auto;
  9. width: 900px;
  10. height:auto;
  11. padding-top: 40px;
  12. }
  13.  
  14. div#top{
  15. width: 900px;
  16. height: auto;
  17. float:left;
  18. text-align:left;
  19. }
  20.  
  21. div#top_left{
  22. width:230px;
  23. height:auto;
  24. float:left;
  25. text-align:left;
  26. }
  27.  
  28. div#top_right{
  29. width: 670px;
  30. height: 72px;
  31. float:left;
  32. text-align:right;
  33. }
  34.  
  35. div#middle{
  36. width:900px;
  37. height:auto;
  38. float:left;
  39. text-align:left;
  40. padding-top: 40px;
  41. }
  42.  
  43. div#middle_left{
  44. width:650px;
  45. height:auto;
  46. float:left;
  47. text-align:left;
  48. padding-right: 20px;
  49. }
  50.  
  51. div#middle_right{
  52. width: 230px;
  53. height: auto;
  54. float:left;
  55. text-align:left;
  56. }
  57.  
  58. div#footer{
  59. width: 900px;
  60. height:auto;
  61. text-align:center;
  62. }

Daha sonra bu kodlar ışığında "index.php" sayfamın tasarımını yaptım. Ve ortaya aşağıdaki gibi iki sütundan oluşan bir yapı çıktı.

Geriye tasarımımıza gerekli Joomla kodlarını yerleştirmek kaldı. Bunu da aşağıdaki gibi yapıyoruz.

HTML:
  1. <div id="main_body">
  2.  
  3. <div id="top"><!-- Şablona Herhangi Bir Resim Eklerken Kullanılacak Kod -->
  4.  
  5. <div id="top_left"><img src="templates/<?php echo $this->template ?>/images/defocu.png" border="0" alt="" width="230" height="72" /></div>
  6.  
  7. <div id="top_right"><!-- Arama Modülünü Sayfaya Ekleyen Kod -->
  8. <jdoc:include type="module" name="search" />
  9. <!-- Arama Modülünü Sayfaya Ekleyen Kod Sonu--></div>
  10.  
  11. </div>
  12.  
  13. <div id="middle">
  14.  
  15. <div id="middle_left"><!-- Sitemizdeki Konuların Görüntülenmesini Sağlayan Kod -->
  16. <?php if($this->params->get("menuName", "mainmenu")) : ?>
  17.     <jdoc:include type="component" />
  18. <?php endif; ?>
  19. <!-- Sitemizdeki Konuların Görüntülenmesini Sağlayan Kod Sonu --></div>
  20.  
  21. <div id="middle_right"><!-- Modüllerin Görüntülenmesini İstediğimiz Pozisyonu Oluşturan Kod -->
  22. <?php if($this->countModules('right')) : ?>
  23.     <jdoc:include type="modules" name="right" style="" />
  24. <?php endif; ?>
  25. <!-- Modüllerin Görüntülenmesini İstediğimiz Pozisyonu Oluşturan Kod Sonu --></div>
  26.  
  27. </div>
  28.  
  29. <div id="footer"><!-- Modüllerin Görüntülenmesini İstediğimiz Pozisyonu Oluşturan Kod -->
  30. <?php if($this->countModules('footer')) : ?>
  31.     <jdoc:include type="modules" name="footer" style="" />
  32. <?php endif; ?>
  33. <!-- Modüllerin Görüntülenmesini İstediğimiz Pozisyonu Oluşturan Kod Sonu --></div>
  34. </div>

Yukarıda yaptığımız temanın dökümanı burada, buyrun indirin. Umarım faydalı olmuştur.


Kasım 5th, 2008 Etiketler: , , ,
| Kategori: İçerik Yönetim Sistemleri | 5 Yorum » Yazar: abdullah

Spry İle Daralan Paneller Yapmak

Dün Dreamweaver İle Spry Dersleri Başlıyor! başlığıyla duyurduğum, blogumda bundan böyle yayınlanacak Spry derslerinin ikincisini bugün yayınlıyorum. Ders ikinci olmasına rağmen, bir ilke imza atıyor.

Daha önce eşe dosta çektiğim 60-70 kadar eğitim videosunun varlığından sizlere bahsetmiştim. Yaklaşık bir senedir, herhangi bir şey çekmemiş biri olarak. Bugün oturdum ve blogumun ilk videosunu çektim. Video konununda başlığı olan Spry ile Daralan Panellerin nasıl yapılacağını anlatıyor. Daha önce Fatih Turan'ın blogunda Volkan Görgülü'nün JQuery ile yaptığı bir Daralan Panel örneği vardı. Bu videomuzda aynı sistemi Spry ile yapıyoruz. ( NOT: Uzun zamandır çektiğim ilk video olması nedeniyle, hatalarım çok. Umarım kusuruma bakmazsınız...)

AÇIKLAMALAR:

Orjinal videoyu bilgisayarınıza indirin. (20.15 MB)
Yapılan örneğin dökümanını bilgisayarınıza indirin. (25,5 KB)


Kasım 1st, 2008 Etiketler: , , , , ,
| Kategori: Programlama, Videolar | 1 Yorum » Yazar: abdullah

Dreamweaver İle Spry Dersleri Başlıyor!

Adobe firması Ajax kullanımını arttırmak için Spry adıyla bir framework yayınlamıştı. Bende yıllardır, severek Dreamweaver kullanan biri olarak, bu konu üzerine bir hayli eğilmiştim. Dreamweaver kendi bünyesinde Spry ile basit ama çık, Ajax tasarımları yapmayı sağlıyor. Ama siz üzerine biraz düşerseniz, oldukça profesyonel işler çıkıyor ortaya.

Tüm bunlara rağmen nedendir bilemiyorum. Bu gibi artıları Spry'ın kullanımını ülkemizde pek ilerletmedi. İlk başladığımda herhangi bir türkçe kaynak bulamamıştım. O zamanlar ingilizce kaynaklar üzerinden çoğu şeyi öğrenmiştim. Tabi orda da birinci kaynağım, Adobe'ın Spry'a ait dökümanları olmuştu. Dün akşam bu konu tekrar aklıma geldi, bir arama yaptım. Gene ortalarda dişe dokunur bir türkçe kaynak yok.

Bu sabah itibariyle bende bir karar verdim. Daha önce "Spry ile Doldurulması Zorunlu Formlar Yapmak" adlı bir ders yayınlamıştım. Bu dersin devamını getirmek benim Dreamweaver'a borcum oldu. Önümüzdeki günlerde Spry ile ilgili türkçe kaynak sonunu temel olacak ölçüde çözmeyi hedefliyorum. Umarım Ajax ve Dreamweaver severlerin ilgisini çeker.


Ekim 31st, 2008 Etiketler: , , , ,
| Kategori: Programlama | 1 Yorum » Yazar: abdullah

Veritabanından Çekilen Verileri Grafiğe Dökmek

Programcılar için veritabanındaki ilgili verileri çekmek ve bunları anlaşılır şekilde kullanıcılara sunmak yeterli olsada, kullanıcılar bir programdan biraz da görsellik beklerler.

Bugün veritabanından çektiğimiz ilgili verileri, grafik haline nasıl getireceğimizden bahsedeceğiz. Bu işi yaparken bize php, mysql ve css yardımcı olacak. Evet, başlayalım;

Kodlamaya başlarken "grafik" adında bir veritabanı, bu veritabanının içine "faizler" adlı bir tablo ve bu tabloya da "faiz" adlı bir kolon açtığınızı farzediyorum. Şimdi ilk önce sayfamıza ekleyeceğimiz, css kodlarını hazırlayalım:

CSS:
  1. <style>
  2. .grafik {
  3. /* Hazırladığımız katmanı boyutlandırıyoruz*/
  4. width: 200px;
  5. padding: 2px;
  6. }
  7.  
  8. .grafik .bar {
  9. /* Bar'a renk verip, içinde görüntülenecek değerleri biçimlendiriyoruz*/
  10. display: block;
  11. background: #00CCFF;
  12. text-align: center;
  13. color: #333;
  14. height: 2em;
  15. line-height: 2em;
  16. }
  17. </style>

İkinci olarak veritabanımıza bağlanalım:

PHP:
  1. <?php
  2. mysql_connect (”localhost”,”root”,”") || die (”mysql hata”);
  3. mysql_select_db (”grafik”) || die (”db hata”);
  4. mysql_query(”SET NAMES utf8″);
  5. mysql_query(”SET CHARACTER SET utf8_turkish_ci”);
  6. ?>

Sonrasında ilgili verileri veritabanımızda bulunan verilerimizi çekilim ve her gelen veriyi grafiklere dökelim. Bu işlem kolonda bulunan son veriye kadar devam ediyor:

PHP:
  1. <?php
  2. $query="select * from faizler";
  3.    if ($result=mysql_query($query)){
  4.        if (mysql_num_rows($result)> 0) {                   
  5.             while($kayit=mysql_fetch_array($result)){
  6. ?>

CSS:
  1. <div class="grafik">
  2.     <strong class="bar" style="width: <?php echo $kayit['faiz']; ?>%;"><?php echo $kayit['faiz']; ?>%</strong>
  3. </div>

PHP:
  1. <?php
  2.             }
  3.        }
  4.    }
  5. ?>

Yukarıda anlattığım kodları içinde barındıran sayfada burada, indirebilirsiniz.


Ekim 30th, 2008 Etiketler: , ,
| Kategori: Programlama | 1 Yorum » Yazar: abdullah

Neden Blog Yazar Ki İnsan?

Bu yazıyı yazmadan, yazının başlığı hakkında bir süre düşündüm. Aslında başlık "Neden Blog Yazmalı?" veya "Neden Blog Yazıyorum?" falan olabilirdi. Ama sonunda yukarıdaki başlıkla olaya son noktayı koydum.

Yazımız hala kendine bir blog açıp açmamak konusunda, kararsız olan arkadaşlar için. Ben de blog yazmaya başlamadan önce "Acaba yazsam mı?" diye bir hayli düşünmüştüm. Bakın şimdiden 1 ayı devirdik. O günlerden bu günlere (altı üstü bir ay oldu ama), blog yazmanın bana kattıklarından bahsedeceğim.

1- Öncelikle yazma işine başlamadan bir süre önce, "Oku, oku nereye kadar?" diye söylenmeye başlamıştım. Eğer bu cümleyi sık kullanmaya başladıysanız, yakında sizi de aramızda göreceğiz demektir.

2- İnsan blog yazmaya başlayınca, farklı olmak istiyor. Bilinmeyi bilmek, ilk önce o anlatmak istiyor. Altı üstü bir ay olmasına rağmen, ben de duyduğum ama uygulamaya üşendiğim Sırf konusunu öğrendim mesela. Sırf bir gün blogumda yazarım diye.

3- İnsanlarla daha fazla iletişime geçme fırsatınız oluyor. Blogunuzu ziyaret edenler sizden, belki adını bile duymadığınız konularda yardım istiyorlar. Araştırıyorsunuz, öğreniyorsunuz, yazıyorsunuz.

4- CV'nize yazacak bir şeyiniz daha oluyor.

5- İnsan bilgisinin de zekatını vermeli di mi?

Evet, sizi de aramızda görmek isteriz. Düşünmeyin yazın.


Ekim 30th, 2008 Etiketler: , ,
| Kategori: Defocu | Yorum Yap » Yazar: abdullah