Kategori: Tasarım

Yayım tarihi

PHP CodeIgniter İle İmage Cache Yapımı

Hemen hemen herkesin ihtiyacıdır diye düşünüyorum. İmage Cache. Genellikle bir tane PROXY URL oluşturup dosyaya ait cache hali varsa onu çekeriz yoksa cache’leyip cache halini çekeriz. Fakat bu durum sistemde dosyalarınızın gelmesini yavaşlatabilir.

Hali hazırsa orjinal dosyalarınızın bulunduğu bir klasör altında image dosyalarınız var ise aşağıdaki paylaşmış olduğum örnekteki gibi bir yöntem ile dosyaların boyutlandırılmasını orantılı bir şekilde yapabilirsiniz.

Bir önceki yazımda “get_dir_contents” fonksiyonunu paylaşmıştım. Bir dizin altındaki tüm dosyaları getirmek için kullanıyoruz.

$list = get_dir_contents( '/var/www/html/cron/orj_images' );

// hangi boyutlarda oluşturacağımızı belirtiyoruz.
$arr[] = array( 32, 32 );
$arr[] = array( 50, 50 );
$arr[] = array( 64, 64 );
$arr[] = array( 70, 70 );
$arr[] = array( 80, 80 );
$arr[] = array( 90, 90 );
$arr[] = array( 100, 100 );
$arr[] = array( 120, 120 );
$arr[] = array( 150, 150 );
$arr[] = array( 160, 200 );
$arr[] = array( 200, 200 );
$arr[] = array( 300, 300 );
$arr[] = array( 200, 256 );
$arr[] = array( 256, 256 );
$arr[] = array( 500, 500 );
$arr[] = array( 512, 512 );
$arr[] = array( 640, 640 );
$arr[] = array( 1024, 1024 );
$i = 0;
// listemizde döngüye girip image_lib kütüphanesi ile işlemleri başlatıyoruz.
foreach( $list as $key => $value )
{
if( !file_exists( $value ) )
continue;
if( is_dir( $value ) )
continue;

$this->load->library( 'image_lib' );
// her bir dosya için boyutlandırma dizisine göre ayrı ayrı işlem yaptırıyoruz.
foreach ( $arr as $k => $v )
{
$ext = pathinfo( $value );

$new_file = $ext[ 'dirname' ].'/'.$ext[ 'filename' ].'-'.$v[ 0 ].'x'.$v[ 1 ].'.'.$ext[ 'extension' ];
$old_file = str_replace( '/var/www/html/cron/orj_images', '/var/www/html/cron/chache_images', $new_file );

if( file_exists( $old_file ) )
continue;
// kaynak dosyamnız $value değişkenindedir.
$config = array(
'image_library' => 'gd2',
'source_image' => $value,
'new_image' => $old_file,
'maintain_ratio' => TRUE,
'create_thumb' => TRUE,
'thumb_marker' => '',
'width' => $v[ 0 ],
'height' => $v[ 1 ]
);

$this->image_lib->initialize( $config );
$this->image_lib->resize();
$this->image_lib->clear();
echo $old_file."\n";
}
}

Yeni dosya ekleme işlemlerinde upload sırasında bu boyutlar otomatik olarak cachleniyor. Sistemde orjinal dosya direkt olarak kullanılmıyor.

Bu kod parçasını CRON üzerinden bağladığımız için dosyaları mümkün olduğunda güncel kalmasını sağlıyoruz.

Not : “Yapı Codeigniter framework’ü üzerinden örneklendirilmiştir. Sisteminize uygulamadan önce test etmenizi tavsiye ederim.”

 

Yayım tarihi

JQuery İle Sanal Klavye

Ödeme sistemlerinde genellikle kullanılan sanal klavyeleri görmüşsünüzdür. Merakımızın sonucu olarak aşağıdaki gibir bir yapı oluştu. Merak edenler için ödeme sistemlerinde kullanılan sanal klavyenin yapım aşamaları aşağıdadır. Sanal klavyenin çözümünü, tasarımını ve sanal klavye üzerinde tuş basım yani keypress olayının tetiklenmesi aşağıdaki gibidir. Bu arada farklı yöntemlerde mevcuttur.

