Zeit Wen

Xhtml Kitchen

turbomilk

thickmoustache

The Many Faces Of

Social Fries

Snakes In Space

Rubbik

Road Not Found

Qype

Plate 404

Oroza

Mark D. Jisktra

Limpfish

Giraffe

Dream Kumo

Deliciously Creative

Daily Mile

CSS Tricks

Wooga

Cheth Studios

Centerd

Catalyst Studios

Brandstack

Blizzard Entertainment

Axelbelujon

Apadelourp

Agens

Abduzeedo

24×7

IBM Maqetta

IBM Dojo Akımına’na katkıda bulunmak adına yeni, açık kaynak uygulaması Maqetta duyurdu. Maqetta, kullanıcının, yazma sürükle/bırak ve montaj tekniklerini kullanarak WYSIWYG arayüzü sayesinde de HTML5 uygulamalar geliştirmenize yardımcı olan bir platform. Hem masaüstü hem de mobil kullanıcı arabirimleri destekler yapısı sayesinde kullanıcılar için aslında yapılmış en güzel kaynaklardan birisi olan Maqetta ısrarla tavsiye edebileceğim bir arayüz geliştirme platformu.

Maqetta HTML5 uygulama geliştirme odaklı ve takımlar halinde çalışan kullanıcıları ve deneyimlerini hızlıca uygulama eğilimindeki tasarımcıları hedef alan bir yapıya sahip. En önemli özelliği online olması sayesinde heryerden erişilebilir ve platform bağımız bir geliştirme ortamı.

Maqetta uygulaması her hangi bir tarayıcı ile çalışır.
Özellikleri ise şu şekilde sıralanabilir:

• Kullanıcı arayüzü geliştirme editörü.
• Sürükle/bırak mantığı ile çalışan nesne yapısı.
• “Tam-Boyut” aygıt silueti oluşturma özelliği (örneğin, bir iPhone silueti oluşturabilirsiniz.)
• Mobil kullanıcı arayüzü geliştirme ortamı.
• Tasarım ve kaynak görünümleri ile eş zamanlı düzenleme ve web tabanlı uygulama geliştirme özellikleri.
• Ekip çalışması için uygun yapı,
• Ekip üyeleri tarafından incelenmek ve düzenlemeler yapmak için canlı UI mockup gönderme.
• Düzenlemelere yorum ekleme özelliği.

Maqetta görsel takım esnasında HTML5 için önemli bir boşluğu doldurmak amacıyla hazırlanmıştır.
Maqetta büyük mobil girişimleri ve mobil uygulamalar gibi dojox.mobile, Wink Toolkit, EmbedJS ve PhoneGap entegrasyonu, özellikle Dojo akımını desteklemek ve diğer girişimler canlandırmak amacı ile tasarlanmış bir ekisi kapatma yönünde atılmış en büyük adımlardan birisidir.
Maqetta uygulamasının ilk sürümünü http://maqetta.org adresinden hemen kullanmaya başlayabilirsiniz. Herkese açık bir açık kaynak projesi. Web sitesinden ücretsiz olarak kullanmak için Tıklayın.

İlk bakışta göze çarpan yenilikler:

1. Administrator sayfasına gitmeden var olan sayfaları editleyebilme.
2. Geliştirilmiş WYSIWYG editör desteği
3. Gelişmiş zaman dilimi desteği
4. Administrator görevleri için daha fazla sürükle bırak desteği
5. İçerik türü için etiketleme desteği
6. İlk kullanıcı kurulumun bir parçası olarak oluşturulacak.
7. Metalar için daha fazla izin desteği
8. Otomatik uygulama çalıştırıcısı (Cron Job) için web server üzerine her hangi bir script kurmadan Drupal ayarlarından yapılabilme özelliği
9. Kullanıcıya özel tema desteği kaldırıldı, bunun yerine benzer işleri gerçekleştiren modüller desteklenecek.
10. Kullanıcılar için en çok kullandıkları sayfalar için kısayollar eklendi.

Güvenlik ile ilgili gelen yenilikler:

