Add-blog-post

source/posts/2013-09-27-paperclip-gemi-ile-resimlere-watermark-ekleme.html.md

@@ -0,0 +1,89 @@
+---
+title: Paperclip gemi ile resimlere watermark ekleme
+date: 2013-09-27 17:28 UTC
+tags:
+---
+
+[Paperclip][1] gemi varsayılan olarak resimlere watermark eklemeyi desteklemiyor. Bu yüzden watermark ekleyebilmek için projeye, imagemagick'in resimleri birleştirme komutu olan 'composite' i içeren bir processor eklememiz gerekiyor.
+
+<!--more-->
+
+Öncelikle paperclip geminin processorları aradığı
+
+    lib/paperclip_processors
+
+
+klasörünün içine watermark.rb dosyamızı oluşturup
+
+    module Paperclip
+      class Watermark < Thumbnail
+        # Handles watermarking of images that are uploaded.
+        attr_accessor :format, :whiny, :watermark_path, :position
+
+        def initialize file, options = {}, attachment = nil
+          super
+          @file             = file
+          @whiny            = options[:whiny].nil? ? true : options[:whiny]
+          @format           = options[:format]
+          @watermark_path   = options[:watermark_path]
+          @position         = options[:watermark_position].nil? ? "SouthEast" : options[:watermark_position]
+
+          @current_format   = File.extname(@file.path)
+          @basename         = File.basename(@file.path, @current_format)
+        end
+
+        # Performs the conversion of the +file+ into a watermark. Returns the Tempfile
+        # that contains the new image.
+        def make
+          return @file unless watermark_path
+
+          dst = Tempfile.new([@basename, @format].compact.join("."))
+          dst.binmode
+
+          command = "composite"
+          params = "-gravity #{@position} #{watermark_path} #{fromfile} #{tofile(dst)}"
+
+          begin
+            success = Paperclip.run(command, params)
+          rescue PaperclipCommandLineError
+            raise PaperclipError, "There was an error processing the watermark for #{@basename}" if @whiny
+          end
+
+          dst
+        end
+
+        def fromfile
+          "\"#{ File.expand_path(@file.path) }[0]\""
+        end
+
+        def tofile(destination)
+          "\"#{ File.expand_path(destination.path) }[0]\""
+        end
+      end
+    end
+
+
+şeklinde watermark classımızı ekliyoruz.
+
+Ardından ilgili model dosyamızda
+
+    has_attached_file :photo,
+    processors: [:thumbnail, :watermark],
+    styles: {
+      zoom: { geometry: '1024x576#', watermark_path: "#{Rails.root}/app/assets/images/watermarks/watermark_zoom.png"},
+      main: { geometry: '770x520#', watermark_path: "#{Rails.root}/app/assets/images/watermarks/watermark_main.png"}
+    }
+
+
+şeklinde eklediğimiz resimler için kullanılacak processorlerı tanımlıyoruz, thumbnail resimlerin boyutunu düzenlemek için paperclipte tanımlanmış processor classıdır eklenmediği sürece resim boyutlandırması yapılmaz. Ardından farklı boyutlar için yeniden boyutlandırma için geometry ve watermark olarak eklenecek resmimizin path'ini veriyoruz.
+
+Bu işlemlerden sonra eklenecek her resime watermark'ınız eklenecektir.
+
+Eğer daha önce upload ettiğiniz resimlere de watermark'ınızın eklenmesini istiyorsanız.
+
+    rake paperclip:refresh class=Product
+
+
+rake'ini çalıştırmanız yeterlidir.
+
+ [1]: https://github.com/thoughtbot/paperclip

source/posts/2013-10-26-3d-karakter-modelleme-ve-animasyon-outsource-is-ilani.html.md

