Fatih Hayrioğlu'nun not defteri » spam http://www.fatihhayrioglu.com { CSS, HTML ve Javascript } Thu, 09 Feb 2012 08:44:49 +0000 en hourly 1 http://wordpress.org/?v=2012 HTML Mailing -1: Mailing Kodlarken Dikkat Edilmesi Gerekenler http://www.fatihhayrioglu.com/html-mailing-1-mailing-kodlarken-dikkat-edilmesi-gerekenler/ http://www.fatihhayrioglu.com/html-mailing-1-mailing-kodlarken-dikkat-edilmesi-gerekenler/#comments Wed, 03 Nov 2010 22:27:10 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1938 İnsanlar bildirileri, duyuruları yaymak için çeşitli araçlara başvururlar bu internet olmadan önce ve hala broşürler, mektuplar, afişler vs ile yapılırdı internet ile birlikte ise mail yolu yapılmaya başlandı. Normal metinsel mailinglerin yanı sıra html ile daha görselliği arttırılmış maillerde gönderilmeye başlandı. İşte bu görselliği arttırılmış html mail içeriğine mailing diyoruz.

Uzun bir aradan sonra bir mailing yapınca aklıma geldi, mailing yaparken nelere dikkat edilmeli diye bir makale yazmak. Çok uzun süre mailing yaptım diyebilirim, yaklaşık 3-4 sene mailing kestim. HTML kodlayıcı(arayüz geliştirici) için mailing ilk ciddi test aracıdır. Mailing her nekadar benim mantığıma göre çok işlevsel bir araç olmasa da müşteri için helede kurumsal müşteriler için vazgeçilmezdir. Ben birçok kurumsal mailingi okumadan çöpe atıyorum. Ama bir gerçek varki mailing hala etkisini kaybetmeden devam ettiren bir araçtır(müşteri için).

Bu makalede sadece ipuçları verip bitirmeyi düşünüyordum, mailing kesmek o kadar basit bir konu değil bu nedenle 2 başlık altında yazmaya karar verdim. İlki bu makale mailing kodlarken nelere dikkat etmemiz gerektiğini ve mail kodlarken nelere ihtiyacımız olduğunu toparlayacağım, ikinci makalemde basit bir örnek ile mail kodlamayı göstermeye çalışacağım. Mailing konusunda birde gönderim konusu var, ancak ben işin bu kısmı ile fazla ilgilenmediğim için bir şey yazmam mantıklı değil, bu konuda internette yeterli araştırmaları yaparak bilgi edinebilirsiniz.

Şimdi ilk makalemizi yazalım.

Mailing kodlarken nelere dikkat etmemiz gerekir

HTML kodlarken farklı tarayıcılar için kod yazarız bu kodlamadaki en önemli noktadır, mailingde ise iş daha vahimdir, çünkü mailing okuma araçları çok farklıdır ve bu araçlar normal html ve css standartlarının bir çok özelliği desteklemez.

Mailing Destekleme Listeleri

İlk önce mailing standartlarını incelemekte yarar var bence, neyi destekleyip desteklemediğini bilmek önemli.

Popüler mailing programlarının css destekleme listesini görmek için tıklayınız.

Benzer listeler webde çok var diğer bir liste email-standards.org

Bu listeleri incelmeliyiz ve kodumuzu yazarken buna göre hareket etmeliyiz.

HTML Görünümünü Tablo/Div ile Kodlama

Her nekadar uzun süredir web sitelerini kodlarken katman(div) ile kodlamayı savunsam da mailingde durum farklıdır, mailing planını kodlarken tablolardan yardım almak daha mantıklıdır. Bunun nedeni mailing destekleyicilerinin yeni standartları desteklememesidir.

Mailing yapısını oluştururken tablolu yapı kullanmalıyız. Uzun süredir katmanlı yapı ile kod yazan biri için tablolu yapıya dönmek zor oluyor, ama Allah’tan genelde basit yapılara sahip oldukları için sorun olmuyor.

CSS Kodlarınızı Satıriçi Yazın

Birçok mailng html çevrildikten sonra toplu olarak gönderim için çeşitli programlar kullanılır. Bu programların göndericiler için çeşitli kısıtlamaları vardır. Bunlardan bir tanesi, genelde hazırlana html kodunun sadece <body> etiketleri içerisindeki kodu eklememize izin vermesidir.

