ilgisel » web 2.0 http://ilgisel.com/blog Bir başka WordPress blogu. Sat, 26 Jun 2010 21:52:32 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Thickbox Nedir? Nasıl Kullanılır? http://ilgisel.com/blog/yazi/thickbox-nedir-nasil-kullanilir/ http://ilgisel.com/blog/yazi/thickbox-nedir-nasil-kullanilir/#comments Tue, 20 Oct 2009 19:02:39 +0000 Dincer http://ilgisel.com/blog/?p=1954 Thickbox, Lightbox akımıyla birlikte çıkan Lightbox türevlerinden Javascript-Ajax nimetlerinden biridir. Tabiki farkları olduğu için Lightbox kullanmak istemeyenler için bir seçenek olarak görebiliriz. Bu script’i kullanarak Resimlerinizi veya içeriklerinizi Klasik Pop-up pencere içinde açmak yerine varsayılan sayfa içinde açıp kullanabilirsiniz. Tek Resim veya Resim Galerinizi göstermek bulunduğunuz sayfanın herhangi bir yerinde yazdığınız yazıyı yazının bulunduğu ‘id‘ i kullanarak açtırabilir, iframe veya Ajax türünde içeriği, bu script sayesinde açabilirsiniz.

Bu bizim Resim dışında ne işimize yarayacak diyenler için şöyle bir örnek verebilirim. Üyelik sistemi için Üye Ol yada Giriş Yap gibi bir link ekleyip linke tıklandığında Thickbox’la Üyelik Formu veya Kullanıcı Girişi ekranına giden bir tasarım yapabilirsiniz. Neye benzediğini görmek için konunun en altındaki Resimlere bakabilirsiniz.
Bunu herhangi bir siteye nasıl kuracağımızı öğrenmek için aşağıdaki Kurulum’u okuyunuz.

Kurulum

Kuruluma geçmeden önce aşağıdaki dosyaları ThickBox sitesinden yada aşağıdaki linklere basarak indirin.
Kurulum için gereken dosyalar;

Yukarıdaki dosyalardan Jquery kütüphanesinden herhangi birini indirdiğimizde ismini jquery.js olarak ayarlamayı unutmayın. Şimdi sırasıyla bunları sitenize eklemeniz gerekiyor. Eğer bu script’i bir Wordpress Teması içinde kullanacaksanız aşağıda yazan dosyalarinbulunacagiklasor yerine <?php bloginfo(’template_directory’); ?> yazın (Bu kodla sitenizinadı.com/wp-content/themes/kullandığınıztema içine girmenizi sağlayacaktır.) ve yukarıdaki dosyaları doğrudan temanızın içine yerleştirin.
Aşağıda gördüğünüz kodlarıysa sitenizde yada temanızda bulunan <head> </head> kısmının arasında bir yere gerekli değişiklikleri yaparak kopyalayın. Wordpress’te temadaki Header.php içinde ilgili yere kopyalayın.


<script type="text/javascript" src="dosyalarinbulunacagiklasor/jquery.js"></script>
<script type="text/javascript" src="dosyalarinbulunacagiklasor/thickbox.js"></script>
<link rel="stylesheet" href="dosyalarinbulunacagiklasor/thickbox.css" type="text/css" media="screen" />

Burada unutmamanız gereken en önemli olay macFFgHack.png dosyasını css dosyasının bulunduğu yere kopyalarken LoadingAnimation.gif denilen dosyayıysa diğer dosyaları attığınız yere bir images klasörü oluşturarak dosyayı içine atın.

Nasıl kullanılır?

En basit halde linklerinizin içine class=“thickbox” ekleyerek bu script’i kullanabilirsiniz. Aşağıda benzer bir kullanımını örnek olmak açısından verdim. Daha fazla bilgi için Thickbox’ın sitesinde bulunan Examples bölümüne gözatmanızı tavsiye ederim. (İçerik Ingilizcedir)

Tekli Resim için


<a href="images/single.jpg" title="baslik" class="thickbox"><img src="images/single_t.jpg" alt="Tekli Resim"/></a>

Gördüğünüz gibi Thickbox’ın benzer kullanımları da bu şekilde yapılmakta. Bu script’le ilgili daha fazla bilgiyi aşağıdaki linkten alabilirsiniz. Şimdilik hoşçakalın.

http://jquery.com/demo/thickbox/

]]> http://ilgisel.com/blog/yazi/thickbox-nedir-nasil-kullanilir/feed/ 0 Web Sayfanızda İstediğiniz yazı fontunu kullanın! http://ilgisel.com/blog/yazi/web-sayfanizda-istediginiz-yazi-fontunu-kullanin/ http://ilgisel.com/blog/yazi/web-sayfanizda-istediginiz-yazi-fontunu-kullanin/#comments Tue, 20 Oct 2009 17:47:20 +0000 Metin http://ilgisel.com/blog/?p=1953

Çoğu webmaster’ın derdidir font sorunları. Kimi zaman başlıklarda kimi zaman ise güzel bi reklam yazısı yapmaya çalışırız. Bu script kesinlikle yazı şeklinde reklamlarda kullanılacak bi script. Flir sitesi işte bu derdimize çare oluyor. Hemen sevinmeyin seçilebilir yazı değil :) Resim olarak gösteriyor yazıyı. Ama yine bence muhteşem bi script.

Gereksinimler: GD Library; PHP 4 ve üzeri
Download: http://facelift.mawhorter.net/download/

