-
Css3, Xhtml ve jQuery ile Dikey Tab Menü Yapımı
Uzun bir aradan sonra yeniden merhaba. Bu makalemizde yine sizlerle bir navigasyon uygulaması paylaşacağız.
Bu uygulamamızda Css3, Xhtml ve jQuery ile ikon destekli dikey (vertical) tab menü (veya tab navigasyon da diyebiliriz) uygulaması yapacağız. Tab menümüzü oluşturduğumuz aşamaları da makalemiz sonunda sizlerle konuşacağız. Dilerseniz hemen kodlarımızı yazmaya başlayalım.
http://www.t-infection.com sitesinden alıntıdır
-
CSS ile yuvarlak köşe yapımı
Sadece HTML ve CSS ile yuvarlak köşe yapman yöntemi CSS3 ile bizlere sunuldu. Fakat IE 6-7-8 bu kodları tanımıyor ve istediğimiz standartlara ulaşamıyoruz.
Sizlere çok basit bir yöntem ile nasıl yapabildiğinizi anlatacağım.
Öncelikle iç içe 2 tane div elementi tanımlıyoruz:
<div class="”box”">
<div class="”box1”">
<p>Yuvarlak Köşeler</p>
</div>
</div>Daha sonra şu CSS kodlarını yazıyoruz:
.box {background:none repeat scroll 0 0 #84002E;margin:0 1px;padding:1px 0;}
.box1{background:none repeat scroll 0 0 #84002E;margin:0 -1px;padding:2px;}İşlem bu kadar. Rahatlıkla kullanabilirsiniz. Bütün HTML tag'ları ile rahatlıkla kullanabilirsiniz. Önemli olan iki tane iç içe elementler olması.
Bu göz yanılmasıyla yapılan köşe yuvarlama tekniği ile linkler hazırlayabilirsiniz. CSS3 desteklemeyen browserlardan korkmayın artık.
Desteklenen browserlar: IE 7-8, Firefox, Opera, Safari, Chrome
-
HTML Mailing
İ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!!!!!!
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.
Not: Yazı http://www.fatihhayrioglu.com/ sitesinden alıntıdır
-
Google App Engine üzerinde 13 basit adımda Django
Google, eposta hizmeti, dosya alanı, proje yönetim sistemi derken şimdi de web uygulamaları için altyapı ve barındırma desteği vermeye başladı. Artık Python ile hazırladığımız web uygulamalarımızı Google’ın altyapısından faydalanarak sunabileceğiz. Google App Engine, henüz önizleme sürümü aşamasında bir hizmet ama şimdiden ısınmaya başlamakta fayda var.
Thomas Brox Røst’un blogunda basit bir eğitsel buldum ve çevirebildim. Umarım konunun meraklılarına en azından fikir verir.Not: Aşağıda yazanları deneyebilmeniz için Python 2.5 veya üzeri bir sürüm kullanmanız gerekiyor.
Pardus kullanıcıları “Pardus 2008″ ile Python 2.5 kullanıyor olacaklar. Az biraz daha beklemek gerekecek
11 Nisan 2008, Türker Sezer (Çeviri)
8 Nisan 2008, Thomas Brox Røst (Özgün metin)Bu eğitselde arkaplanda datastore kullanan basit bir Django uygulamasının Google App Engine üzerinde nasıl çalıştırılacağını göstereceğim. Yazıyı yazarken, Django’ya aşina olduğunuzu varsayacağım.
Güncelleme: Tüm dosyaları buradan indirebilirsiniz. “main.py” içindeki “sys.path” değerini düzelttiğinize emin olun.
Adım 1: Bir uygulama adı kaydedin ve yönlendirmelere göre geliştirme setini kurun.
Adım 2: Uygulamanız için bir dizin yaratın. Bu eğitselde uygulamamın adı “mashname” olacak.1. tmp$ mkdir mashname
2. tmp$ cd mashname
Adım 3: Yeni dizininize “main.py” adında bir dosya ekleyin:main.py
1. import os, sys
2. os.environ["DJANGO_SETTING_MODULE"] = "mashname.settings"
3. sys.path.append("/home/mew/tmp/mashname")
4.
5. # Google App Engine kütüphaneleri
6. from google.appengine.ext.webapp import util
7.
8. # Djangoyu ayarlarını yeniden yüklemeye zorla
9. from django.conf import settings
10. settings._target = None
11.
12. import django.core.handlers.wsgi
13. import django.core.signals
14. import django.db
15. import django.dispatch.dispatcher
16.
17. # Hataları kaydet.
18. #django.dispatch.dispatcher.connect(
19. # log_exception, django.core.signals.got_request_exception)
20.
21. # Rollback olay yakalayıcısının kaydını sil
22. django.dispatch.dispatcher.disconnect(
23. django.db._rollback_on_exception,
24. django.core.signals.got_request_exception)
25.
26. def main():
27. # WSGI için bir Django uygulaması yarat
28. application = django.core.handlers.wsgi.WSGIHandler()
29.
30. # WSGI CGI yakalayıcısını bu uygulama ile çalıştır
31. util.run_wsgi_app(application)
32.
33. if __name__ == "__main__":
34. main()Bu yerelde test edebilmek için eklediğim Python yolu dışında temel olarak buradaki ile aynı dosya. Ayrıca DJANGO_SETTING_MODULE değerini de ayarladım-bu belki App Engine üzerinde çalışırken gerekli olmayabilir. Hata kaydını çalıştıramadığım için iptal etmek zorunda kaldım.
Adım 4: Aynı dizine app.yaml adında bir dosya ekleyin.app.yaml
1. application: mashname
2. version: 1
3. runtime: python
4. api_version: 1
5.
6. handlers:
7. - url: /.*
8. script: main.pyBurada uygulama adının doğru yazıldığına emin olun.
Adım 5: “mashname” dizininizde, yeni bir django projesi yaratın1. tmp/mashname$ django-admin.py startproject mashname
(Django’nuzun olması gerektiği gibi çalıştığını varsayıyorum)
Adım 6: Şu an uygulamanızı test edebiliyor olmalısınız:1. tmp/mashname$ cd ..
2. tmp$ dev_appserver.py mashname
3. INFO 2008-04-08 19:08:10,023 appcfg.py] Checking for updates to the SDK.
4. INFO 2008-04-08 19:08:10,384 appcfg.py] The SDK is up to date.
5. INFO 2008-04-08 19:08:10,404 dev_appserver_main.py]Running application mash
6. name on port 8080: http://localhost:8080Tarayıcınız ile http://127.0.0.1:8080/ adresine girin. Django’nun standart “It worked!” mesajını görüyor olmalısınız.
Adım 7: Proje içinde bir Django uygulaması yaratın:1. tmp$ cd mashname
2. tmp/mashname$ python mashname/manage.py startapp main
Adım 8: Şimdi sıra bir model eklemeye geldi. Tüm ziyaretçilerin kaydını datastore’a yazan ve onların IP adresini ve ziyaret zamanını gösteren basit bir uygulama yaratacağız. “~/tmp/mashname/main/models.py” dosyasını düzenleyin. Dosya şöyle görünmeli:models.py
1. from google.appengine.ext import db
2.
3. class Visitor(db.Model):
4. ip = db.StringProperty()
5. added_on = db.DateTimeProperty(auto_now_add=True)Django modellerini kullanmadığımız için veri tabanını eşlemeye gerek yok.
Adım 9: Şimdi “Visitor” modeline veri eklemekten ve önceki ziyaretçilerin kayıtlarını göstermekle sorumlu görünümümüzü yaratacağız. views.py dosyasını aşağıdaki gibi düzenleyin (models.py ile aynı dizinde):1. from django.http import HttpResponse
2.
3. from mashname.main.models import Visitor
4.
5. def main(request):
6. visitor = Visitor()
7. visitor.ip = request.META["REMOTE_ADDR"]
8. visitor.put()
9.
10. result = ""
11. visitors = Visitor.all()
12. visitors.order("-added_on")
13.
14. for visitor in visitors:
15. result += visitor.ip + u" visited on " + unicode(visitor.added_on) + u"<br/>"
16.
17. return HttpResponse(result)
Adım 10: Son olarak, urls.py dosyasını görünümümüzü gösterecek şekilde düzenleyelim.urls.py
1. from django.conf.urls.defaults import *
2.
3. urlpatterns = patterns("",
4. (r"^$", "mashname.main.views.main"),
5. )
Adım 11: Uygulamanızı test edebilirsiniz. (6. adımdaki gibi) Herşey yolunda gidiyor olmalı. Her sayfa yenilendiğinde, “Visitor” modeline yeni bir kayıt ekleniyor ve ekrana basılıyor.
Adım 12: Uygulamanızı “Google App Engine”e yükleyin:1. tmp$ appcfg.py update mashname
İlk yüklemede Google hesabınız için eposta adresinizi ve şifrenizi girmelisiniz.
Adım 13: İyi eğlenceler! Bu uygulamanın sonucunu görmek için, http://mashname.appspot.com/ adresine bakabilirsiniz.
http://www.tsdesign.info/blog sitesinden alıntıdır..