Bu nedenle dışarıdan eklenen .css dosyaları mailinglerimize ekleyemeyiz. Bunu destekleyen programlar var ise de benim çalıştığım birçok müşteride bu programlar yoktu. Bundan dolayıdır ki css kodlarımızı satıriçi yazmalıyız. Aşağıdaki örnekte görüldüğü gibi

<p style="font-family:Arial; font-size:12px; color:#999">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

Tabi kodları yazarken yukarıdaki destek listelerini dikkate almalıyız.

Resimleri ve Bağlantıları İnternet Üzerinden Verin

Mailingler web siteleri gibi html çevrilseler de kullanıcının e-posta kutusuna düşen kodlardır, bu nedenle kullanıcıya yükleyemeyeceğim ve kullanıcı bilgisayarına göre hareket edemeyeceğimiz durumlar söz konusudur.

Bunlardan bir tanesi resimlerdir, hazırladığımız resimleri kullanıcı bilgisayarına yükleyemeyeceğimiz için bunları kendi sitemiz üzerine yükleyip hazırladığımız mailing içeriğine bu resimleri kendi sitemiz üzerinde okutmalıyız. Örneğin

<img src="http://www.firmaadi.com/mailings/images/ustalan.jpg" width="450" height="120" alt="Firma_Adi" />

Web siteleri gibi hareket edemeyeceğimiz diğer bir konu ise bağlantıları yerel olarak vermeyeceğimiz konusudur. Bağlantılarımızıda yerel veremeyiz örneğin

<a href="hakkimizda.html">Hakkımızda</a>

Şeklinde bir bağlantı kırık bir bağlantı olacaktır. Bunun yerine

<a href="http://www.firmaadi.com/hakkimizda.html">Hakkımızda</a>

Şekline olmalıdır.

Test Etmeyi Unutmayın

Mailing yapılarının web sitelerinde daha sıkıntılı yapıları vardır. Bunlardan en önemlisi mailing gönderildikten sonra html koduna müdahale imkanımızın sıfır olmasıdır. Bu nedenlede mailing gönderilmeden tüm sorunların giderilmiş olması lazımdır. Birçok zaman mailing ile ilgili sorunlar yaşmışızdır, bu kaçınılmaz bir durumdur, ancak bunu en aza indirmek için testlerimiz gönderimden önce yapmalıyız.

Web üzerinde; Hotmail, Gmail ve Yahoo üzerinden
PC’de ise Outloook ve Thunderbird üzerinden testlerimizi yapmalıyız.
Farklı Tarayıclar ile İnternet Explore 6 ve 7 ve Firefox ile test etmeliyiz.

title ve alt Değerlerini Yazmayı unutmayın

Şimdilerde birçok mail okuma programı resimleri ilk mail yüklenirken yüklememekte ve kullanıcıdan izin istediğinden ve resimlerin yolunun kırık olma ihtimalinide dikkate alarak resimlerin alt elemanını boş bırakmayın. Aynı şekilde bağlantılarıda title özelliğini ekleyerek daha kullanışlı hale getirin.

Mailing Genişliğini

Mailing genişliği web sitesi genişlik standartlarında farklıdır. Mailing okuyucular olarak Outlook ve Thunderbird gibi araçların 3 kolonlu yapıları göz önüne alınarak tasarlamalıyız. 1024*768px çözünürlüğe göre mailingimizi tasarladığımızda 3 kolonlu bir yapıda mailing genişliğimiz 750px veya daha düşük olacaktır. Tasarım yaparken bunu dikkate almak önemlidir.

Eğer 800×600 çözünürlük düşünüyorsak 6oopx genişlik mailingimizin genişliği olmalıdır.

Mailing genişliğini 600px olarak düşünüp tasarlarsak bir sorun yaşamayacağımızı bilmeliyiz ve ona göre davranmalıyız.

Mailing İçeriğinde Kullanılmayacak Elemanlar

Gerek Form elemanları ve gerekse javascript kodları mailing içinde kullanmak sakıncalıdır. Birçok program ve mail sitesi güvenlik açıklarında çok sıkı davranır. Bu nedenle hiç bir javascript ve form işlemine izin vermez.

Daha önce yaşanan birçok script açıkları ile başı ağırmış bu araçlar yazdığınız bu kodlar nedeni ile gönderdiğiniz mailleri spam olarak niteleme ihtimali yüksektir.

Ayrıca birçok mailing programı flash desteklemez bu nedenle mailing kodlarımıza flash import edemeyiz.

Bazı HTML etiketlerini kullanılması anlamsız ve sorun yaratabilir. Bu etiketleri sıralayalım; <META>, <BASE>, <LINK>, <SCRIPT>, <FRAMESET>, <FRAME>, <IFRAME> ve yorum kodu <!– yorum –>