@@ -0,0 +1,97 @@
+---
+title: 3D Karakter Modelleme ve Animasyon Outsource İş İlanı
+date: 2013-10-26 19:53 UTC
+tags: 3d, animasyon, cg, iş teklifi, modelleme, outsource
+---
+
+## Tanım
+
+[lab2023][1] firması olarak bir projede kullanılmak üzere 3D Grafik karakter(ler) modellenmesi ve bu karakter(ler)e ait animasyonlara ihtiyacımız vardır. Bu işleri uzmanlık alanındaki kişilere outsource vermeye karar verdik. Bu bağlamda aşağıda ön detayları bulunan işi almak isteyen arkadaşlara veya firmalara bu ilanı yayınlamanızı ve eğer ilgi duyuyor iseniz bizimle iletişime geçmenizi rica ederiz.
+
+## İhtiyaçlar ve Deadline
+
+Teklif birim fiyatını belirlemek adına sizden 1 adet Aslan karakteri modellemeniz istenecektir. Bu çalışmanızın ardından talep edilen toplam 4 adet diğer hayvanlar da sizinle paylaşılacaktır. Bu modelleme gerçeğe yakın olacak ve ilgili hayvana bir karakter yüklenecektir.
+
+Nihai sonuç için [Madagascar][2] veya [Madagascar: Escape 2 Africa][3] filmindeki Alex karakterini veya diğer Aslanları referans alabilirsiniz. Karakterleri [şu adresten][4] veya [şuradaki Google görsellerinden][5] inceleyebilirsiniz. Karakterler yaklaşık olarak bu filmdeki gerçeklilik ve sempatiye sahip olmalıdır.
+
+Karakter modellemesi haricinde karaktere kendine özgü hareketler de yaptırılacaktır. Bu bakımdan karakterin bu davranışlarının max. 5'er saniyeyi geçmemeyecek animasyonlar haline getirilmesi istenmektedir. Doğal olarak karakterin bir iskelet sistemine sahip olması beklenmektedir.
+
+### Karakter için istenilen referans hareketler ve olaylar
+
+*   Beslenme: Kendisine verilen bir büyük bir biftek parçasını yakalama ve onu yeme.
+*   Acıkma: Ekrana vurarak ve ses çıkararak açıktığını belirtme.
+*   Uyuma: Bulunduğu alanda sakin bir şekilde uyuklama-dinlenme halinde bekleme.
+*   Sevilme ve mutlu olma: Sahibi tarafından sevildiğini gösteren bir ibare.
+*   Saklanma: Ekranın herhangi bir bölgesine saklanma.
+*   Kendine özgü bir hareket yapma: Aslan karakteri için ses çıkararak Kükremek.
+*   Gıdıklanma ve gülme
+
+**Ortam**
+
+Karakter kendine uygun bir ortamda bulunacaktır. Kaplan için Ormanlık bir alanda arkaplanda bitki ve ağaçların olduğu ön planda da bir topraklık alanda hayvanın bulunması sağlanabilir. Bunun için yine [Madagascar][2] veya [Madagascar: Escape 2 Africa][3] filmindeki atmosferi referans alabilirsiniz.
+
+Yukarıda bahsi geçen 1 adet karakterin ve karakterin kendine ait doğal ortamının realistik ve sempatik şekilde modellenmesi, istenilen davranış biçimlerinde animasyonunun hazırlnaması için sizden bir deadline belirleneminizi rica ediyoruz.
+
+## Çalışma şekli
+
+*   Çalışmalar dropbox üzerinden source kodları ile alınır. İlgili source kodların lisansları müşterimize ait olacaktır.
+*   Pre-production aşamasında çalışmalar bir onay mekanizmasından geçmelidir. Yani çalışmayı yapmadan önce mutlaka ama mutlaka bize bir eskiz şeklinde çizim göndermeniz ve animasyonlar için story board hazırlamanız gerekmektedir. Biz yaptık budur gibi oldu bitti olmamalıdır.
+*   Çalışmaların tercihen popüler bir 3D modelleme programların yapılması beklenmektedir.
+*   3D Studio Max tercihimizdir ancak Maya ile çalışacağız derseniz karşı çıkmayız. Organik modelleme için ayrıca ZBrush kullanıyorsanız bunu yadırgamayız. Ancak pek popüler olmayan bir program ile çalışırsanız bizim için kaynak kodları düzenlemek veya düzenletmek adına problem çıkabileceğinden tercih sebebi olmayacaktır. Eğer 3Ds Max kullanacaksanız sizinle aynı dili konuşur ve daha iyi anlaşabiliriz.
+*   Post-production kapmsamındaki görsel efekler, renk, kesme kırpma v.b. ayarlamalar için ise Adobe Premiere ve Adobe After Effect kullanıyorsanız sizinle aynı dili konuşur ve daha iyi anlaşabiliriz.
+*   Modellere ve animasyonlara 3. parti modeller, dokular, render kütüphaneleri, scriptler v.b. dahil edecekseniz bunların kaynaklarını belirtmenizi ve lisanslarını mutlaka ama mutlaka bizimle paylaşmanızı rica edeceğiz.
+*   Yine aynı şekilde animasyonlarda kullanılacak sesler veya ses efektleri lisansa tabi olmalıdır.
+*   Biz firma olarak 3. parti kaynak kullanımındaki lisans konularında hassasız, sizlerin de aynı özeni göstereceğinizden emin olmamız gerekmektedir.
+
+## Ödeme Süreçleri Penaltı ve Deadline
+
+*   Bizler müşterilerimiz ile nasıl sözleşme ve ödeme planı uyguluyorsak aynı süreç burada da gerçekleşecektir.
+*   %25 Peşinat, işin bitiş oranına göre iki haftalık veya aylık olarak ödeme yapılacaktır. İşin %70'i bittiyse %70 oranında ödemenizi alacaksınız.
+*   İki taraflarda yükümlülüklerine uymazsa bir cezai yaptırım olacaktır. Bizler ödemeleri gününde, sizlerde iş teslim tarihine uymazsanız günlük olarak bir cezai yaptırım olacaktır.
+
+## Gizlilik Sözleşmesi
+
+Teklifinizin 2. aşamaya geçmesi halinde proje detaylarını sizinle paylaşacağımızdan fikri hakların korunması açısından aramızda bir gizlilik sözleşmesi imzalamamız gerekmektedir. Gizlilik sözleşmesi ile ilgili detaylar aşağıdaki gibidir.
+
+*   Müşterimizin isteği doğrultusunda [gizlilik sözleşmesini][6] indirip imzalayıp taranmasını, info[at]lab2023.com adresine email, aslınıda Pamukkale Üniversitesi Teknokent Z13 Kınıklı Denizli adresine göndermenizi rica ediyoruz.
+
+*   İlgili belgeler bize ulaştıktan sonra projenin ve yapılacak grafik işlerinin detaylarını içeren 4 sayfalık bir grafik ihtiyaç dosyasını istediğiniz email adresine ulaştıracağız.
+
+*   Teklif vermeniz için bu döküman yeterli ise gizlilik sözleşmesini anlaşırsak verebilirsiniz ancak bu döküman dışında ki sorularınıza cevap alamayacaksınız.
+
+## Teklifleriniz
+
+*   Lütfen tekliflerinizi info[at]lab2023.com adresine gönderiniz.
+*   Teklifinizde freelancer olup olmadığınız, şuan bir firmada çalışıp çalışmadığınız, daha önceki çalışmalarınız, fatura kesip kesemeyeceğiz, daha önce hangi projelerde bulunduğunuz, ekip çalışmasına yatkınlığınız, CV'niz, blog adresiniz, varsa Dribbble, Behance, iStockphoto v.b. portfolyo adresleriniz gibi sizi tanıyabileceğimiz bilgiler ayrıca **deadline**, **fiyat** olmalıdır.
+*   Anlaşmadan önce mutlaka ama mutlaka çalışmalarınızı ve tarzınızı görmemiz gerekmektedir. Örnek çalışmalarınızı mutlaka paylaşmanızı rica ediyoruz.
+
+**Örnekler ile ilgili linkler**
+
+*   [Madagascar][2]
+*   [Örnek görüntü - 1][7]
+*   [Örnek görüntü - 2][8]
+*   [Örnek görüntü - 3][9]
+*   [Örnek görüntü - 4][10]
+*   [Madagascar: Escape 2 Africa][3]
+*   [Örnek görüntü - 1][11]
+*   [Örnek görüntü - 2][12]
+
+İlgilenen arkadaşlar bize **0 258 215 5010** nolu telefondan veya **Tayfun Öziş ERİKAN - tayfun.ozis.erikan[at]lab2023.com** adresinden konu hakkında iletişime geçebilirler.
+
+**Eğer ayrıca paylaşmak isterseniz dokümanın [PDF halini buradan indirebilirsiniz.][13]**
+
+İlgilenenlere şimdiden teşekkürler. İyi çalışmalar.
+
+ [1]: http://www.lab2023.com
+ [2]: http://www.imdb.com/title/tt0351283/
+ [3]: http://www.imdb.com/title/tt0479952/
+ [4]: http://www.madagascar-themovie.com/
+ [5]: https://www.google.com/search?q=madagascar+movie&tbm=isch
+ [6]: https://dl.dropboxusercontent.com/u/54382764/matbuatlar/matbuat-gizlilik-sozlesmesi.pdf
+ [7]: http://www.imdb.com/media/rm3844768768/tt0351283
+ [8]: http://www.imdb.com/media/rm3207234560/tt0351283
+ [9]: http://www.imdb.com/media/rm2267710464/tt0351283
+ [10]: http://www.imdb.com/media/rm3106571264/tt0351283
+ [11]: http://www.imdb.com/media/rm285643776/tt0479952
+ [12]: http://www.imdb.com/media/rm235312128/tt0479952
+ [13]: http://www.lab2023.com/wp-content/uploads/2013/10/3d_modelleme_ve_animasyon_isleri_outsource.pdf