1. Şifre sistemi daha güvenli olacak.
2. Giriş sistem daha güvenli olacak.
3. Artık modüller web üzerinden güncellenebilecek.
4. Zamanlanmış görevler için güvenlik uygulaması getirildi

Dikkat çeken diğer gelişmeler:

1. Farklı dillerde arama desteği
2. Test Frameworkleri eklendi
3. Gmail ve Google domain tanımlayıcıları için destek
4. Görüntü işleme için daha iyi destek de dahil olmak üzere geliştirilmiş görüntü işleme özelliği
5. Geliştirilmiş çoklu site kurulumu desteği
6. RDF desteği eklendi.
7. Arama motoru optimizasyonu ve linkler daha iyi bir şekilde desteklenmektedir.
8. Geliştirilmiş Node erişim ve task handling

Drupal geliştiricileri Drupal 7 için oldukça umutlular, WordPress 3.0 wordpress kullanıcılarını oldukça tatmin etti umarım aynı şey drupal içinde geçerli olur.

Son zamanlarda flash ile ilgili bazı gelişmeler oldu ve Steve Jobs “Flash artık bitmiştir” anlamında bir tümce kullandı. Peki bundan sonraki gelişmeler neler olacak diye beklerken HTML5‘in güzellikleri yavaş yavaş gün ışığına çıkmaya başladı. Ortaya çıkan görsel ve işlevsel özellikler, Apple ürünlerinin tam HTML5 desteği ile daha fazla gelişecek gibi görünüyor. Ben bu durumun yavaş yavaş Flas’ın yerini HTML5 alacak diye düşünüyorum. Henüz flash kadar karmaşık oyunlar ve uygulamalar geliştirilemese de özellik bakımından oldukça göz dolduruyor.

CSS3 ve HTML5 ile daha işlevsel ve görsel uygulamalar ortaya çıkacak gibi görünüyor. web2.0 akımından sonra web3.0 akımının kodsal tarafında HTML5 önemli bir rol oynayacak gibi görünüyor. Öyle ki bu etkileri göstermek için sizler için bazı örnekler seçtim. Seçtiğim bu 15 uygulama HTML5′in özelliklerini gözler önüne sermektedir.

HTML5 Flash’ın yerini alabilecek gibi görünüyor. Siz ne düşünüyorsunuz?

Canvas Minimal Particle Animation

Canvas Mimimal Partical Animation

CanvasMol

Canvas Mol

Flickr and Canvas in 3D

Flickr and Canvas in 3D

Cloth Simulation

Cloth Simulation

Sudoku Solver

Sudoku Solver

etchaPhysics

etchaPhysics

Google Images Gift Box – CSS 3D

Google Images Gift Box – CSS 3D

Liquid Particles

Liquid Particles

Canvas Nebula

Canvas Nebula

Ball Pool

Ball Pool

Bomomo

Bomomo

Video Canvas

Video Canvas

Torus

Torus

Dynamic Shadow

Dynamic Shadow

SketchPad

SketchPad

WordPress ile gelen ve medya ayarları altında bulunan Görsel Boyutları bilindiği üzere Thumbnail Orta ve Büyük olmak üzere 3 farklı boyutlandırma seçeneği içeriyor. Bu yazım biraz tutorial havasında olacak ve mevcut olan üç görsel seçeneğe nasıl ekstra seçenekler ekleyebileceğimizi gösterecek. Tutorial seviyesi olarak bir değer belirlememiz gerekirse advanced olarak nitelendirebileceğimiz bir  tutorial.

Bu yazıda değişiklik yapılan dosyaların yedeğini almanız kendi menfaatinize olacaktır, oluşacak bir hataya karşı yedekten geri yükleme yaparak ilk haline alabilirsiniz.

WordPress’i kurduğunuz zaman standart gelen görsel boyutları aşağıda görüldüğü gibi “Küçük Resim Boyutu“, “Orta Resim” ve “Büyük Resim“, olmak üzere 3 adet standart boyuta izin vermektedir. Biz bu yazıda buna bir adet daha ekleyeceğiz.

Wordpress Görsel Boyutları

Değişiklik Yapılacak Dosyalar