Şimdi olayın yapım aşamasında aşağıdaki gibi bir yapı kullandık.

Okumaya devam et “JQuery İle Sanal Klavye”

Yayım tarihi

Css keyframes ile animasyon yapımı

Merhaba arkadaşlar, internet sitelerinde gezerken sağdan soldan akan yazıları veya görsellerin animasyon efeklerini merak etmişsinizdir. Bugün sizlere css keyframeslerden bahsetmek istiyorum.   Class (.) ya da İd (#) lerde kullanılır. Css ‘animation’    içerisinde kullanım gerçekleştirilmektedir. Keyframesizin işlem sıralamasıda önemlidir. %0 %25 %50 % 75 %100 şeklinde hareket pozisyonları belirleyebilir bu % leri çoğaltabilir ya da arttıradabilirsiniz.

.logo img
{
    max-width: 200px;
    max-height: 100px;
    animation: buyume 1s ease-in-out;
}

Yazmış olduğumuz keyframesimizi bu şekilde kullanabiliriz. Size küçük bir bilgi vermek istiyorum yapmak istediğiniz işlemi sonsuz bir döngüye sokmak isterseniz keyframesimizin hareket pozisyonlarından sonra sonuna ‘infinite’ vererek sonsuz animasyon yapabilmenizi sağlar. 

Örnk

.logo img
{
    max-width: 200px;
    max-height: 100px;
    animation: buyume 1s ease-in-out infinite;
}

Hadi başlayalım

1-) Keyframes’e bir isim vererek animasyonumuzun hareket pozisyonlarınızı verebilirsiniz.


@keyframes buyume 
{
    0%
    {
        max-width: 200px; 
        opacity: 0;
    }
   50% 
    {
        max-width: 80px;  
        opacity: 1;
    }
    100% 
    {
        max-width: 200px;  
        opacity: 0;
    }
}
Yayım tarihi

JQuery ile Nesnenin Show / Hide Event Yakalama

Javascript tarafında oldukça fazla event ( olay ) var. JQuery ile birleştiğinde daha da fazla eventlara hatta özelleştirilmişlere dahi sahip olabiliyorsunuz. Bir projede form hazırlarken div nesnesinin show / hide durumuna göre başka bir nesnenin işlenmesi gerekiyordu. Ufak bir araştırma sonucu herhangi bir nesnenin – sadece div değil – show / hide durumlarına göre event atayabileceğimi buldum.

Aşağıdaki kod ile bu event ın tanımlamasını yapıyoruz

( function( $ )
{
  $.each(['show', 'hide'], function (i, ev)
  {
var el = $.fn[ ev ];
$.fn[ ev ] = function()
{
  this.trigger( ev );
  return el.apply( this, arguments );
};
  });
})(jQuery);

Örnek kullanım;

$( 'div' ).on( 'show', function()
{
$( 'span' ).html( 'div gösterim durumu açık' );
});
$( 'div' ).on( 'hide', function()
{
$( 'span' ).html( 'div gösterim durumu kapalı' );
});

Siz div veya kendi class / id her neyse artık $( ‘div’ ).show(); veya $( ‘div’ ).hide(); yaptığınızda span nesnesi içerisinde durumunu açıklayan yazıyı yazacak. Bu ihtiyaç bizim için sekmeli form işlemi yaparken verilen cevaplara göre bir sonraki sorunun ( her bir soru bir div içerisinde yapı olarak yer alıyor )  hangisi olacağını belirliyordu. Basit bir işlem için bu şekilde bir kullanıma gerek kalmayabilir fakat hareket güzel. 🙂

Denemedim fakat event ataması yapılırken each ile birlikte show / hide belirteci yapılırken farklı eventlar üzerinden event türetimi yapılabilir sanırım.