HTML5: Doküman Yapısını Oluşturan Elemanlar
27 Kas
Yazı Fatih HAYRİOĞLU tarafından HTML5 kategorisine eklendi.
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
HTML Mailing 2 – Mailing HTML Kodunun Yazılması
11 Kas
Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.
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.
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
- http://www.mediaministryblog.com/2009/08/how-to-create-a-free-email-newsletter/
- http://www.anandgraves.com/html-email-guide/#unnecessary_htmltags
- http://css-tricks.com/using-css-in-html-emails-the-real-story/
- http://www.devwebpro.com/create-an-email-newsletter-template-part-2/
- http://24ways.org/2009/rock-solid-html-emails
- http://www.tuttoaster.com/code-an-email-newsletter-from-psd-to-html/
- http://sixrevisions.com/web_design/creating-html-emails/
HTML Mailing -1: Mailing Kodlarken Dikkat Edilmesi Gerekenler
4 Kas
Yazı Fatih HAYRİOĞLU tarafından XHTML kategorisine eklendi.
İ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.viget.com/inspire/tips-for-coding-html-email/
- http://thinkvitamin.com/features/design/ensuring-your-html-emails-look-great-and-get-delivered/
- http://www.anandgraves.com/html-email-guide (iyi)
- http://www.email-standards.org/ (iyi)
- http://www.mailchimp.com/articles/email_marketing_guide/ (iyi)
- http://css-tricks.com/using-css-in-html-emails-the-real-story/
- http://www.email-standards.org/clients/
- http://www.campaignmonitor.com/css/
- http://www.xavierfrenette.com/articles/css-support-in-webmail/
- http://www.topluemailgonderimi.com/spamadusmedennasiltopluemailgonderilir.html
http://www.sitepoint.com/article/code-html-email-newsletters/
CSS İpucu 28: FireBug yardımı ile daha kolay CSS Sprite Uygulamak
28 Eki
Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.
CSS Sprite yöntemini birçok yerde uyguladım, CSS Sprite tekniği ile ilgili uzunca bir makalede yazmayı düşünüyorum, ama öncesinde küçük bir ipucu yazayım istedim.
CSS Sprite tekniğini kısa açıklarsam sunucu tarafında çok fazla resim isteğini azaltmak için kullanılan sitelerimize hız kazandıran bir yöntem diyebiliriz. Uygulamada kullandığımız resimleri tek bir resim altında toplayıp ilgili alanlara background-position özelliğinden yararlanarak ilgili resimleri atama işidir. Bir background kaydırma yöntemidir işin aslı.
Birçok yerde kullandım bu yöntemi sizlerede anlattım çeşitli makalelerimde, bunlardan bir tanesi PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması II adlı makale.
CSS Sprite tekniğinde sorunlardan bir tanesi hazırladığımız toplu resim üzerinde ilgili elemana atanacak background-position değerlerini bulmaktır.
Yukarıdaki şekilde resmi birleştirdik, bu resimdeki ilgili bölümleri ilgili elemanlara atamak için tek tek background-position değerlerini girmeliyiz. Bunu her eleman için tek tek yapmalıyız. Bu işlem çok can sıkıcı haller alabiliyor bazen, ama burada yardımımıza sağ olsun Firefox’un eklentisi FireBug yetişiyor.
FireBug’ın anında müdahale etme yeteneği sayesinde bizler css sprite resimlerindeki background-position değerlerini çok kolay bir şekilde bulabiliyoruz.
Örneği takım logoları için bir css sprite resmi hazırladık. Bu resimdeki her takım için konum bulmak çok zor olur.
İlk olarak tekrarı engellemek için genel bağlantıya tanımımızı yapalım
a.takimLogo{ display:block; background:url(../images/takim_logolari.gif) right 0 no-repeat; padding:8px 30px 8px 0; color:#0c2b90; text-decoration:underline}
Daha sonra her takımın logosunun yerini Firebug yardımı ile bulup atayalım. Trabzonspor’un ki ile başlayalım. Resim hareketli gif olduğu için biraz geç yüklenebilir, ama açıklayıcı olması için hareketli gif’i tercih ettim.
div#icerikAlani table td div.logoTrabzon{ background-position:-3px -107px}
Yukarı aşağı tuşları yardımı ile bulduğumuz değeri(-107px) background-position değeri olarak tanımlıyoruz.
Buradaki örnek daha kolay isede daha zor sprite uygulama durumlarında konum belirlemek daha çetrefilli olabilir, bu ve benzeri durumlar için Firebug’ın çok büyük yardımı dokunuyor. Bunuda bir ipucu olarak sizlerle paylaşmak istedim.
Jquery ipuçları – 1
Jquery ipuçları – 2
Jquery ipuçları – 3
1 – Mümkünse Class yerine Id kullanmayı tercih edin
jQuery ile kod yazarken bize çok büyük kolaylıklar kazandırır. Bunlardan bir tanesi elemana atanmış sınıfı yardımı ile kolayca seçebilme özelliğidir, ancak burada şöyle bir durum söz konusudur; jquery id ile atanmış elemanları normal javascriptteki gibi getElementById ile yakaladığı için daha hızlı çalışırken normal olarak sınıf ile yakalamalarda daha yavaş çalışacaktır.
Bu nedenle mümkün olduğunca seçicilerde id kullanmaya dikkat edilmelidir. Tabi bazı durumlarda sınıf kullanmak zorunda kalabiliriz o başka.
kaynak: net.tutsplus.com
2 – next() ve prev() kullanımı
Bu özelliklerin kullanımı bazen can kurtarıyor ancak kullanırken dikkat etmek lazım, bazende sorunlara yol açabiliyor. Sonradan eklediğiniz bir eleman sizin next ve prev kabullerinizi mahvedebiliyor
next() : next fonksiyonu bir sonraki elemanı yakalar. Sadece sonraki elemanı yakalar alt elemanlarını yakalamaz.
next fonksiyonu filtreleme özelliği vardır, yani next(‘li.secili’) tanımı ile en yakın bir sonraki secili sınıfı tanımlı li elemanını yakalayabiliriz.
Bir örnek verelim.
<ul>
<li>Adana</li>
<li>Ankara</li>
<li class="secili">İstanbul</li>
<li>İzmir</li>
<li>Trabzon</li>
</ul>
Şeklindeki bir html kodundan
$('li.secili').next().css('border-bottom', '1px solid #999');
next() fonksiyonu yardımı ile bir sonraki elemanı yakalayabiliriz.
prev() : prev fonksiyonu bir önceki elemanı yakalar. Sadece önceki elemanı yakalar alt elemanlarını yakalamaz.
prev fonksiyonu filtreleme özelliği vardır, yani prev(‘li.secili’) tanımı ile en yakın bir onceki secili sınıfı tanımlı li elemanını yakalayabiliriz.
Bir örnek verelim.
<ul>
<li>Adana</li>
<li>Ankara</li>
<li class="secili">İstanbul</li>
<li>İzmir</li>
<li>Trabzon</li>
</ul>
Şeklindeki bir html kodundan
$('li.secili').prev().css('border-bottom', '1px solid #999');
prev() fonksiyonu yardımı ile bir önceki elemanı yakalayabiliriz.
3 – Üst Eleman Bulma – parent(), parents() ve closest()
parent()
Bir üst elemanı bulma. Geriye bir adet üst eleman döndürür.
$('td.secili').parent().css('border-bottom', '#999');
$('div').parent('.large').css('font-size', '14px');
İlk kod üst elemanı yakalarken, ikinci satırda ise seçme işlemini biraz daha daraltarak .large sınıfı tanımlı olan üst elmanı yakala diyoruz.
parents()
Belirlenen elemanın tüm üst elemanlarını bulmaya yarar.
$('li').parents().css('background-color', 'red');
$('li').parents("ul").css('background-color', 'red');
İlk satır li’nin tüm üst elemanlarını yakalarken, ikinci satır li’nin tüm ul etiketli üst elemanlarını yakalar.
closest()
En yakın üst elemanı bulmak içindir.
$(document).ready(function()
{
$('li.urunler').closest('ul').css('background-color', 'red');
});
HTML
<ul>
<li>Üst Menü
<ul>
<li class="urunler">Ürün 1</li>
<li class="urunler">Ürün 2</li>
</ul>
</li>
</ul>
İçiçe girmiş birçok listede yukarıdaki tanım ‘urunler’ sınıfı tanımlanmış öğenin ilk üst ul elemanını yakalamamıza yardım eder.
4 – Firebug ve console.log ile kodumuzu izlemek
Firebug’ın çalışma hayatımızdaki yerini biliyoruz. jquery ile hata yakalama amacı ile console.log kullanıyoruz. Daha önceleri javascript ile kod yazarken alert fonksiyonun çok kullanırdım. Şimdi aynı işi console.log yapıyor ancak popup çıkarıp bizi rahatsız etmiyor.
var count = 0;
while(count < 1000) {
count++;
console.log(count);
setTimeout("takistHesapla";, 1000);
}
yazın ve Firebug’ın console sekmesine bakın. Bu kod Chrome’da da çalışıyor.
Örneği görmek için tıklayınız. Tabi takistHesapla diye bieşy bulamadım diye size bin tane hata verecek oda gayet normal.
Bir uyarı işinizi yayına atarken bu satırı silin yoksa ie’de hata verir.
5 – Animasyon ve Efektleri Geciktirme (delay)
jQuery 1.4 ile birlikte gelen yeni bir özellik olan delay() animasyonlarımıza belli bir süre ara vermemizi sağlat, daha önceleri bu işi yapmak için setTimeout metodunu kullanıyorduk.
$("div").fadeIn().delay(4000).fadeOut();
Örneği görmek için tıklayınız.
seçtiğimiz katmana fadeIn efekti ver ve sonra 4000 milisaniye bekle ve sonra fadeOut efekti ver diyoruz.
6 – has() Metodu
jQuery 1.4 ile birlikte gelen bir başka yeni özellik has() metodudur. Daha önceki sürümlerde :has seçicisi vardı, şimdi has() metodu ile daha kolay yakalama işi yapabileceğiz.
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
Yukarıdaki kodda alt menüsü olan li elemanını yakalamak için bu metodu kullanabiliriz.
$('li').has('ul').css('background-color', 'red');
Örneği görmek için tıklayınız.
Şeklinde altında ul etiketi olan li’leri ki burada bir tane var oda list item 2 içeriğine sahip olandır.
Kaynaklar
- http://www.tripwiremagazine.com/2009/10/jquery-and-general-javascript-tips-to-improve-your-code.html
- http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx
- http://webdevmania.com/archive/top_10_jquery_snippets_including_jquery_1.4/
- http://addyosmani.com/blog/31-jquery-snippets/
- http://www.smashingmagazine.com/2010/08/04/commonly-confused-bits-of-jquery/
Adobe Dreamweaver CS5 Yenilikleri
25 Eki
Yazı Fatih HAYRİOĞLU tarafından Haberler kategorisine eklendi.
Adobe Dreamweaver editör olarak beğenerek kullandığım bir editör. Burada sizlere yeni sürümü ve yeniliklerini anlatmaya çalışacağım ve son olarakta beklentilerimi ve yeni sürümün bunları ne kadar karşıladığımı yazacağım.
Yeni sürüm ile birlikte gelen yenilikler ;
CSS Inspection
Aslında Live View özelliği bir önce sürümde de mevcut ancak bu sürümden tam anlamıyla geliştirilmiş bu özellik Inspect butonu yardımı ile gerçek zamanlı kodumuza müdahale edebiliyor, düzenleme yapabiliyoruz.
Bu özelliğe biz pek yabancı değiliz Firefox’un FireBug eklentisi bize bu imkanı sağlıyor aslında ve daha fazlasını sağlıyor. Bir önceki sürümde bunu tam ekleyemediklerini söylemiştik, bu sefer tam anlamıyla eklenmiş.
En büyük yeniliklerden birisi bu olmuş.
Adobe BrowserLab
Adobe firmasının daha önce açtığı bu çevirimiçi tarayıcı test etme aracı bu yeni sürüm ile birlikte programdan direk erişilebilir hale getirilmiş. Örnek sayfanızı direk siteye gönderip test edebiliyoruz.
Ben aslında bu konuda pek tatmin olmadım. Çünkü BrowserLab zaten yeterli bir araç değildi. IETester tarzı bir test aracı daha makbul olacak bir araç olabilirdi.
Her şeye rağmen bir artıdır ama eksik olduğu kesin.
CSS Aktik/Pasif
Mevcut kod üzerinde gezerken elemanlara atanan css özellikleri bir tıklama ile aktif ve pasif hale getirme özelliği.
FireBug ile alışık olduğumuz bu özellik yeni sürüm ile birlikte kullanıcının kullanımına sunulmaktadır. Güzel bir özellik.
CSS başlangıç sayfaları
Bir önceki sürüme göre daha fazla hazır sayfa yapısı imkanı sunuyor yeni sürüm bizlere.
Ben bu özelliği kullanmasam da kullananlar için artı bir özellik.
HTML5 ve CSS3 Desteği
Program ilk çıktığında beraber çıkmaması çok büyük bir eksiklikti, ancak sonradan bir güncelleme ile bu paketi eklemeleri hatalarını çok çabuk anlamları güzel oldu. HTML5 ve CSS3 tanımlarını otomatik tamamlama ile ekleyebliyoruz artık.
Hele CSS3′te farklı tarayıcılardaki bu önek karmaşasına bir çzöüm olması güzel oldu.
PHP Tabanlı CMS Desteği