Spam Mailden Kaçınmak için Yapmamız Gerekenler

Spam mailller internet dünyasının baş belalarında biridir. Birçok mail programı spam mailleri en aza indirmek için birçok filtre uygulamaktadır. Bizlerin bu filtrelere mailinglerimizi hazırlamamız gerekir. Spama düşen mailler hiç bir anlam ifade etmez ve müşteri ile aramızın açılmasına neden olabilir.

Kısaca spama yakalanmamak için dikkat etmemiz gerekenleri listeleyelim

  • Mailinglerinizdeki bütün domainlerin "gönderen" kısmında görülen adresteki domainler aynı olmalı. Örneğin info@sirketadi.com adresinden gönderim yapıyorsanız, mailing bağlantılarında da www.sirketadi.com/xxx şekliden adreslere gitmeli.
  • Domaininiz karalistede mi değil mi kontrol edin. Çeşitli siteler var bu konuda tarama yapabileceğiniz. http://www.blacklistmonitoring.com/lookup/email_blacklist_IP_address_lookup.php
  • Mailiniz yüklenmemesi durumunda alternatif bir bağlantı oluşturun ve mailinizi altına ekleyin.
  • Kullanıcıların listenizden çıkabilmelerin sağlayacak bir link ekleyin mailinizin sonuna
  • Tüm kelimeleri büyük harflerle yazmak. Örneğin: MERHABA BU KAMPANYADA…
  • Çok fazla yazı rengi kullanmak. Örneğin: MERHABA BU KAMPANYADA…
  • Bir çok spam içeriğinde geçen kelimelere yer vermek. Örneğin: Free, Casino, Mortgage, Ücretsiz vs.
  • Çok fazla noktalama işareti kullanmak. Örneğin Dikkat!!!!!!! Büyük Kampanya!!!!!!
  • Mailing’in tamamının resimlerden oluşması bazı mail okyucuları tarafından spam olarak işaretlenmesine neden olabilir. Mailing içinde metin olması önemlidir.
  • Mailing’in başına veya sonuna kullanıcının mail listesinden çıkmasını sağlayacak bir metin ekleyin.

Bu konu çok ayrıntısı olan bir konu ben bu kadarına değinmek ile yetineyim.

Bir sonraki dersimde basit bir mailingin nasıl kodlanacağını anlatmak olacaktır.

Kalın sağlıcakla.