source/posts/2013-11-04-2d-karakter-tasarimi-ve-animasyon-outsource-is-ilani.html.md

@@ -0,0 +1,23 @@
+---
+title: 2D Karakter Tasarımı ve Animasyon Outsource İş İlanı
+date: 2013-11-04 18:53 UTC
+tags: 2d, animation, design, iş teklifi, motion graphic, outsource
+---
+
+Merhaba,
+
+"**[3D Karakter Modelleme ve Animasyon Outsource İş İlanı][1]**" başlığı ile <http://www.lab2023.com/3d-karakter-modelleme-ve-animasyon-outsource-is-ilani> adresinden daha önce duyurduğumuz outsource iş ilanımızla ilgili bize gelen **2D çalışma tekliflerini** de değerlendirmeye almaya karar verdik. Bu bakımdan önceki ilanımızı revize ediyoruz.
+
+İlgilenen tasarımcı arkadaşlar ana detayları <http://www.lab2023.com/3d-karakter-modelleme-ve-animasyon-outsource-is-ilani> adresinde belirtilen şekilde bize aynı iş için **2D tekliflerini** de gönderebilirler.
+
+#### 2D Çalışma ile ilgili ilave notlar
+
+*   Çalışmayı Adobe After Effects programını kullanarak yapıyor olmanız bizim için tercih sebebi olacaktır.
+*   Çalışma After Effects kaynak dosyaları ile birlikte teslim edilmelidir.
+*   Ayrıca çalışmada kullanılan görsellerin Adobe Photoshop veya Adobe Illustrator programındaki kaynak dosyalarını da bizimle paylaşmanızı isteyeceğiz.
+
+İlgililere duyurulur.
+
+İlgilenen arkadaşlar bize **0 258 215 5010** nolu telefondan veya **Tayfun Öziş ERİKAN - tayfun.ozis.erikan[at]lab2023.com** adresinden konu hakkında iletişime geçebilirler.
+
+ [1]: http://www.lab2023.com/3d-karakter-modelleme-ve-animasyon-outsource-is-ilani

