HTML5 İle Gelen Form Elementleri İçin Placeholder Özelliği

Bu Yazı HTML5 Ve Siz Adlı Serinin 4 Yazısından 4.si

Placeholder’ın tanımını yapmadan bu yazıya başlayamayacağım,
Placeholder HTML5 ile Gelen İnput Tipleri adlı yazımda bahsettiğim tüm input değerlerine placeholder="Burada Gözükür" Şeklinde eklenerek kullanıcı oraya tıklayana kadar gözüken ve tıkladığı zaman kaybolan yazı alanını sağlayan bir özellik.

Zamanında jQuery ile yaptığımız jQuery ile Form Elementlerine Değer Atamak adlı makalemde javascript ile yaptığımız işlemi artık sadece placeholder="Bu Yazı Tıklayınca Kaybolur" şeklinde kolayca ekliyebiliyoruz.

Kullanımı

<input type="text" placeholder="Placeholder Örnegi" />

Placeholder özelliği HTML5 ile Gelen İnput Tipleri adlı yazımdaki bir çok input tipinde geçerlidir.

CSS ile Düzenlemesi

Sadece input alanlarını seçmek için;

input::-webkit-input-placeholder {
    color:    #999;
}
input:-moz-placeholder {
    color:    #999;
}

Tüm Değerleri Seçmek İçin;

::-webkit-input-placeholder {
    color:    #999;
}
:-moz-placeholder {
    color:    #999;
}

Forumdaki Konuda Tartisin

18 Aralık 2011 (66 gün Önce) | 233'kez İncelendi Ve 0 Yorum Yapıldı
HTML, HTML Tüyolar

HTML5 İle Gelen From Elemanlarında Required Özelliği

Bu Yazı HTML5 Ve Siz Adlı Serinin 4 Yazısından 3.si

Html 5 ile gelen bir diğer özellik ve gerçekten tonlarca javascript kodu yazmanızın önüne geçen ve javascript / jQuery ile arası olmayanlar için bitmek bilmeyen dakikaları ortadan kaldıran required="true" ifadesi peki bu kod nedir ne işe yarar incelemeye başlayalım.

Nedir? Ne işe yarar?

Required kelimesi türkçe tercümesi “gereken”, “gerekli” anlamına gelmektedir.
Burdanda anlayacağınız gibi form alanlarında oluşturduğunuz yazı, şifre, vs gibi alanlarda bu ifade eklenerek php / javascript kontrolü yapmadan browser aracılığıyla kontrol sağlamak mümkün.

Tabi yine burda desteklemeyen browserlar söz konusu olucak onlarıda inceliyecek olursak.

İE: Desteklemiyor.
Firefox: 4.0 +
Opera: 9.5 +
Chrome: 3.0
Safari: Desteklemiyor.

(Her halükarda php ile bir kontrol yaptırmak kesinlikle zorunlu ama en azından javascript ile uğraşmaya gerek kalmaz.)

Kullanımı

<input type="text" id="isim" required="true" />