• wp-admin/options-media.php
• wp-admin/options.php
• wp-admin/includes/image-edit.php
• wp-admin/includes/image.php
• wp-admin/includes/media.php
• wp-includes/formatting.php
• wp-includes/media.php

Burada yapacağımız değişiklikler mevcut kurulumu etkileyecektir, eğer her yeni kurulumda etkin olmasını istiyorsanız değiştirmemiz gereken bir kaç dosya daha bulunmakta ben bu yazıda onlara değinmeyeceğim.

1. Adım wp-admin/options-media.php
İlk adım olarak wp-admin/options-media.php dosyası içerisine aşağıdaki kod bloğunda belirtilen kodları buluyoruz,

1
2
3
4
5
6
7
8
9
10
11
12

<table class="form-table">
<tr valign="top">
<th scope="row"><?php _e('Thumbnail size') ?></th>
<td>
<label for="thumbnail_size_w"><?php _e('Width'); ?></label>
<input name="thumbnail_size_w" type="text" id="thumbnail_size_w" value="<?php form_option('thumbnail_size_w'); ?>" class="small-text" />
<label for="thumbnail_size_h"><?php _e('Height'); ?></label>
<input name="thumbnail_size_h" type="text" id="thumbnail_size_h" value="<?php form_option('thumbnail_size_h'); ?>" class="small-text" /><br />
<input name="thumbnail_crop" type="checkbox" id="thumbnail_crop" value="1" <?php checked('1', get_option('thumbnail_crop')); ?>/>
<label for="thumbnail_crop"><?php _e('Crop thumbnail to exact dimensions (normally thumbnails are proportional)'); ?></label>
</td>
</tr>

ve bu kodların bitimine aşağıdaki kodları ekliyoruz.

1
2
3
4
5
6
7
8
9

<tr valign="top">
<th scope="row"><?php _e('Optimal size') ?></th>
<td><fieldset><legend class="screen-reader-text"><span><?php _e('Optimal size'); ?></span></legend>
<label for="optimal_size_w"><?php _e('Max Width'); ?></label>
<input name="optimal_size_w" type="text" id="optimal_size_w" value="<?php form_option('optimal_size_w'); ?>" class="small-text" />
<label for="optimal_size_h"><?php _e('Max Height'); ?></label>
<input name="optimal_size_h" type="text" id="optimal_size_h" value="<?php form_option('optimal_size_h'); ?>" class="small-text" />
</fieldset></td>
</tr>

Ekleme İşleminden sonra kodlar aşağıdaki gibi görünmelidir.

wp-admin/options-media.php- (Büyük Halini Görmek İçin Resme Tıklayın)

Görsel Boyutları-Optimal Boyut

1

	'media' => array( 'thumbnail_size_w', 'thumbnail_size_h', 'thumbnail_crop', 'medium_size_w', 'medium_size_h', 'large_size_w', 'large_size_h', 'image_default_size', 'image_default_align', 'image_default_link_type', 'embed_autourls', 'embed_size_w', 'embed_size_h' ),

ve kodlara optimal boyut için ‘optimal_size_w’, ‘optimal_size_h’, kodlarını ekliyoruz. Ekleme işleminden sonra aşağıdaki gibi görünmelidir.

1

	'media' => array( 'thumbnail_size_w', 'thumbnail_size_h', 'thumbnail_crop', 'optimal_size_w', 'optimal_size_h', 'medium_size_w', 'medium_size_h', 'large_size_w', 'large_size_h', 'image_default_size', 'image_default_align', 'image_default_link_type', 'embed_autourls', 'embed_size_w', 'embed_size_h' ),