source/posts/2013-12-10-using-medium-editor-as-input-field-in-rails.html.md

@@ -0,0 +1,41 @@
+---
+title: Using Medium Editor as Input Field in Rails
+date: 2013-12-10 21:06 UTC
+tags:
+---
+
+Medium Editor is seriously a stunning WYSIWYG editor. Simple, stylish, easy to use… But you can also use it as an input field, with some Javascript magic :)
+
+First off, you must include JS and CSS files of Medium Editor. It doesn’t matter if you use from CDN or local folders.
+
+<https://github.com/daviferreira/medium-editor>
+
+I’m using it in a form partial (one of my current projects).
+
+    =stylesheet_link_tag 'medium-editor.css'
+    =javascript_include_tag 'medium-editor'
+
+    = form_for @post do |f|
+      = f.hidden_field :body, html: { id: "body" }
+      .editable { data: { field: { id: "body" } } }
+      = f.submit
+
+    =javascript_include_tag 'input-field'
+
+
+Normally you can just add ".editable" class on any element you like but you can't do it for an input field. What I've done is, I just created my input field as hidden and a editable div with ***data-field-id*** is "body".
+
+IDs of input field and editable field must be same, so we can create a polymorphic system for synchronization. Let's get to the ***input-field.js*** file.
+
+    var editor = new MediumEditor('.editable');
+
+    $('.editable').bind('input propertychange', function() {
+      $("#post_" + $(this).attr("data-field-id")).val($(this).html());
+    });
+
+
+When you create a MediumEditor object with '.editable' class, all elements (except input fields) with '.editable' class will turn into Medium Editor.
+
+Real magic we'll use is "bind" method of HTML elements. (Also I must warn you that you must include standard jQuery libraries). When a editable class element is changed, inner code of bind method will run. This way we'll get the editable element's ***data-field-id*** and concatenate it with "#post_" string.
+
+Then we set the value of "#post_element" with editable class element's inner HTML. If you keep the names of hidden element and editable section same, you get a polymorphic synchronization. So you can use multiple Medium Editor input fields.

