Hamza ERBAY » Html

Outlook mail şablonu (mail template) hazırlama

Hamza ERBAY — Wed, 20 Oct 2010 00:40:53 +0000

Outlook için mail template hazırlamak için html olarak hazırladığımız şablonu ProgramFiles\Common Files\Microsoft Shared\Stationary dizinine atmamız yeterli olacaktır. Mail template hazırlarken dikkat etmeniz gereken div yerine table kullanma biraz daha işimizi kolaylaştırıyor.

Css konusunda biraz problem yaşanıyor bunun için campaignmonitor.com adresindeki css tablosunda hangi sağlayıcının hangi elementi desteklediği gösterilmiş. Template i hazırlarken erişebilirlik problemleri yaşamamak için css kodunuzu tagları arasına ve class ve id kullanımında referans almak yerine (#box .leftblock) direk class ismini vermeniz ( .lefblock ) problemin önüne geçecektir.

Outlook için mail template hazırladıktan sonra “C:\ProgramFiles\Common Files\Microsoft Shared\Stationary” dizinine atıyoruz (office 2010 kullanıcıları “C:\Users\{kullanıcıAdı}\AppData\Roaming\Microsoft\Stationery” dizinine atmaları gerekiyor… teşekkürler akif abi) ve outlook da araçlar –> seçenekler –> posta biçimi –> ileti örneği –> yazı tipleri butonundan açılan pencerede kişisel ileti örneği sekmesine tıklıyoruz ve tema butonu ile açılan pencereden yapmış olduğumuz htm dosyasını seçiyoruz.

Browser farklılıkları css reset dosyası

Hamza ERBAY — Sun, 01 Aug 2010 09:57:56 +0000

Web tasarımında en problemli kısım yaptığımız tasarımı browserlarda farklılık göstermeden yayınlanmasını isteriz. Fakat çoğu zamana tasarım uygulamada problemli olur. Bunun nedeni ise browserların (firefox,internet explorer,chrome,safari…) html dosyayı farklı şekilde yorumlamaları ve bazı tagların standart değerlerini farklı yorumlamalarıdır. Ben bunun için Fatih Hayrioğlu’ndan öğrendiğim css sıfırlama metodunu kullanıyorum ve yer yer ekleme yapıyorum en son css sıfırlama kodum u ekliyorum yer yer güncelliyeceğim. Tabi inernet explorer da sıfırlama metodu versiyonlara göre değişebiliyor ve bunun için browser versiyonlarına göre yeni style dosyalarını hazırlamanız gerekecektir.

/* Css Sifirlama */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  caption, tbody, tfoot, thead, th {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; text-decoration:none;}

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
/* remember to define focus styles! */
:focus, a:focus, a:active{    outline: 0; }

/* remember to highlight inserts somehow! */
ins{ text-decoration: none; }
del{ text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse: collapse; border-spacing: 0;}

/* float uygulanan elemanlari kapsayamama sorunu */
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/* IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */

/* Css Sifirlama */

sIFR Teknolojisi

Hamza ERBAY — Wed, 30 Sep 2009 13:45:29 +0000

Font problemi çoğu web tasarımcısının problemi olmuştur istediği fontu kullanmak için fontu photoshopta hazırlayıp jpeg olarak kaydedip göstermesi gerekiyordu fakat bu durumda indexlenmede problem oluyordu.Ayrıca bir sayfayı okurken kullanıcının serverdan isteği de artmış oluyordu örneğin; 10 tane jpeg yaptığımız resmimiz olduğunu düşünürsek 10 kere server dan resim istiyor bunların yüklenme süresi göz önünde bulundurulduğu zaman da sitenin yavaş görüntülenmesine neden oluyor.

sIFR tekniği ile bu sorun ortadan kalkıyor bunu yaparken teknoloji javascript kütüphanesini ve flash ı kullanıyor böylece hem indexlenme sorunu hem de html sayfasının sunucudan isteği azalıyor(5 dosya isteği ) bunu nasılmı yapıyor. Bu çok karmaşık gibi gözüksede çok basit bir uygulaması var. Kısaca bahsedeyim

Bunun için yayınlayan kişide sadece flash yüklü olması gerekiyor çünkü fontu flash dosyasında belirleyip swf olarak servera atacağız.

Javascript dosyasında ufak değişiklikler yapacağız ve işlem tamamdır.

1. Dosyayı http://wiki.novemberborn.net/sifr3/ adresinden indiriyoruz.

2. İndirdiğimiz dosya içindeki flash klasörünü açıp içindeki yazıtipini kullanmak istediğimiz yazıtipi ile değiştiriyoruz.(ben futura seçtim ve swf dosyamın adını futura.swf olarak kaydettim)

3. font stili olarak ne kullanılacaksa onu atıyoruz (bold, normal, italic…)

4.flash da işimizi bitirdikten sonra publish ederken jpeg quality 100 şeklinde ayarlayıp publish edelim.

5.sifr-config.js dosyasında ufak değişiklikler yapılması gerekiyor. Buradaki kodumuzu sifr-config.js dosyasına yapıştırıp düzenleyebilirsiniz.
var futura = {
src: ‘flash/futura.swf’
};
sIFR.activate(futura);
sIFR.replace(futura, {
selector: ‘h1′,//h1 tagında kullanılacak ise
css: [
'.sIFR-root { font-size:24px; font-weight:normal; color:#9f0000; }',
'em { font-style:italic; }',//h1 tagının içinde hangi taglar kullanılacak ise onları yazıyoruz
'strong { font-weight:bold; color:#000; }'
],
wmode: ‘transparent’
});
6.Html kodumuza bazı dosyaları import ediyoruz. Aşağıdaki kodu dosyaları import etmek için kullanabilirsiniz kendi dizin yapınıza göre değiştirmeniz yeterli olacaktır

Önizleme: http://www.hamzaerbay.com/ornekler/sIFR/
http://www.hamzaerbay.com/ornekler/sIFR2/

Not: sIFR server a atıldığı zaman sağlıklı olarak çalışıyor

sIFR hakkında yararlı birkaç site

sIFR son sürüm http://dev.novemberborn.net/sifr3/nightlies/

http://www.muhammetsevim.com/yazi/sifr-3-kullanim-kilavuzu/
http://css-tricks.com/video-screencasts/39-how-to-use-sifr-3/
http://webdeneyimleri.donanimhaber.com/sifr-nedir-nedegildir/

örnek site

http://www.lightweb.pl/