tarihinde Fatih Hayrioğlu

HTML5 ve CSS3 hayatımıza girmeye başladı. Her ne kadar Microsoft nedeni ile tam olarak kullanmasakta birçok makale ve örnek uygulamayı takip ediyoruz. Hala geliştirilmekte olan özellikleri ile bu yeni teknolojilerin hayatımıza girişi bize birçok güzellik kazandıracaktır.

Bir çok makale okuyorum ve uygulama görüyorum ama HTML5 ile bir şey yapmak daha nasip olmadı bana. HTML5 hakkında okuduklarım ve araştırdıklarım konulardan bir tanesi de konu başlığından anlaşılabileceği gibi. HTML dokümanının yapısını oluşturan elemanlar hakkında ufak bir yazı yamayı planladım. Aslında mevcut HTML’de farkını yazacağım. Daha bir sadeleştirilmiş diyebiliriz.

DOCTYPE

Doğru DOCTYPE Kullanımı hakkında bir makalem vardır. Doctype, dokümanın tipi gösteriyor yorumlayıcıya(tarayıcıya). Bu tanımlar çok uzun metinler içeriyordu ancak HTML5 bu tanımı kısaltmış ve çok güzel yapmış.

Şimdiye kadar ve hala kullanmakta olduğumuz bir doctype örneği,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Yukarıdaki HTML etiketi bize bu html dokümanının xhtml 1.0 olduğunu ve Transitional ise hem HTML hemde XHTML kurallarının bu dokümanda geçerli olduğunu gösteriyor. Peki HTML5’de bu işi nasıl yapıyoruz.

<!DOCTYPE html>

Bu kadar, kısa ve hafıza da kalıcı. HTML kodlarını Not Defteri ile  yazdığım dönemlerde çok çekerdim bu Doctype tanımlarında. Git bir yerden örneğini al falan. Sonra Dreamweaver bunu otomatik ekliyordu da yazmaktan kurtulmuştum. Açıkçası ben hiç bir zaman yukarıdaki HTML5 öncesi kodu aklıma yazamadım.

Doctype Etiketinin kapama etiketi ve işareti yoktur ve küçük büyük harf duyarlılığı yoktur.

HTML5 öncesi sürümler SGML kökenli diller olduğu için DTD tanımlarına gereksinim duyardı ancak HTML5 SGML kökenli olmadığı için buna gerek duymaz.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
...
</body>
</html>

Peki burada bir sürüm numarası yok nasıl sonraki sürümler ile bunu ayıracağız?

Burada şöyle bir şey var HTML5 geliştirilirken eğer buraya bir sürüm numarası verilse idi mevcut bütün web siteleri bu kapsam dışında kalacaktı, ama bu şekilde bir tanım ile eski ve yeni tüm dokümanlar aynı kefeye konmuş oldu. Geçmişide destekleyen bir yapıya kavuşturulmuş oldu.

Aslında yeni nesil tarayıcılar bir tanım yapılmasa daha standart modda belgeyi tanımladığı için Doctype’ın pek bir geçerliliği kalmamış idi ama yinede bir tanım yapmak iyidir. İE’nin ne yapacağı belli olmaz.

<html> Elemanı

Html dokümanlarını çevreleyen kapsayıcı bir elemandır <html> html5 öncesinde tanımımız

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Şeklinde idi. Buradaki xmlns değeri bu dokümanın anaçatısının http://www.w3.org/1999/xhtml kullandığını gösteriyor. HTML5 anaçatısı belli olduğu için tekrar tanımlamaya gerek duymuyor ve ayrıca iki adet dil tanımınında gereksiz olduğunu kabul ediyor ve sonuçta html5’teki tanımımız;

<html lang="en"></html>

şeklinde oluyor.

<head> içi tanımlar

HTML5 sadece Doctype tanımını değil ayrıca <head> içinde kullandığımız etiketleride ciddi manada basit hale getirmiştir.

Karakter kodu için kullandığımız

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Yerine HTML5 karışılığı

<meta charset="UTF-8">

Gayet basit ve akılda kalıcı.

Gelelim script eklemek için kullandığımız koda;