source/posts/2014-03-03-sass-nedir-ozellikleri-nelerdir.html.md

@@ -0,0 +1,129 @@
+---
+title: Sass Nedir? Özellikleri nelerdir?
+date: 2014-03-03 18:03 UTC
+tags:
+---
+
+Sass genel olarak css derleyicisidir. Css sayesinde var olmuş fakat css’i teknik olarak geçmeyi başarmıştır. Nasıl geçmiş kısaca özetliyorum;
+
+-Css’in değişken tanımlanılabilinen hali (Variables)
+
+-Css’in tarayıcılar için yazdığımız ekstra kodları kendisi oluşturabilen hali(Mixins)
+
+-Css’in girintileri fark ederek iç içe class’ları yazabilen hali (Nesting)
+
+-Css dosyasında istediğimiz kodları istediğimiz yerde extend edebiliyoruz (Extend/Inheritance)
+
+-Css dosyamızı parçalara ayırıp, ayırdığımız kısımları istediğimiz yerde çağırabiliyoruz (İmport)
+
+-Css dosyamızda çarpma,bölme toplama vs. yapabiliyorz. (Operators)
+
+Şimdi artılarını açıklamaya çalışacağım.
+
+**Özellikleri**
+
+**Variables:** Sass’ta değişken tanımlayabildiğimizi söylemiştik. Örneğe bakalım.
+
+Değişkenleri tanımlıyoruz.
+
+    $header-font-style:  Helvetica, sans-serif
+    $header-color: #000
+
+
+Değişkenleri kullanıyoruz.
+
+    .header
+      font: $header-font-style
+      color: $header-color
+
+
+**Nesting:** Nesne girintilerine göre kod yazmak.
+
+    #nav
+      ul
+       color: red
+      li
+       color: blue
+      a
+       color: green
+
+
+Css çıktısı:
+
+    #nav ul {
+    color: red;
+    }
+    #nav li {
+    color: blue;
+    }
+    #nav a {
+    color: green;
+    }
+
+
+**Partials ve @import:** Kodlarımızı bölümleyip istediğimiz yerde import edebiliyoruz.
+
+    /* _reset.sass */
+    body
+     margin: 0
+     padding: 0
+
+
+Bu dosyayı asıl stil dosyamıza dahil edelim.
+
+    /* base.sass */
+    @import 'reset'
+
+
+**Mixins:** bu özellik sayesinde css3 ün hayatımızı zor bir yoldan kolaylaştıran özelliklerini sıkılmadan uygulayabileceğiz.
+
+    @mixin border-radius($radius)
+      -webkit-border-radius: $radius
+      -moz-border-radius: $radius
+      -ms-border-radius: $radius
+      -o-border-radius: $radius
+      border-radius: $radius
+
+
+Mixin'i sass'da çağırıyoruz.
+
+     .box
+       @include border-radius(10px)
+
+
+Bu mixin'inden sonra border-radius kullandığımızda ekstra kodları yazmamıza gerek yok.
+
+**Extend/Inheritance:** class yada id'lerde kullandığımız özellikleri @extend özelliği ile bir sonraki class yada id mizin içinde kullanabiliyoruz.
+
+message class'ı için kodlarımız bunlar.
+
+    .message
+      border: 1px solid #ccc
+      padding: 10px
+      color: #333
+
+
+Şimdide diğer class yada id'mizde bu kodları extend edelim.
+
+    .success
+      @extend .message
+      border-color: green
+
+    .error
+      @extend .message
+      border-color: red
+
+
+**Operators:** css özelliklerini yazarken operatorleri kullanabileceğimizi biliyor muydunuz? :)
+
+    aside
+     float: right
+     width: 300px / 960px * 100%
+
+
+Css çıktısı:
+
+    aside {
+     float: right;
+     width: 31.25%;
+      }