HTML5 Form özellikleri
Bu yazıda HTML5 ile birlikte gelen yeni form özelliklerini anlatmaya çalışacağım. Web sitelerinde kullanılan formlarda form alanının dolu olup olmadığı, rakam gerektiren alanlara harf girilmemesi, email adreslerinin doğru yazılması ve input alanları için açıklama girilmesi gibi çeşitli kontroller sürekli olarak kullanılmakta ve önem arz etmekte. HTML5, genelde javascript ile yapılan bu kontrolleri form alanlarına kolayca eklenebilen attribute dediğimiz nitelik tanımlamalarıyla başarılı bir şekilde çözmeyi başarmış.
Aşağıda bu yeni özelliklerin detaylı bir şekilde incelemesi yer alıyor. Parantez içinde de hangi tarayıcılarda çalıştığını belirttim.
Zorunlu Alanlar (Chrome, Opera)
Oluşturduğunuz formda Ad Soyad, Adres gibi alanların doldurulmasını zorunlu kılmak için kullanılan bir özellik.
<input name=”adsoyad” type=”text” required>
Formda bu alanın gerekli olduğunu göstermek için de basit bir css tanımlaması ekliyoruz.
input:required {
border: 1px red solid;
}
Böylece form açıldığında input alanımız kırmızı bir çerçeveye sahip olacak ve bu alan doldurulmadan post işlemi gerçekleşmeyecek.
Placeholders (Chrome, Safari)
Placeholder özelliği input alanlar için bir açıklama girmenizi kolaylaştırır. Önceden kullanılan value özelliğinin görevini yapar. Ancak input alana tıkladığınızda açıklama kaybolur. Dışarı tıkladığınızda açıklama tekrar input alanda görülür. Bunu javascript teknikleri ile yapmak zorundaydık.
<input name="adsoyad" placeholder="Lütfen adınızı ve soyadınızı giriniz">
Autofocus (Chrome, Safari)
Bu özellik form açıldığında imlecin hangi alanda konumlandırılacağını belirtir.
<input name="arama" autofocus>
Email alanları (Chrome, Opera)
Email adresinin yanlış yazılması çoğu zaman form gönderme işlemlerinde sorun oluşturmaktadır. Bunu önlemek için yine javascript teknikleri ile email adresinin doğru olup olmadığını kontrol etmek zorundaydık. Bu özellik ile ek bir kod yazmadan bu kontrol gerçekleştirilebilir.
<input name="email" type="email">
Pattern attribute (Chrome, Opera)
Form gönderilmeden önce kontrol edilirken bazı alanlara istenmeyen harf ya da rakamların yazılmamasını isteriz. Çoğunlukla telefon bilgileri istenen alanlara rakamdan başka bir karakter yazılmadığını kontrol etmek gerekir. Rakam ya da belirli bir harf kombinasyonunu kontrol etmek için regex kodu dediğimiz kalıplarla bu alanlar kontrol edilir.
<input type="text" name="Telefon" pattern="^(05)[0-9][0-9][1-9]([0-9]){6}$" placeholder="Telefon" required>
Bu kalıp bir cep telefonu numarasının doğrulunu kontrol eder.
Tarih Seçiciler (Opera)
Bazı alanlarda takvimden tarih seçtirmek için css ve javascript ile oluşturulmuş takvim uygulamaları kullanılır. Bu özellik sayesinde ek bir koda ihtiyaç kalmıyor. Benim yaptığım testlerde en iyi sonucu Opera veriyor. Takvim uygulaması gerçekten çok şık. Özellik, Chomre’da da çalışıyor fakat biraz ilginç çalışıyor. Deneyip görün :)
<input name="gun" type="date">
Bunlar da kullanabileceğiniz diğer tarih ve zaman seçicileri.
<input type="date"> <input type="datetime"> <input type="month"> <input type="week"> <input type="time">
Kaynak : http://www.catswhocode.com/blog/enhance-your-web-forms-with-new-html5features
PHPMailer ile SMTP kullanarak form mail gönderme
Php ile form mail işlemleri genelde mail() fonksiyonu kullanılarak yapılır. Fakat bu fonksiyon spam maile müsait olduğu için genelde hosting firmaları tarafından engellenir. Php ile mail göndermenin diğer bir yolu da SMTP protokolünü kullanmaktır. SMTP protokolü sunucuda varolan bir mail hesabıyla oturum açarak, bu hesap üzerinden mail göndermenizi sağlar.
SMTP ile mail göndermek için yazılmış olan çok başarılı bir kütüphane bulunmakta. PHPMailer.
Şimdi PHPMailer'in kullanımını anlatmaya çalışacağım.
İlk önce şu adresten PHPMailer'i indiriyoruz. rar dosyasını açtıktan sonra ihtiyacımız olan class.phpmailer.php ve class.smtp.php dosyalarını formmailimizin bulunduğu dosya ile aynı dizine atıyoruz.
Form mailimizin php kısmındaki kodlar şu şekilde:
require_once("class.phpmailer.php");
$mail = new PHPMailer();
$mail->AddAddress("mail@alanadi.com","Bizim Site");
$mail->Subject = "İletişim Formu";
$mail->Body = "Mail içeriği";
$mail->IsSMTP();
$mail->Host = "mail.alanadi.com";
$mail->SMTPAuth = true;
$mail->Username = "formmail@alanadi.com";
$mail->Password = "123456";
$mail->IsHTML(true);
$mail->From = $_POST['Email'];
$mail->FromName = $_POST['Isim'];
$mail->Send();
PHPMailer class'ımızı çağırıyoruz ve bir değişkene atıyoruz.
require_once("class.phpmailer.php");
$mail = new PHPMailer();
Bundan sonraki kodlar PHPMailer'in özelliklerinin kullanıldığı kodlardır.
$mail->AddAddress("mail@alanadi.com","Bizim Site");
Mailin gönderileceği adresi belirtir. Bu satır çoğaltılarak birden fazla adrese mail gönderilebilir.
Ayrıca başka bir satır ekleyerek mailimizi BCC olarak başka adreslere de gönderebiliriz.
$mail->AddBCC("mail@baskaalanadi.com","Başka mail");
$mail->Subject = "İletişim Formu";
Gidecek mailin başlığını belirtir.
$mail->Body = "Mail içeriği";
Mailimizin içeriğini belirtir. Form mail gönderirken genelde tablo olarak gönderilmesini isteriz. Buraya istediğimiz gibi tablo kodlarını ekleyerek gönderilmesini sağlayabiliriz. Yalnız bunun için aşağıda yazmış olduğum $mail->IsHTML(true); kodunu eklemek zorundayız.
$mail->IsSMTP();
Kullanacağımız protokolün SMTP olduğunu belirtir.
$mail->Host = "mail.alanadi.com";
SMTP sunucu adresi
$mail->SMTPAuth = true;
true olarak belirtilmişse sunucuda oturum açılacağı anlamına gelir.
$mail->Username = "formmail@alanadi.com";
Mail hesabımızın kullanıcı adı. Genelde mail adresi ile aynı olur.
$mail->Password = "123456";
Şifremiz
$mail->IsHTML(true);
Göndermek istediğimiz içerikte HTML kodlarına izin verilmesi gerektiğini belirtir.
$mail->From = $_POST['Email'];
Gönderilecek mailde kimden kısmını belirtir(E-mail).
$mail->FromName = $_POST['Isim'];
Gönderilecek mailde kimden kısmını belirtir(Ad Soyad).
$mail->Send();
Maili gönderir.
PHPMailer mail göndermek için 25 nolu portu kullanır. Bazı hosting firmaları ve tabiki internet servis sağlayıcıları 25 numaralı portu engellemektedir. Bu yüzden yeni bir satır ekleyerek kullanılacak portu değiştirmemiz gerekir. Şu anda TTnet 587 numaralı portu açık tutuyor.
$mail->Port = 587;
Hepsi bu kadar. Sorularınızı iletişim bölümünden ya da yazı altına yorum ekleyerek iletebilirsiniz.
Moon
2009'un en iyi filmlerinden biri olarak bahsetmek hiç te abartı olmaz. The Hitchhiker's Guide to the Galaxy ve Confessions of a Dangerous Mind gibi filmlerden tanıdığımız Sam Rockwell'in başrol karakteri Sam Bell'i canlandırdığı filmin yönetmeni Duncan Jones.
Spoiler içerebilir :
Gelecekte yeni bir enerji kaynağı keşfeden bir firmanın ayda kurduğu bir üste geçen olayların anlatıldığı filmde klasik uzay, teknoloji, klonlama gibi kavramların işlendiğini görüyoruz. Çok etkileyici bir atmosferi ve sürükleyici bir konusu olduğunu söyleyebilirim.Filmi asıl film yapansa klonların ruh halini izlemek. Aşk, yalnızlık, bunalım gibi duyguların bir klon üzerindeki etkisi en iyi bu şekilde yansıtılabilirdi.
http://www.imdb.com/title/tt1182345/