wp-admin/options.php Ekleme sonrası genel görünüm - (Büyük Halini Görmek İçin Resme Tıklayın)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function sanitize_option($option, $value) {
 
	switch ($option) {
		case 'admin_email':
			$value = sanitize_email($value);
			break;
 
		case 'thumbnail_size_w':
		case 'thumbnail_size_h':
		case 'medium_size_w':
		case 'medium_size_h':
		case 'large_size_w':
		case 'large_size_h':
		case 'embed_size_h':

kodlarda belirtilen switch case yapısına optimal size seçeneğimizin genişlik-w(width) ve yükseklik-h(height) seçeneklerini ekliyoruz. Ekleme sonrası aşağıdaki gibi bir yapıya sahip olmalısınız.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function sanitize_option($option, $value) {
 
	switch ($option) {
		case 'admin_email':
			$value = sanitize_email($value);
			break;
 
		case 'thumbnail_size_w':
		case 'thumbnail_size_h':
		case 'optimal_size_w':
		case 'optimal_size_h':
		case 'medium_size_w':
		case 'medium_size_h':
		case 'large_size_w':
		case 'large_size_h':
		case 'embed_size_h':
		case 'default_post_edit_rows':
		case 'mailserver_port':
		case 'comment_max_links':
		case 'page_on_front':
		case 'rss_excerpt_length':
		case 'default_category':
		case 'default_email_category':
		case 'default_link_category':
		case 'close_comments_days_old':
		case 'comments_per_page':
		case 'thread_comments_depth':
		case 'users_can_register':
			$value = absint( $value );
			break;

4. Adım wp-includes/media.php
Bu adımda media.php dosyasında,

1
2
3
4
5

elseif ( $size == 'medium' ) {
	$max_width = intval(get_option('medium_size_w'));
	$max_height = intval(get_option('medium_size_h'));
	// if no width is set, default to the theme content width if available
}

kodlarını buluyoruz, aşağıdaki gibi görünmesi gerekiyor,

wp-includes/media.php- (Büyük Halini Görmek İçin Resime Tıklayın)

Optimal Boyut için aşağıdaki gerekli kodları yukarıda bulduğumuz kodların hemen öncesine ekliyoruz.

1
2
3
4

elseif ( $size == 'optimal' ) {
	$max_width = intval(get_option('optimal_size_w'));
	$max_height = intval(get_option('optimal_size_h'));
}

ekleme sonrası dosyanız aşağıdaki gibi görünmelidir.

wp-includes/media.php- (Büyük Halini Görmek İçin Resime Tıklayın)

5. Adım wp-admin/includes/image-edit.php
image-edit.php dosyası içerisinde değişiklik yapacağımız 2 alan bulunuyor öncelikli olarak dosya içerisinde “medium” kelimesini arayarak ulaşabilirsiniz, ilk değişiklik yapmamız gereken kod bloğu;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$parts = pathinfo($file);
$suffix = time() . rand(100, 999);
$default_sizes = apply_filters( 'intermediate_image_sizes', array('large', 'medium',  'thumbnail') );
 
if ( isset($backup_sizes['full-orig']) && is_array($backup_sizes['full-orig']) ) {
	$data = $backup_sizes['full-orig'];
 
	if ( $parts['basename'] != $data['file'] ) {
		if ( defined('IMAGE_EDIT_OVERWRITE') && IMAGE_EDIT_OVERWRITE ) {
			// delete only if it's edited image
			if ( preg_match('/-e[0-9]{13}\./', $parts['basename']) ) {
				$delpath = apply_filters('wp_delete_file', $file);
				@unlink($delpath);
			}
		} else {
			$backup_sizes["full-$suffix"] = array('width' => $meta['width'], 'height' => $meta['height'], 'file' => $parts['basename']);
		}
	}

yukarıdaki kodlar içerisinde (‘large’, ‘medium’, ‘thumbnail’) alanına optimal seçeneğini ekliyoruz ve ekleme sonrası kodlarımız aşağıdaki gibi görünmelidir.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$parts = pathinfo($file);
$suffix = time() . rand(100, 999);
$default_sizes = apply_filters( 'intermediate_image_sizes', array('large', 'medium', 'optimal', 'thumbnail') );
 
if ( isset($backup_sizes['full-orig']) && is_array($backup_sizes['full-orig']) ) {
	$data = $backup_sizes['full-orig'];
 
	if ( $parts['basename'] != $data['file'] ) {
		if ( defined('IMAGE_EDIT_OVERWRITE') && IMAGE_EDIT_OVERWRITE ) {
			// delete only if it's edited image
			if ( preg_match('/-e[0-9]{13}\./', $parts['basename']) ) {
				$delpath = apply_filters('wp_delete_file', $file);
				@unlink($delpath);
			}
		} else {
			$backup_sizes["full-$suffix"] = array('width' => $meta['width'], 'height' => $meta['height'], 'file' => $parts['basename']);
		}
	}

değişiklik yapacağımız bir diğer alan ise;

1
2
3
4
5

if ( $success && ('nothumb' == $target || 'all' == $target) ) {
	$sizes = apply_filters( 'intermediate_image_sizes', array('large', 'medium',  'thumbnail') );
	if ( 'nothumb' == $target )
		$sizes = array_diff( $sizes, array('thumbnail') );
}

yukarıdaki kodda görülen array(‘large’, ‘medium’, ‘thumbnail’) bölümüdür. Bu alana da optimal seçeneğimizi ekliyoruz ve aşağıdaki gibi bir koda sahip oluyoruz.

1
2
3
4
5

if ( $success && ('nothumb' == $target || 'all' == $target) ) {
	$sizes = apply_filters( 'intermediate_image_sizes', array('large', 'medium', 'optimal', 'thumbnail') );
	if ( 'nothumb' == $target )
		$sizes = array_diff( $sizes, array('thumbnail') );
}

6. Adım wp-admin/includes/image.php

wp-admin/includes/image.php- (Büyük Halini Görmek İçin Resme Tıklayın)

Bir diğer değişiklik yapacağımız dosyamız image.php, Resimde görünen kodların içerisindeki;

1

$temp_sizes = array('thumbnail', 'medium', 'large'); // Standard sizes

kodu arayıp array(‘thumbnail’, ‘medium’, ‘large’) dizi içerisine optimal seçeneğimizi dahil ediyoruz. Kod satırımız aşağıdaki gibi görünmelidir.

1

$temp_sizes = array('thumbnail', 'optimal', 'medium', 'large'); // Standard sizes

7. Adım wp-admin/includes/media.php
Son değişiklik yapacağımız dosya ise wp-admin/includes/media.php, dosya içerisinde aşağıdaki kodları arıyoruz ve;

1
2
3
4

function image_size_input_fields( $post, $check = '' ) {
 
		// get a list of the actual pixel dimensions of each possible intermediate version of this image
		$size_names = array('thumbnail' => __('Thumbnail'), 'medium' => __('Medium'), 'large' => __('Large'), 'full' => __('Full size'));

bu kodların içerisine optimal seçeneğimiz için ‘optimal’ => __(‘Optimal’), ibaresini ekliyoruz. Kodlarımızın aşağıdaki gibi görülmesi gerekmektedir.

1
2
3
4

function image_size_input_fields( $post, $check = '' ) {
 
		// get a list of the actual pixel dimensions of each possible intermediate version of this image
		$size_names = array('thumbnail' => __('Thumbnail'), 'optimal' => __('Optimal'), 'medium' => __('Medium'), 'large' => __('Large'), 'full' => __('Full size'));

Eğer bütün işlemleri adım adım ve eksiksiz yaptıysanız, Admin panelinde Optimal Size olarak eklediğimiz alana değer girip kaydettiğinizde database üzerinde options tablosunda gerekli alanlar eklenerek kaydedilecektir. Database üzerinde gerekli alanları kontrol ediniz aşağıdaki alanlar eklenmiş olmalıdır.

Wordpress Optimal Alanları- (Büyük Halini Görmek İçin Resme Tıklayın)

Artık resim eklerken seçenekler içerisinde eklediğimiz alana ait seçenek görünecektir.

Görsel Ekleme Seçenekleri- (Büyük Halini Görmek İçin Resme Tıklayın)

Farklı kullanım amaçları için ihtiyaç doğrultusunda yaptığım değişiklikleri bloğum üzerinden paylaşmaya devam edeceğim. Yorumlarınızla ve iletişim forumu aracılığı ile ihtiyaçlarınızı iletirseniz sizin için araştırmalarını ve uygulamalarını yapmaya çalışırım. ]]> http://www.listeniz.net/wordpress-gorsel-boyutlarina-yenisini-ekleyin/feed/ 2