Bu dersimizde Illustrator ile BITMAP görselleri vektörel çizimlere çeviriyoruz.
Video Dersler
Video derslerimizi takip etmek için YouTube kanalımıza abone olabilirsiniz.
BITMAP Görseli Vektörel Hale Çevirme
31 Ağustos 2014 Pazar
BITMAP Görseli Vektörel Hale Çevirme
BITMAP Görseli Vektörel Hale Çevirme
WordPress'te JavaScript dosyalarını Footer'a taşımak
Google PageSpeed Insights’da WordPress sitemi kontrol ettiğimde, JavaScript dosyalarımı sitenin altına taşımam gerektiğine dair bir uyarı alıyorum. Bu işlemi nasıl gerçekleştirebilirim?
Facebook sayfamızdan konuyla ilgili soru bu şekilde.
JavaScript dosyalarının Footer’da siteye dahil edilmesi performans açısından büyük önem taşımakta. Dolayısıyla Google’ın PageSpeed kontrolü gibi birçok kalite kontrol robotu bu yapıyı denetlemekte. Ancak kullanıcılar bu sorunu aşmak için yanlış bir adresleme olan header.php’ye gidip ilgili JavaScript dosyalarını aramakta.
İşte anahtar ipucu burada. WordPress JS dosyalarını header.php’de değil, function.php’de sitenize ekliyor.
Ne yapmalıyım?
İlk olarak WordPress’in wp_enqueue_script tanımını biraz detaylandıralım. Kullanım yapısı genel anlamda şu şekilde :
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
Kısaca sırasıyla işlenen aracın adını, dizinini, varsa diğer eklentilerle ilişkilerini, versiyonunu ve Footer’da yer alıp almamasını belirtiyoruz.
Function.php
Şimdi Function.php’yi açalım. Dosya içerisinde wp_enqueue_script diye arattığınızda aşağıdakine benzer yapılar göreceksinizdir.
wp_enqueue_script('bootstrapjs', get_template_directory_uri().'/js/bootstrap.min.js', array('jquery') );Bu yapı temanıza ilgili dizindeki Bootstrap JavaScript dosyasını eklemekte. Ancak bunu </head>‘in üstüne yapmakta.
İlk işimiz array(‘jquery’) tanımını silmek olacak. Elimizde versiyon bilgisi de olmadığını varsayalım ve o kısmıda tırnakların içine bir şeyler yazmayarak boş bırakalım. Son olarak $in_footer tanımı için true değeri geçelim. Özetle üstteki wp-enqueue_script tanımını aşağıdaki gibi düzenleyelim.
wp_enqueue_script('bootstrapjs', get_template_directory_uri().'/js/bootstrap.min.js', false, '', true );Şimdi dosyamızı kaydedip web sayfamızı kontrol edelim. Sizlerin de fark edebileceği gibi artık bootstrap.min.js <head> elemanını içerisinde değil, </body> nin hemen üstünde ekleniyor.
İşlem tamam.
Kapanış
Bu teknik sayesinde sadece JS dosyalarınızı değil, diğer tüm kalıp yapılarınızı Footer’a taşayabilirsiniz. Örneğin CSS dosyalarınızı aşağıya almak istiyorsanız wp_enqueue_style tanımı size yardımcı olacaktır. Aynı tekniği uygulayarak CSS dosyalarınızı da Footer’da tanımlanır hale getirebilirsiniz.
İyi çalışmalar.
WordPress'te JavaScript dosyalarını Footer'a taşımak
30 Ağustos 2014 Cumartesi
YouTube'da 1000+ takipçi
Adobewordpress’in kendini yenilediği bugünlerde dikkat çeken bir diğer detay ise YouTube kanalımızın takipçi sayısı oldu. 6 saati aşan video arşivimiz günden güne genişleyerek büyümekte. Bu kadar kısa süre zarfında genç, dinamik ve yaratıcı bir topluluk haline geliyor olmamız, kullanıcılarımızın da birbiriyle etkileşimini kaçınılmaz kılıyor. İvmeye yine sizlerin fikirleri yön vermekte. Tüm sosyal ağ hesaplarımızdan bize oluşan takipçilerimiz, Adobewordpress’in YouTube kanalında görmek istedikleri video dersleri bize iletebiliyor.
Eğer hala video derslerimizden haberdar değilseniz endişe etmeyin. Hepsi HD kalitede sizleri bekliyor;
YouTube'da 1000+ takipçi
29 Ağustos 2014 Cuma
Scroll ile bir ilerleyen video nasıl yapılır?
Özellikle teknoloji firmaları yeni ürünleri tanıtırken hazırladıkları web tasarımlarında HTML5‘in video oynatıcısı aracılığıyla küçük çaplı şovlar yapmakta. Siz ön katmanda ürünle ilgili detaylı bilgileri okurken alt katmanda gizli bir video yapısı kaydırma çubuğuyla eş zamanlı olarak ileri/geri ilerleyebilmekte.
Bu anlatımımız gözünüzde bir tasarım canlandırmadıysa aşağıdaki örneği görüntüleyerek işe başlayabilirsiniz. Daha sonrasında ise bu yeni teknoloji ürünü tasarımı oluşturacağız.
HTML5 Video Oynatıcısı
Bu güncel ve kullanışlı video oynatıcısı daha önceki teknolojilerde alışık olmadığımız değiştirilebilir ve esnek yapısıyla büyük kolaylıklar sağlıyor. Eğer HTML5 video player hakkında bilgi edinmek istiyorsanız işe aşağıdaki makalelerimize göz atarak başlayabilirsiniz.
Scroll (kaydırma çubuğu) ile kayan video nasıl hazırlanır?
Daha önce de bahsettiğimiz gibi HTML5 video oynatıcısı değiştirlebilir ve özgünleştirilebilir seçenekleri sayesinde bize büyük bir esneklik kazandırıyor. İşte bu yapıyı kullanarak videomuzun ilerleyiş aşamasını web sayfamızın kaydırma çubuğuyla eşleştireceğiz. Birkaç satır HTML, JavaScript ve CSS kodu işimizi görecektir. Hadi CSS kodlarımız ile başlayalım!
CSS Kodları
Boşu boşuna endişe etmeyin. Bu makalemizde hiçbir dil de 5 satırdan fazla kod yazmayacağız. Aşağıdaki CSS tanımlaması ile video playerimizin üzerini örtüp kaydırma çubuğunu istediğimiz ölçüye hizalayacak Division’ı tanımlıyoruz.
Not : Burası önemli. Aşağıda girdiğimiz 2500 piksellik height değeri, kullandığımız örnek videosuna özgündür. Daha uzun bir video için daha uzun bir height değeri girmeniz gerekmektedir.
.aw-screensizer
display: table;
width: 100%;
height: 2500px;
Şimdi HTML kodlarımız ile devam edelim.
HTML Kodları
İlk olarak yukarıda yüksekliğini tanımladığımız aw-screensizer divini ekleyelim, sonrasında da HTML5 playerda oynatacağımız videoyu bağlayalım. Son olarak kullanıcının
<div class="aw-screensizer"></div>
<video id="aw-video" tabindex="0" autobuffer="autobuffer" preload="preload">
<source src="images/ders-videosu2.mp4"></source>
<p>Tarayıcınız HTML5'in <video> elemanını desteklememekte.</p>
</video>
Ve son olarak JavaScript kodlarımızı ekleyelim.
JavaScript Kodları
İlk olarak aw-video’yu yakalıyoruz. Daha sonra video oynatıcıyı durdurup, scroll’u oynatıcının pause işlevine bağlıyoruz. Böylece her pause() çalıştırıldığında video duruyor ya da devam ediyor. Son olarak da video için atlama süresi ve geçiş sıklığı belirliyoruz.
var slideOut = document.getElementById('aw-video');
slideOut.pause();
window.onscroll = function()slideOut.pause();;
setInterval(function()slideOut.currentTime = window.pageYOffset/400;, 40);
Bu kadar.
Kapanış
Bu tip kapsamlı web aksiyonları ne kadar karmaşık gözükse de , basit kilit hamlelerle kolayca hazırlanabiliyorlar. HTML5′in bize kattığı avantajları konuşmaya devam edeceğiz fakat şimdilik bu kadar.
İyi çalışmalar.
Scroll ile bir ilerleyen video nasıl yapılır?
28 Ağustos 2014 Perşembe
Lorempixel ile Sınırsız Random Görsel
Tasarımın dijital kolunda deneme ekranları çizerken büyük metin alanlarını hep Lorem Ipsum aracı sayesinde doldurduk. Yıllar içerisinde Lorem Ipsum resmileşti, bütün tasarım ajansları ve iş kolları tarafından kullanılır hale geldi. Türkçeye de “Taklit Yazı Bloğu” olarak geçti. Masaüstü yayıncılık ile uğraşanlar büyük hız kazandı. Peki ya dijital, hatta çerçeveyi küçültelim, web tasarımcıları? Paragrafları Lorem Ipsum ile bir şekilde doldurduk. Ama onca resim alanı nasıl özgün bir şekilde doldurulacak?
Metinlerin Lorem Ipsum’u varsa görsellerin de Lorempixel’i var!
Lorempixel sınırsız sayıdaki görseli istediğimiz boyutta göstermemizi sağlıyor. Evet, yanlış duymadınız. Lorempixel sayesinde, istediğiniz kategori ve renk yoğunluğundaki görseli, belirleyeceğiniz boyutta özgün bir şekilde web sayfanızda yayınlayabilirsiniz.
Lorempixel
Biz bu makaleyi sizlere sunarken kullanılabilecek görsel sayısı 1 milyar 302 milyon 181 bin 106 taneydi. Bu rakam her saniye artmaya devam ediyor. Buradan da anlaşılacağı gibi Lorempixel’in size aynı görseli sunma ihtimali neredeyse imkansız.
URL : http://lorempixel.com/
Sizlere sunulan başlıca kategoriler şunlar
- İş hayatı
- Kediler
- Şehir
- Yemek
- Moda
- İnsanlar
- Doğa
- Spor
- Teknoloji
- Taşıma
- Soyut
- Hayvanlar Alemi
Orjinal halleriyle kategori isimleri şu şekilde : abstract animals business cats city food nightlife fashion people nature sports technics transport
Lorempixel nasıl kullanılır?
HTML’in klasik IMG elemanında kaynağı Lorempixel’in size verdiği URL’i girmeniz tamamıyla yeterli. Aşağıdaki örnekler canlı yapıdadırlar. Direkt olarak Lorempixel üzerinden gelmektedirler.
Örnek 1 : 400×200 her türden görseller
<img src="http://lorempixel.com/400/200">
Örnek 2 : 400×200 siyah-beyaz görseller
<img src="http://lorempixel.com/g/400/200">
Örnek 3 : 400×200 spor konulu görseller
<img src="http://lorempixel.com/400/200/sports">
Örnek 4 : 400×200 spor konulu görsellerin 1.si
<img src="http://lorempixel.com/400/200/sports/1/">
Örnek 5 : 400×200 spor konulu görseller üzerinde adobewordpress yazısıyla
<img src="http://lorempixel.com/400/200/sports/adobewordpress">
Kapanış
Değerli vakitlerini boş metin ve görsel alanlarını doldurmakla öldürmek kim ister? Dolayısıyla Loremipsum ve Lorempixel bizler için bulunmaz nimet. Bu yüzden etlerinden de yararlanalım sütlerinden de
Hepimiz biliyoruz ki ilham perileri her saniye çevrelemiyor etrafımızı tasarım yaparken.
İyi çalışmalar.
Lorempixel ile Sınırsız Random Görsel
23 Ağustos 2014 Cumartesi
WordPress için kullanışlı 5 Google Chrome Eklentisi
Bu makalemizde WordPress severlerin işini kolaylaştıracak 5 adet Google Chrome uzantısını sizlerle paylaşacağız.
Google Chrome için WordPress Uzantıları
Önplana çıkan ve kullanışlı eklentiler şu şekilde :
1.Send to WordPress
Google’ın Drive hizmeti sayesinde birçok dosya tipini kolayca kontrol edebiliyor ve paylaşabiliyoruz. Send to WordPress eklentisi Google Drive hesabımızda bulunan dokümanlarımızı kolay bir şekilde WordPress blogumuza aktarmamızı sağlıyor. Bu işlemi yaparken doküman stil ve görsellerini de koruyor ve olduğu gibi blog makalenize aktarıyor.
Chrome’a Ekle
2.WordPress Site Manager
Birden fazla WordPress sitesini yönetiyorsanız WordPress Site Manager tam sizlik. Bu eklenti sayesinde hızlı ve kolay bir şekilde yönetim panelleri arasında geçiş yapabiliyor, sitenizin belirli kısımlarına direkt erişim sağlayabiliyorsunuz.
Chrome’a Ekle
3.PageXray
WordPress ile hazırlanmış bir web sayfası geziyorsunuz diyelim. Arayüz veya kullanılan eklentilerden biri hoşunuza gitti. Ancak ne yaptıysanız ilgili uygulamanın ismini öğrenemediniz. İşte burada devreye PageXray giriyor. Bu Chrome eklentisi sayesinde WordPress web sayfalarını gezerken, sayfada kullanılan eklenti ve tema bilgilerini görüntüleyebiliyorsunuz.
Chrome’a Ekle
4.WP Write
Bu uzantı sayesinde tarayıcınız üzerinden çalışan bir WordPress yazı editörüne sahip olursunuz. Offline olduğunuz anlarda bile bu eklenti sayesinde bir yazı üzerine çalışabilir, onu taslak olarak kaydedebilirsiniz.
Chrome’a Ekle
5.MultiPress
WordPress’in hızlı paylaşım özelliği Press This’i kullanan bu eklenti beraberinde birden fazla blog için de çalışabiliyor. Böylece link paylaşımlarınızı hem hızlı hem de fonksiyonel hale getirebiliyorsunuz.
Chrome’a Ekle
Kapanış
Bu makalede yer almasını önerebileceğiniz Chrome uzantıları aşağıdaki yorum alanında bizlere belirtebilirsiniz.
İyi çalışmalar.
WordPress için kullanışlı 5 Google Chrome Eklentisi
21 Ağustos 2014 Perşembe
jQuery ile Düzenlenebilir Table (editableTableWidget)
Web tasarımının listeleme yükünü sırtlayan tablo yapıları günümüzde popülerliğini korumakta. Ancak kimi zaman veri çokluğundan, kimi zaman da form yoğunluklarından bu tablolardaki güncelleme işlemleri popup, modal veya yeni sekmede yapılmakta. Bu da kullanıcının ufacık bir satırı değiştirmesi için fazladan bir ekran daha gezmesi anlamına geliyor.
Bu makalemizde jQuery ile düzenlenilebilir / değiştirilebilir table yapısı oluşturacağız. Karşınızda editableTableWidget!
editableTableWidget
Adından da anlaşılacağı gibi küçük dosya boyutu ve kod satırına sahip bu yapı klasik table elemanını form inputları ekleyerek düzenlenebilir hale getiriyor. Yapımcıların vurguladığı özellikler şöyle :
- Zor olanı yapmıyoruz. Sadece HTML’in table yapısını kullanıyoruz. Yani editableTableWidget’ı kullanmak için kodlarınızda köklü bir değişiklik yapmanız gerekmiyor.
- Change ve validate eventlerini destekliyor. Böylece form kontrollerinizi yapmaya devam ediyorsunuz.
- Seçimler için klasik DOM focus taslağını kullanıyor.
- Kopyala/Yapıştır desteği sunuyor.
- Daha önceki CSS dosyanıza uygun çalışıyor, kendi tasarımını kullanmak için sizikileri bozmuyor.
- Bootstrap ile beraber çalışabiliyor.
- Çalışması için sadece jQuery’e ihtiyaç var.
- Chrome 32, Firefox 26, IE 10, Safari 7, Android Chrome and iOS 7 Safari’de test edildi.
Nasıl kullanılır?
Önceden eklemediyseniz güncel jQuery versiyonunu web sitenize dahil ediniz. Kullanılabilir versiyonlara buradan göz atabilirsiniz. Örnek kod aşağıdaki gibidir.
<script src="http://code.jquery.com/jquery-xxxxxxx.min.js"></script>
Şimdi editableTableWidget’ın kodlarını ekleyebiliriz. Aşağıdaki dosyaları içeren bir JavaScript dosyası oluşturup projenize dahil edin. Tabii bu kodları jQuery’nin altına eklemiş olmanız gerekiyor.
$.fn.editableTableWidget = function (options)
'use strict';
return $(this).each(function ()
var buildDefaultOptions = function ()
var opts = $.extend(, $.fn.editableTableWidget.defaultOptions);
opts.editor = opts.editor.clone();
return opts;
,
activeOptions = $.extend(buildDefaultOptions(), options),
ARROW_LEFT = 37, ARROW_UP = 38, ARROW_RIGHT = 39, ARROW_DOWN = 40, ENTER = 13, ESC = 27, TAB = 9,
element = $(this),
editor = activeOptions.editor.css('position', 'absolute').hide().appendTo(element.parent()),
active,
showEditor = function (select)
active = element.find('td:focus');
if (active.length)
editor.val(active.text())
.removeClass('error')
.show()
.offset(active.offset())
.css(active.css(activeOptions.cloneProperties))
.width(active.width())
.height(active.height())
.focus();
if (select)
editor.select();
,
setActiveText = function ()
var text = editor.val(),
evt = $.Event('change'),
originalContent;
if (active.text() === text ,
movement = function (element, keycode)
if (keycode === ARROW_RIGHT)
return element.next('td');
else if (keycode === ARROW_LEFT)
return element.prev('td');
else if (keycode === ARROW_UP)
return element.parent().prev().children().eq(element.index());
else if (keycode === ARROW_DOWN)
return element.parent().next().children().eq(element.index());
return [];
;
editor.blur(function ()
setActiveText();
editor.hide();
).keydown(function (e)
if (e.which === ENTER)
setActiveText();
editor.hide();
active.focus();
e.preventDefault();
e.stopPropagation();
else if (e.which === ESC)
editor.val(active.text());
e.preventDefault();
e.stopPropagation();
editor.hide();
active.focus();
else if (e.which === TAB)
active.focus();
else if (this.selectionEnd - this.selectionStart === this.value.length)
var possibleMove = movement(active, e.which);
if (possibleMove.length > 0)
possibleMove.focus();
e.preventDefault();
e.stopPropagation();
)
.on('input paste', function ()
var evt = $.Event('validate');
active.trigger(evt, editor.val());
if (evt.result === false)
editor.addClass('error');
else
editor.removeClass('error');
);
element.on('click keypress dblclick', showEditor)
.css('cursor', 'pointer')
.keydown(function (e) e.which === 91 );
element.find('td').prop('tabindex', 1);
$(window).on('resize', function ()
if (editor.is(':visible'))
editor.offset(active.offset())
.width(active.width())
.height(active.height());
);
);
;
$.fn.editableTableWidget.defaultOptions =
cloneProperties: ['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right',
'text-align', 'font', 'font-size', 'font-family', 'font-weight',
'border', 'border-top', 'border-bottom', 'border-left', 'border-right'],
editor: $('<input>')
;
Son olarak hangi table elemanlarının bu özelliğe sahip olmasını belirliyoruz.
$('.editable').editableTableWidget();Böylece editable classına sahip tüm table elemanları düzenlenilir hale geldiler. Bu alana sadece table diyerek tüm tabloların düzenlenebilir olmasını sağlayabilirsiniz.
Kapanış
Kullanıcının işlemini hızlandırmak ve kolaylaştırmak için bu tip anlık güncelleme işlemleri büyük önem taşıyor. Kullanıcı griddeki düzenlemeyi yaptıktan sonra focusOut yapması beklenip veritabanına göndereceğiniz UPDATE sorgusu ile işlemleri kısaltabilirsiniz.
İyi çalışmalar.
jQuery ile Düzenlenebilir Table (editableTableWidget)
19 Ağustos 2014 Salı
Mobil sürümde telefon numarasına tıklandığında arama nasıl yapılır?
Taşınabilir cihazların günden güne gelişmesi, neredeyse her telefonun web tarayıcıya sahip olması sebebiyle easy-to-use kurallar listemize bu yapıyı da ekleyerek devam ediyoruz.
Bu dersimizde HTML‘in yeni versiyonuyla nitelik genişlemesini sürdüren anchor elemanını detaylandıracağız.
Telefon numaralarına nasıl link verilir?
HTML’in klasik anchor (<a></a>) elemanını kullanmaya devam ediyoruz. Anchor ile elektronik posta gönderirken kullandığımız mailto işlemine benzer tel yapısıyla linklendirmemizi yapıyoruz.
<a href="tel:+905000000">Burayı tıklayarak bizi arayabilirsiniz</a>
İşte bu kadar kolay!
Mobil sürümde telefon numarasına tıklandığında arama nasıl yapılır?
Kaydol:
Kayıtlar (Atom)