Moon
Flash CS4 3D Rotation Tool Kullanımı
Flash CS4 ile birlikte gelen yeni bir araç ta 3D Rotation Tool. Nesneleri 3 boyutlu olarak çevirmenize olanak sağlayan bu araçla ilgili yaptığım bir örneği aşağıda bulabilirsiniz.
1- Yeni bir dosya oluşturuyoruz. Bu dosya mutlaka AS3 dosyası olmalıdır.
File >> New >> Flash File (ActionScript 3.0)
2- 3D görüntüsünü elde etmek istediğimiz nesnemizi hazırlıyoruz. Ben bir text alanı kullandım. Vektörel çizimler de kullanılabilir.
3- Nesnemizi MovieClip haline getiriyoruz. (Nesneyi seçip F8 tuşuna basarak MovieClip'i seçiyoruz)
4- 3D Rotation Tool'u seçiyoruz (Kısayolu W). Nesnemizin üzerinde 3 farklı çizginin oluştuğunu görebilirsiniz. İlk frame'de nesnemizin birinci halini bırakalım. Animasyonumuzun uzunluğuna göre istediğimiz bir frame'e gidip yeni bir keyframe ekliyoruz (F6).

5- Bu yeni frame'de nesnemizin üzerinde bulunan çizgileri kullanarak 3D görüntümüzü oluşturuyoruz.

İsteğinize göre yeni keyframeler ekleyerek animasyonunuzu geliştirebilirsiniz.
Hepsi bu kadar. Çalışma dosyasını buradan indirebilirsiniz.
Flash CS4 Bone Tool Kullanımı
Flash'ın yeni sürümüyle birlikte çok kullanışlı bir araç da Flash efsanesine eklendi. Adı Bone Tool olan bu araç, nesnelerin eklem yerlerini belirleyip çok kolay bir şekilde animasyon yapmanızı sağlıyor.
Bone Tool ile ilgili bir örnek yapalım;
1- Yeni bir dosya oluşturuyoruz. Bu dosya mutlaka AS3 dosyası olmalıdır.
File >> New >> Flash File (ActionScript 3.0)
2- Hareketlendireceğimiz vektörel nesneyi çiziyoruz. Ben cin ali gibi bir şey çizdim. Kafanıza göre artık :)

3- Araç panelindeki Bone Tool'u seçiyoruz. ( Kısayolu X )
4- Bone Tool ile doğrusal çizgiler çizerek hareketlendirmek istediğimiz uzuvları belirliyoruz.

5- Artık nesnemize eklemlerini kazandırmış olduk. Bundan sonrası motion tween ya da shape tween kullanırken yaptığımız gibi keyframeler ekleyerek animasyonu oluşturmak.
Çalışma dosyasını buradan indirebilirsiniz.
Flash Xml yüklemede önbellek problemi
Flash içine XML yüklemek istediğiniz zaman XML dosyası tarayıcı tarafından önbelleğe alınır ve bir sonraki ziyarette önbellekten okunur. Özellikle PHP ya da ASP ile oluşturulan Fotoğraf Galerisi ya da Haberler gibi değişebilir XML dosyaları kullanıyorsanız, bu önbellekleme sorun yaratabilir.
Bunu önlemek için Flash içine XML dosyasını yüklerken ona bir değişken veririz ve sayfa her yenilendiğinde tarayıcıya farklı bir XML dosyası yükletiyormuşuz gibi gösteririz.
Örnek olarak :
var a:Date = new Date;
xmlData.load("galeri.xml?killer="+a.getMilliseconds());