Demosunu http://facelift.mawhorter.net/examples/ adresindeki sağda bulunan Update It butonuna basarak görebilirsiniz.

]]> http://ilgisel.com/blog/yazi/web-sayfanizda-istediginiz-yazi-fontunu-kullanin/feed/ 0 Web Tasarımcıları için 50 Kalın yazı fontu http://ilgisel.com/blog/yazi/web-tasarimcilari-icin-50-kalin-yazi-fontu/ http://ilgisel.com/blog/yazi/web-tasarimcilari-icin-50-kalin-yazi-fontu/#comments Tue, 29 Sep 2009 12:04:25 +0000 Dincer http://ilgisel.com/blog/?p=1823 headlines

Web 2.0 akımıyla birlikte sadece şeker tadında tasarımlar popülerleşmedi, bunun yanında Kalın yazı fontuna sahip Logolar ve içerik başlıkları da popülerleşti. İşte bu yazıyla da Kalın yazı fontları bulabileceğiniz bir kaynağı sizlere sunuyorum.
Konuyu biraz daha derinlemesine anlatmak istersek;

‘50+ Fonts for Big, Bold Headlines‘ başlığıyla gelen sitede bize sunulan yazı Fontlarının hepsinin Resim halleri bulunmakta. Yani o yazı fontunun neye benzediğini doğrudan görüyoruz. Web Tasarımcıları ve Photoshopta uğraşanların işine yarayacağını sandığım bu kaynağa ulaşmak için aşağıdaki linke tıklamanız yeterli.
http://designm.ag/resources/headline-fonts/

]]> http://ilgisel.com/blog/yazi/web-tasarimcilari-icin-50-kalin-yazi-fontu/feed/ 0 Wordpress’e Giriş http://ilgisel.com/blog/yazi/wordpresse-giris/ http://ilgisel.com/blog/yazi/wordpresse-giris/#comments Sun, 15 Feb 2009 13:31:26 +0000 dincer2 http://www.mondaynay.com/?p=1475 wordpress_logo-copy

 

 Wordpress, Web Yayıncılığı yapmanın en kolay yollarından biridir. Bu kadar yaygın kullanılmasının nedeni Açık Kaynak Kodlu, esnek yapısı ve devamlı geliştirilmesidir. Wordpress kullanıcıları her geçen gün Yeni eklentiler üreterek sistemi daha etkili kullanmamızı sağlamaktadırlar. Geniş tema ve eklenti desteği sayesinde bize birden fazla çözüm yolu ve değişik görünümler sunmaktadır. Kolay kurulumu, genişletilebilmesi ve kullanımı sayesinde ilgili dökümanlara biraz göz atarak veya önsezilerimize güvenerek kavrayabilinecek bir sistemdir.

 Wordpress bir Weblog sistemidir. Internet üzerindeki günlüğümüz olarak açıklanan Weblog zamanla “We” kısmını atarak “Blog” olarak değişim geçirmiştir. Eğer sizinde sunmak istediğiniz birşey varsa (Bu yazı, video, ses yada benzeri şeyler olabilir) Wordpress ile bunları Internet üzerinde yayınlayabilirsiniz. Yeterli seviyede Php bilginiz olması dahilinde Wordpress’in çalışma prensibini kavrayarak, işleri kolaylaştıracak Eklentiler (Plugin) yapabilirsiniz ya da benzer şekilde XML veya HTML bilgisiyle daha önceden oluşturulmuş bir tema yerine, kendi temanızı kendiniz tasarlayabilirsiniz.

 Wordpress hakkında eklediğim her dersi bu konu altında linklendireceğim. Şimdilik bu kadar giriş yeter. Bir sonraki konuda buluşmak üzere…

]]> http://ilgisel.com/blog/yazi/wordpresse-giris/feed/ 0 Web 2.0 Logo ve Ajax Loading Gif Oluşturma http://ilgisel.com/blog/yazi/web-20-logo-ve-ajax-loading-gif-olusturma/ http://ilgisel.com/blog/yazi/web-20-logo-ve-ajax-loading-gif-olusturma/#comments Wed, 26 Nov 2008 11:15:04 +0000 Dincer http://www.mondaynay.com/?p=722
 Selamlar, bu kez sizlere Web Tasarımı yaparken kullanabileceğiniz 2 siteyi tanıtacağım. Sitelerden biri kolayca Web 2.0 Logo yapmamızı sağlarken, diğeri de Ajax’ta kullandığımız Loading görsellerinden oluşturmamızı sağlıyor.

 Ilk sitemiz Web 2.0 logo yapımı kısaca anlatmak gerekirse yazdığımız yazıyı doğrudan Web 2.0 görünümünde bir logoya dönüştüren bir script. Yansıma ve Beta yazısının eklenip eklenmeyeceğini istediğiniz gibi ayarlayabiliyorsunuz. http://h-master.net/web2.0/

 Ikincisiyse Ajax Loading görseli yapmamızı kolaylaştıran bir site. Görselin tipini, rengini arkaplan rengini ve saydam olup olmadığını seçerek istediğimiz türde bir Loading Görseli yaratabiliyoruz. http://www.ajaxload.info

 

 Umarım bu siteler işinize yarar. Sağlıcakla Kalın.

]]> http://ilgisel.com/blog/yazi/web-20-logo-ve-ajax-loading-gif-olusturma/feed/ 0