<script type="text/javascript" src="dosya_adi.js"></script>

HTML5’de ise;

<script src="file.js"></script>

Benzer şekilde ilişkilendirilmiş dokümanlar için kullandığımız

<link rel="stylesheet" href="style-original.css" type="text/css" />

yerine HTML5’de

<link rel="stylesheet" href="style-original.css" />

İşin kısacası, tüm tanımları olabildiğince kısaltmışlar. Süperde yapmışlar, şimdiye kadar bize çektirdikleri eziyet neydi kardeşim.

Sonuç olarak bir HTML5 basit yapısı

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="" />
</head>
<body>
</body>
</html>

Şeklinde olacaktır.

Kaynaklar

tarihinde Fatih Hayrioğlu

Mailin kodlamanın çeşitli yöntemleri var ben burada kendi tercih ettiğim yöntemi anlatmaya çalışacağım. Basit bir mailing örnek olarak kodlayacağım, ancak birçok mailing aynı yöntem ile kodlanabilir. </span>

Tasarımcıdan gelen kaynak dosya(psd veya png) resim işleme programı ile açılır. Benim elim daha çok Phoshop’a alışık olduğu için onun üzerinden anlatacağım.

Burada kodlayacağım mailing Can Gürbüz’ün tasarladığı bir mailing, biraz sağı-solu ile oynadık tabi. Bu arada Can’a teşekkürler tasarım için.

Örnek psd’yi indirmek için tıklayınız.

Background harici kısmı istersek Adobe Photoshop programın Slice aracı ile keseriz, isterseniz tek tek seçip kaydedip html kodumuza ekleriz.

Adobe Photoshop Slice aracı ile psd’mizi resim formatlarını ve mailin metin resim durumunu düşünerek parçalarız. Mesela orta resmin olduğu alan ile yanındaki “Lorem ipsum…” yazısının olduğu kısmı ikiye bölme nedenimiz soldaki kısım daha az renk içerdiği için gif formatında kaydedeceğimiz bir alan iken sağdaki kısım ise daha fazla renk içerdiği için jpg formatında kaydetmemiz daha mantıklı olacağını düşünerek iki kısma böldük. Diğer kısımlar basit bir parçalamadır.

Parçalara ayırdıktan sonra web için kaydet seçeneği ile kaydetme ekranını açıyoruz. Ayrıca slice’lanmış dosyayı psd olarak kaydedip arşivlemekte yara var. Çünkü mailinglerde bir çok revize gelir ve bu slide’lanmış dosyaya ihtiyaç duyarız.

Gerek web sitesi kodlarken ve gerekse mailing yaparken resimlerimiz gerçek boyutları ile kullanmamız pek mantıklı değildir. Çünkü kullanıcı sayfaların veya mailing’in hızlı açılmasını ister. Bizde bu nedenle resimlerimizi optimize ederek web sitelerine ve mailnglere ekleriz. Resim formatları ve seçimi için ayrı bir makale yazmak lazım, neyse işin bu kısmını geçelim. Karşımıza aşağıdaki gibi bir ekran çıkacaktır. Ben ekranı ikiye bölmeyi tercih ediyorum. Solda resmin orijinali sağda ise optimize edilmiş şekli olacak şekilde ayarlıyorum. Bunu görünümü üstteki sekmeden kolayca yapabiliyoruz.

Sağdaki optimize ettiğimiz kısımdan her parçayı seçerek ilgili formatını belirtiyoruz. Genelde mailinglerde gif veya jpg tercih edilir. Şimdilerde png’de yapılıyor ama az tercih edilen bir formattır png. Gif tercihi yaptıktan sonra

Yukarıdaki ekranda gördüğümüz şekilde format tercihini yapıyoruz. Genelde az renkli alanlar gif seçilir çok renk olan yerler ise jpg seçilir. Her parça için bu işlem yapıldıktan sonra Kaydet butonuna tıklıyoruz. Karşımıza çıkan pencerede Kayıt Türü seçeneğinden “HTML and Images (*.html) ” seçeneğini seçiyoruz. Bu seçenek bizim yerimize html oluşturur ve resimlerimizide otomatik olarak images klasörü içine kaydeder.