Kaynaklar

]]> http://www.fatihhayrioglu.com/html-mailing-1-mailing-kodlarken-dikkat-edilmesi-gerekenler/feed/ 4 26 Mart 2007 Web’den seçme haberler http://www.fatihhayrioglu.com/26-mart-2007-webden-secme-haberler/ http://www.fatihhayrioglu.com/26-mart-2007-webden-secme-haberler/#comments Mon, 26 Mar 2007 20:25:38 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=297
  • Hasan Yalçın’dan Web2.0 hakkında güzel bir yazı serisine başlamış, devamını bekliyoruz. Link
  • Secure Computing’in yaptığı araştırmaya göre en çok çöp(spam) e-posta ve olta yöntemi(phising) kullanılan e-posta gönderen ülkeler sıralamasında Çin ilk sırayı alıyor. %20,35 Çin, %10,55 Amerika, %9,57 Almanya. Neyseki biz bu kötü listede yokuz. Link
  • Javascript ile yuvarlak kenarlı kutuların yapımını anlatan İngilizce bir makale. Link
  • CSS ile yapılmış çok güzel bir gelişmiş form örneği. Link
  • CSS hayatımız kolaylaştıran 10 ipucu. Link
  • Web2.0 tahlil eden bir yazı. Link
  • Olmazsa olmaz 10 Adet Firefox Eklentisi. Link
  • Yeni bir sosyal imleme(Digg) sitesi açıldı. Oyyla. Çok güzel bir tasarım ve içerik ellerinize sağlık. Takipçinizim. Link
    • ]]>     http://www.fatihhayrioglu.com/26-mart-2007-webden-secme-haberler/feed/ 0     14 Mart 2007 Web’den seçme haberler http://www.fatihhayrioglu.com/14-mart-2007-webden-secme-haberler/ http://www.fatihhayrioglu.com/14-mart-2007-webden-secme-haberler/#comments Wed, 14 Mar 2007 12:16:21 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=287
  • 50 adet Firefox eklentisi Link, 20 tanede burada sıralanmış. Link
  • EOGallery javascript ile hazırlanmış güzel bir resim galerisi örneği. Link
  • Javascript ve CSS yardımı ile Font kontrolü scripti. Link
  • 71 Adet CSS ile yapılmış menü listesi linklerinin sıralandığı bir sayfa. Link
  • İnternet üzerindeki renk seçim araçlarının kısa açıklması ve linkleri. Link
  • Javascript ile yapılmış güzel örnekler(LightBox, Animasyonlu resim menü, Form Kontrolü, oval kenarlı kutular ve tablo filtreleme). Link
  • 42 tane hazır aksak(faux) kolonlu CSS Planı örneği. Link
  • Margin kullandığımız bazı durumlarda web tarayıcıları arasındaki farklardan yakınırız. Bu hatayı gidermek için yazılmış güzel bir İngilizce makale. Link
  • WordPress’de spam’ı engellemek için 4 adım. Link
  • WordPress "Feed Styler" WordPress RSS beslemelerini düzenlemek için bir eklenti. Link
  • Firefox, IE derken şimdi de Opera kod yazarlarına yardımcı araç olarak “Opera Developer Tools” çıkardı. Link
  • Hasan Yalçın ilk WordPress temasını yaptı. Hayırlı uğurlu olsun. Link
    • ]]>     http://www.fatihhayrioglu.com/14-mart-2007-webden-secme-haberler/feed/ 2     Web’de Geçen hafta olanlar http://www.fatihhayrioglu.com/webde-gecen-hafta-olanlar/ http://www.fatihhayrioglu.com/webde-gecen-hafta-olanlar/#comments Sun, 07 Jan 2007 14:24:10 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=244 Genelde günlük veya iki günlük haber yazıyordum ancak araya giren uzun tatil boyunca haber yazamadım ve bayağı haber toplanmış bu nedenle biraz uzunca haber vereceğiz bu sefer

    • Çoktandır RSS ve Atom okumak için program arıyordum. Ama asıl sorunum bunun için program kurmak istemememdi . Sonunda buldum Google Reader. kolay kullanımı ve yeni özellikleri ile çok güzel. şžimdilik gördüğüm tek eksik tarafı arama eklemek için ayrıca uğraşmak gerektiği(http://googlesystem.blogspot.com/) Link
    • Google yavaş yavaş servislerinin asıl sürümlerine geçiyor Google News’den sonra şimdide Blogger’un bazı sorunlarını hallettikten sonra betasını kaldırmış. Link
    • CSS ile en kolay şekilde saydamlık tanımı nasıl yapılır. Link
    • Hadi spam siteleri Google’a bildirelim. Artık Google’a arama sonucu ile alakasız olan siteleri bildirebiliyoruz. Link
    • CSS ile yapılmış siteleri listeleyen sitelerin listesi Link
    • CSS ve javascript ile hazırlanmış güzel tablo örnekleri Link
    • 2006 bitirince bir çok yerde geride kalan yılın enleri seçilmeye başlandı. İşte size bir örnek daha Link
    • Renklerin kullanımı ile ilgili güzel bir makale Link
    • 2007′de Web üzerinde hangi alanda en büyük gelişme olur diye bir anket yapmışlar ve sonuçları ve yorumu güzel. Link
    • Çin yapımı Maxthon(myIE diyede anılıyor) web tarayıcısının 2.0 betası çıkmış. Internet Explorer alt yapısını kullanan ve IE kendince bir şeyler katıp web tarayıcı piyasasına girmeye çalışan Maxthon sadece Çinliler kullansa bile Pazar payı bayağı yükse olacaktır :D Link
    • CSS sayfa planlamasını statik, likit ve elastik olmak üzere üç ana şekilde ve bunların birleşimini kullanarak sayfalarımızı kodlarız peki hangisini seçmeliyiz. Güzel ve faydalı bir makale Link
    • Geçen aylarda Google arama sonuçları içerisine kendi ürünlerini öneren reklamlar koymaya başlamıştı. Bir çok site ve kişiden eleştiri alınca bu uygulamadan vazgeçmiş. Link
    • Gtalk yeni versiyonu çıkmış. Tek yeni özellik Windows Vista uyumu gibi görünüyor. Link
    • Google’un bir çok servisini kullanıyorsunuz ve bunlara erişmek için bir menüye mi ihtiyacınız var işte size yardımcı olacak bir Firefox eklentisi GUtil! Link
    ]]>     http://www.fatihhayrioglu.com/webde-gecen-hafta-olanlar/feed/ 2