Aynı şekilde type="password" , email, number, url, range ve daha fazlasında kullanabilirsiniz. (Not: HTML 5 ile gelen yeni input Tipleri adlı makaleyi okuyabilirsiniz.

Forumdaki Konuda Tartisin

18 Aralık 2011 (66 gün Önce) | 177'kez İncelendi Ve 0 Yorum Yapıldı
HTML, HTML Tüyolar

Zen-Codeing Nedir? Nasıl Kullanılır?

Kod editörleriniz için olan Zen-Codeing eklentisi yüksek hızda “HTML, XML, XSL” kodlaması yapmanıza yarayan kullanışlı ve işe yarayan bir editör eklentisidir.

Not: Editör nedir? Editör olarak tanımladığımız şey web sitelerinizi tasarlarken / kodlarken kullandığınız programlardır.

Zen-Codeing Nasıl Kullanılır?

html:5>div#toplayici_div>div#baslik_alani+div#icerik_alani+div#footer_alani

Yukarıdaki şekilde yazılmış kodları otomatik olarak html yapısına dönüştüren yani 


<!DOCTYPE HTML>
<html lang="en—US">
<head>
	<meta charset="UTF—8">
	<title></title>
</head>
<body>
	<div id="toplayici_div">
		<div id="baslik_alani"></div>
		<div id="icerik_alani"></div>
		<div id="footer_alani"></div>
	</div>
</body>
</html>

Anında bu şekile getiren bir eklentidir.

Şuan için Zen—Codeing tarafından desteklenen özelliklerden bazıları

  • ID ve CLASS özniteliklerini atamak: div#sayfa.alan.icerik
  • Özel öznitelikler: div[baslik], a[title="merhaba dünya" rel], td[colspan=2]
  • Element Çoğaltma: li*5 ifadesi size
  • etiketinden 5 adet oluşturucaktır
  • Element numaralandırma için $ karakteri kullanın: li.madde$*3 ifadesi size
  • etiketinden 3 adet oluşturup, $ işaretini 1 den başlayarak 3 e kadar yazıcaktır.
  • Çoklu ‘$’ İşaretininin kullanımı: li.madde$$$ → li.madde001 şeklinde çıktı vericektir.
  • Gruplar oluşturarak ve bunların içine elementler ekleme imkanı: div#sayfa>(div#baslik>ul#menu>li*4>a)+(div#sayfaici>(h1>span)+p*2)+div#footer .Şeklinde tüm bir dökümanı tek bir satır yazarak oluşturabilirsiniz.

Daha fazlası için Tıklayın.

Desteklediği Editörler

  • Dreamweaver (Windows, Mac)
  • Sublime Text (Windows)
  • Sublime Text 2 (crossplatform)
  • UltraEdit (Windows)
  • TopStyle (Windows)
  • GEdit (crossplatform)
  • BBEdit/TextWrangler (Mac)
  • Visual Studio (Windows)
  • EmEditor (Windows)
  • Sakura Editor (Windows)
  • NetBeans (crossplatform)
  • Chrome Extension
  • Userscript for Greasemonkey
  • Geany
  • RJ TextEd
  • AkelPad
  • WIODE web—based IDE
  • BlueFish

Nereden İndirilir?

Code.Google zen-coding Sayfasından Editörünüze Uygun Olanı İndirip Kurabilirsiniz.

2 Aralık 2011 (82 gün Önce) | 169'kez İncelendi Ve 0 Yorum Yapıldı
CSS, Diğer, Genel, HTML, HTML Tüyolar
200x200

HTML LocalStorage Nedir? Nasıl Kullanılır? [jQuery]

Bu Yazı HTML5 Ve Siz Adlı Serinin 4 Yazısından 1.si

Download Kaynak
Dosyaları
Demo Canlı
Görünüm

LocalStorage Nedir?

LocalStorage websitesi üzerinde tarayıcınız ile yaptığınız değişiklikleri websitesine değil sizin tarayıcınızın kendi belleğine kayıt eden bir javascript kodudur. Daha anlaşılır olabilmesi için demo adresine bakabilirsiniz. HTML Sayfada hiç bir sql sorgusu olmadan yazdığınız bir yazının veya görsel bir ayarın kullanıcılarınıza göre kayıt edilmesini sağlayabilirsiniz.
Çeşitliliği siz kendi imkanlarınızla geliştirebilirsiniz. Kodları inceliyelim. Devamını Oku »

17 Kasım 2011 (97 gün Önce) | 492'kez İncelendi Ve 0 Yorum Yapıldı
HTML, HTML Tüyolar, Jquery & Ajax

iPhone Ve iPodlara Sitenizin Sık Kullanılan İkonunu Ekletin

Bir WordPress Eklentisini Kurcalarken (WordPress Mobile Edition plugin) Farkettiğim Bir Özellik Olan iPhone, iPod, iPad Gibi Apple Ürünlerine Sık Kullanılan İkonu Ekleme Özelliği Oldu.

Açıkcası Apple Kullanıcısı Olmadığımdan (4 Yıldır) Tam Olarak Nasıl İşlediğini Bilmiyorum Tam Bir Sonuçta Bulamadım. Ama Sanırım Kullanıcı Siteyi Ziyaret Ettiğinde Otomatik Olarak Oluşan Bir Şey Değil Siteniz Bookmark Olarak İşaretlemek Zorunda.

Lafı Daha Fazla Uzatmadan Anlatıma Geçmek İstiyorum.

Önce İkon Oluşturalım

İkon’unuzun Cihazlarda Düzgün Çalışması İçin Bir Kaç Kural Söz Konusu.
1- 57 x 57 pixel Boyutunda Olmalı.
2- Transparan Bir Görüntü Olmamalı.
3- Parlaklaştırıcı Ve Kabartıcı Efektler Kullanmayın.
Not: 3. Maddeyi Açıkcası Test Etmedim Fakat Okuduğum Makalelerde Bu Konuya Baya Değinilmişti.

Son Görünüm Tüm Uygulamaları Takip Ederseniz

Son Görünüm Tüm Uygulamaları Takip Ederseniz
Muhtemelen Resimi Düzgün Hazırladığınızda Yukarıdaki Resim Gibi Gözükücektir.

Eklenmesi Gereken Kodlar

Ekleyeceğimiz Kodlar Aynı favicon Kodları Gibi Birşey. Bir Kaç Araştırmamda Aralarında Fark Göremedim. Sadece Apple’ın Tarayıcılarında Yorumlanmaları Ve İşlev Görmeleri Söz Konusu.

<head> Tagları Arasına Aşşağıdaki Kodları Eklemeniz Yeterli Olucaktır.
Bu Kodlarda İki Opsiyon Söz Konusu,
1- Parlak İkon
2- Parlak Olmayan İkon

Parlak İkon Eklemek

<link rel="apple-touch-icon" href="/images/iphone_icon.png" />

Parlak Olmayan İkon Eklemek

<link rel="apple-touch-icon-precomposed" href="/images/iphone_icon.png" />

6 Ağustos 2011 (201 gün Önce) | 417'kez İncelendi Ve 0 Yorum Yapıldı
HTML, HTML Tüyolar, WordPress