Daha sonra ufak tefek düzeltmeler için html sayfamızı bir html editörü ile açarız. <body> bg rengi olarak beyaz atanmış olarak gelir htmlimiz, bizim bg rengimiz gridir bu atamayı yaparız.

<body bgcolor="#858585" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

Daha sonra mailing ortalamak için table elementine align=”center” eklemesi yaparız.

<table width="638" height="572" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">

Daha sonra bir önceki makalemizde önerdiğimiz eklemeleri yaparız. Resimlerin alt etiketini doldururuz. Resimlerin bulunduğu yeri tam kavraması için style=”display:block” eklemesi yaparız, bu ekleme bir çok zaman hayat kurtarır. Normal tarayıcıda düzgün görünen htmlimizde mailing gönderim programında arada beyaz boşluklar bırakacak şekilde göründüğü durumları engellemek için eklenir bu kod.

Daha sonra içerik metin kısmını resim olarak bırakmak yerine metin olarak kodlamak için resmi bu tablo hücresine bg resmi olarak tanımlarız. Resim tek renk görünsede aslında degradeli bir yapıya sahip olduğu için tablo hücresinin bg resmi olarak tanımlıyoruz.

<td colspan="2" background="images/odul_mailing_04.gif" width="638" height="172"></td>

Daha sonra metinleri bu hücrenin içine yerleştirip stillerini ve biçimlerini tanımlıyoruz.

<td colspan="2" background="images/odul_mailing_04.gif" width="638" height="172" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#444444; padding-left:15px; padding-right:15px"><p><a href="#" style="color:#95ad62">Phasellus vitae</a> metus at elit commodo sollicitudin. Quisque bibendum risus non urna consequat ut luctus erat pulvinar. <strong>Proin libero eros</strong>, dapibus vel accumsan sed, malesuada eu urna. Integer lorem urna, venenatis sit amet interdum tincidunt, tristique in sem. </p>
<p><a href="#"  style="color:#95ad62">Morbi ornare</a> , <strong>nterdum elit, ac sollicitudin enim convallis sit amet. Suspendisse potenti.</strong> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
<p>Cras porta aliquet viverra. Nulla facilisi. Praesent quam neque, suscipit <a href="#"  style="color:#95ad62">scelerisque</a></p></td>

CSS kodlarımızı satıriçine yazdık, bu nedenle dikkat ediniz bağlantılara tanımladığımız rengi her bir bağlantıya tek tek tanımladık. Mailing tasarındaki gibi sayfa yukarısından mesafe bırakmak için boş bir paragraf ekleyelim.

Resimlerimize link vermek için resim haritalama(imagemap) yöntemini kullanabiliriz. Gelişmiş editörlerde bu işlemi kolaylaştıran araçlar mevcuttur. bu araçlar ile şirket logosuna, alttaki şirket web sitesine link verelim, ayrıca telefon numarasını verdiğimiz alandan iletişim sayfasına da link verebiliriz.

Son olarakta alttaki “Bu maili göremiyorsanız…” ve “Bu mail listesinden çıkmak istiyorsanız..” metinlerini ekleyip mailimizi bitirelim.

Örnek mailingi görmek için tıklayınız.

Sonuç

Burada kodladığım mailing basit bir mailingdi belki, ancak burada sizlere işin genel mantığını anlatmak için basit bir mailing seçtim. Amaç işin mantığını anlatabilmekti. Genel çerçeveleri ile mailing kodlarken bu adımları takip ederiz. Bir başka yöntemde tablo yapımızı kurup ilgili resimleri tek tek kesip ilgili hücrelere ekleyerek yapmaktır. İnternette yapılmış birçok mailing örneğini bulabilirsiniz bunları inceleyerek işin mantığını kafanızda tam olarak oturtabilirsiniz. http://www.campaignmonitor.com/templates/ buradaki örnekler mesela.

Sağlıcakla kalın.

Kaynaklar

tarihinde Fatih Hayrioğlu

İ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 800x600 çö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

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: <span style=”color:red”>MERHABA</span> <span style=”color:blue”>BU</span> <span style=”color:pink”>KAMPANYADA…</span>
  • 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