Hayiloglu!

Internet, Haber, Eğlence, Spor,

  • Yazıtipi boyutunu arttır
  • Varsayılan yazıtipi boyutu
  • Yazıtipi boyutunu azaltır
CSS

HTML 5′in yeni elementlerine bir göz atalım

Cumartesi, 07 Mart 2009 02:05
e-Posta Yazdır PDF
Kullanıcı Değerlendirmesi: / 1
ZayıfEn iyi 

Tags: html elementleri

HTML 5′in yeni elementlerine bir göz atalım

11 Ağust’ta yazdığım haberler içerisinde yer alan

“HTML5′in yeni elementleri” adlı makaleyi okudum

ve konuyu biraz araştırdım. Bu makaleyi baz alarak yeni elementler

hakkında genel bir özet çıkardım. Güzel elementler eklenmiş. Neyse yazıya geçelim.

Html’in yeni versiyon çalışmaları sürüyor. Şimdiye kadar bazı elemen

tler ve özellikler üzerinde mutabakat sağlanmış durumda.

HTML5′in yeni özellikleri hakkında burada kısa bilgi vererek

yenilikler hakkında bilgi edineceğiz.

Yapısal Elementler

Web sitelerini kodlarken belli yapısal kısımlara ayırırız. Üst kısım, içerik

kısmı, sol-sağ kolonlar, menü alanı, alt kısım ve içerik alanı.

HTML5 geliştiricileride bunları düşünmüşler ve bu alanların her biri için bir e

lement tanımlamışlar. Biz şu an kodlama yaparken bu alanlar için genel

elementini kullanmaktayız, yeni elementlerle bu tekil element(

) yerine her kısım için bir element kullanma imkanımız olacak.

Bu web sayfalarını kodlarken bize bir çok avantaj sağlaya

caktır. CSS kodlması açısındanda Buelementlere biraz göz atalım.

section: Kitabın bir bölümü, bölümün bir kısmı veya gerçekt

e HTML sayfamızın herhangi bir kısmını tanımlamak için kullanabiliriz.
header: Web sayfamızın üst kısım olarak belirlediğimiz kı

sımı tanımlamak için kullanabiliriz. ile karıştırmayalım.
footer: Web sitemizde alt kısım olarak belirlediğimiz kısı

mı tanımlamak için kullanabiliriz.
nav: Diğer sayfalara link verilen kısımlar, menü oluşturdu

ğumuz kısımları tanımlamak için kullanabiliriz.
article: Günlüğümüzdeki(blog) bir konu, ansiklopedi

deki bir bölümü tanımlamak için kullanabiliriz.

Anlamlı Blok Elementler

Yapısal elementlerden daha çok ayrıntıya inen elementlerd

e bulunmaktadır. Kısacabu yeni elementleri incelersek:

aside: İçerik ile ilişkili ayrıntılar, notlar vb alanlar için

içeriğin yanına iliştirilmiş alanları tanımlamak için kullanabiliriz.
figure: Genelde kullandığımız şekil ve açıklaması için e

klenmiş güzel element. Hem şekil hemde açıklmasını içeren bir element
dialog: Bu element ismindende anlaşıldığı gibi diyalog,

karşıklık sohbet içeren sayfaları daha kolay kodlamamız için eklenmiştir. Bu element



ve
elementlerini alt element olarak kullanır.
Anlamlı Satıriçin  Elementler

Html4′de bilgisayar kodlaması için satıriçin element olarak 5 kod var var,

code, kbd, tt, samp. Html5 bunlara bir kaç tane dahaeklemiş.

m(marked): m elementi işaretlenmiş metin olarak tanımlanabilir. Anahtar

kelime tabanlı çalışan ara motorları için biçilmiş kaftan olarak

değerlendirebileceğimiz bu element, programcılarında işine yarayacaktır.
time: Metin içindeki zaman bilgilerini normal içerikten ayırmamıza yarayan bir element

Bilgiye kolay erişimimizi sağlayan bir element.
meter: Meter elementi özel oranları tanımlayan sayısal değerleri için kullanılır.

Altı adet özniteliği vardır: value, min, low, high, max, optimum.
progress: İlerleyen prosesin durmunu göstermek için tanımlanır.

Yüklenen resimler için kullanılablir %45 yüklendi yazısını göstermek

için mesela. İki adet özniteliği vardır: value ve max.

Javascript yardımı ile kolaylıkla yükleme işlemlerimizi

yapabilmemizi sağlayacak güzel bir element.

Medya Elementerini

Gelişen web alemi bize artık görsel ve işitsel öğelerin daha çok

önem kazandığını gösteriyor. HTML’in bu yönü biraz zayıf kalıyordu bunun için HTMLgeliştiriciler iki adet element eklemişler.

video: Bir çok medya türünü destekleyen video elementi, görsel

medya dosyalarını sitemize  eklememizi kolaylaştıracaktır.
audio: İşitsel medya elementlerini sayfalarımıza eklemek için

kullanabilceğimiz bu elementin autoplay ve loop öznitelikleri var.

İnteraktif Elementler

HTML5 Web Aplication1.0 özel bölümünüde içermektedir.

Bunun anlamı HTML5 dinamik içeriğe yardımcı olacak

elementlerde içerecek olmasıdır. Yeni eklenen bu

elementler kullanıcı tercihlerine ve sayfanın sunucudan

yeni sayfa açılmasını beklemeden yapacamız işlemler için kullanılacaktır.

Sırası ile bu elementleriinceleyelim:

details: Detay elementi başlangıçta gösterilmeyen içerikleri tanımlamak için kullanılır.

legend özniteliği  detayın özetini tanımlamak için kullanılır.
altbilgi veya dipnot olarak kullanılabileceği gibi araç ipucu olarakta kullanılabilir.

Eğer open özniteliği kullanılırsa sayfada görüntülenir. Ayrıca kullanıcının

tetiklemesi ile gösterip gizleyebiliriz.
datagrid: Datagrid elementi etkileşimli listeler, veri tabloları ve ilişkili listeler i

çin tanımlanır. Bu element javascript yardımı ile çok güzel çalışmlar yapmamıza

yardımcı olacaktır. Bir çok veri ile ilişkili işlerimizi çözmemize yardımcı olacak

bir element, ajax ile kullanılan veri tabloları, listeleri, vb için hazırlanmış bir

element olarak algıladım ben.
menu ve command : menu elementi her biri kendi işlevini yapabilecek

command elementlerini içerir. Bir çok amaç için kullanılabilir.

type özniteliğinin iki özelliği mevuct toolbar ve popup. İçiçe menu

elementi kullanılabilir. Uygulama olarak Windows başlangıç menüsü,

popup tipi için örnek ise renk paletini verebiliriz.

Sonuç

Sonuç olarak şunu söyleyebilrimki nesne tabanlı bir kodlama dünyasına

uygunolarak genel elementler yerine daha özel elementler

kullanmamıza olanaksağlayacak olan Html5.0 bence çok

büyük yenilikler ve kolaylıklar sağlayacaktır.Daha temiz v

e basit kodlar ile sayfalarımızı oluşturabileceğimizi düşünüyorum.

Web Applications 1.0 ise başlı başına bir güzellik.

Bu standardın Ajax’a yardımcı vetamamlayıcı olarak görüyorum.

Salı, 08 Eylül 2009 21:45 tarihinde güncellendi
 

CSS3 Module: Paged Media

Cumartesi, 07 Mart 2009 02:03
e-Posta Yazdır PDF
Kullanıcı Değerlendirmesi: / 1
ZayıfEn iyi 

W3C son CSS3 taslaklarının da Paged Media özelliğini duyurdu. Paged Media sayfa çıktısını alırken kullanılacak bir çok özelliği kendinde barındırıyor. Sayfa numarası verme, marginler, boyutlar ve yerleşim, baş kısım ve alt kısım biligisi, kesme işareti kullanımı, resim yerleşimi gibi bir çok yeni özellik kullanmamızı olanak sağlıyor.

Ayrıntılı bilgi için tıklayınız

 

CSS İpucu 19: Tüm Tarayıcılar İçin CSS İle Saydamlık(Opacity) yeni

Cumartesi, 07 Mart 2009 01:59
e-Posta Yazdır PDF

Daha önce birçok kez bu konuda bana e-posta geldi. Buraya yazmanın mantıklı olacağını düşündüm.

kodu gösterpanoya kopyalayazdır?
  1. secici {  
  2.     opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */  
  3.     filter: alpha(opacity=75); /* IE lt 8 */  
  4.     -ms-filter: "alpha(opacity=75)"; /* IE 8 */  
  5.     -khtml-opacity: .75; /* Safari 1.x */  
  6.     -moz-opacity: .75; /* FF lt 1.5, Netscape */  
  7. }  

Örneği görmek için tıklayınız.

Kod aslında tek satır olması gerekir ki CSS 3 ile birlikte bu tek satır olacaktır. opacity: değer; tanımı ile halledeceğiz. Ama şu an yürürlükte olan tarayıcılar için yukarıdaki 5 satır kodu yazmalıyız.

Bu kodu yazmak o kadar da sorun değil, ama eğer bu kodu yazdığınız sayfanızı W3C doğrulamasından geçirirseniz aşağıdaki gibi bir hata alacaksınız.

donuklasma_val2

Bence W3C doğrulması çok önemli olmasada bazen şartlar doğrulama gerektirdiğinde(mesela müşteri istediğinde) bu sorunu çözmek için bir kaç yöntem var.

Bu yöntemlerden biri javascript fonksiyonu hazırlayıp bu fonksiyon yardımı ile elemanlarımızı saydamlaştırma;

kodu gösterpanoya kopyalayazdır?
  1. function donuklastirma(element, donukDeger){  
  2.     var oe = document.getElementById(element);  
  3.     // donuklastirma degeri  
  4.     oe.setAttribute("style", "opacity:"+ donukDeger +";")  
  5.     if (oe.style.setAttribute) // IE icin  
  6.     oe.style.setAttribute("filter", "alpha(opacity="+ donukDeger*100 +");")  
  7. }  

Örneği görmek için tıklayınız.

Diğer bir yöntemde ise ayrı bir css kodu yazıp bu kodu javascript ile ekleyebiliriz

kodu gösterpanoya kopyalayazdır?
  1. <script type="text/javascript">  
  2. document.write('<link rel="stylesheet" type="text/css" media="screen" href="style/donuklastirma.css" />');  
  3. </script>  

Cumartesi, 07 Mart 2009 02:04 tarihinde güncellendi
 

CSS İpucu 18: Optimizasyon İçin CSS Medya Dosyalarını Birleştirmek

Cumartesi, 07 Mart 2009 01:58
e-Posta Yazdır PDF

Bir çok web kod yazarı için sayfaların yavaş açılması

büyük bir sorundur. Bu sorunun çözümü için

çeşitli metotlar uygulanır. Farklı araçlar ile

testler yapılır çözümler üretilmeye çalışılır.

Sonuçta en kararlı hale ulaşılmaya çalışılır.

 

Bende bir test aracı ile(Firefox -

FireBug - YSlow) test ediyorum. Test ettiğim

siteler HTTP isteklerinin çokluğundan dolayı düşük puan alıyor.

Fazla sayıda css ve javascript dosyasının eklenmesi

bu soruna neden oluyor. Bunun için en kolay

ve basit yöntem css ve js dosyalarını birleştirmekten geçiyor.

 

 

 

Genelde projelermizde css dosyalarımızı genel

stil için ve yazıcı için olmak üzere ikiye ayırıyoruz.

 

kodu gösterpanoya kopyalayazdır?

<link rel="stylesheet" href="/style/iskelet.css" type="text/css" media="screen" />

<link rel="stylesheet" href="/style/yazici.css" type="text/css" media="print" />

Normal ve çıktı almak için bunları bir css dosyasında birleştirerek HTTP istek sayısını azaltabiliriz.

 

kodu gösterpanoya kopyalayazdır?

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

gibi iskelet.css içeriğinin yapısı ise aşağıdaki gibi olacaktır.

 

kodu gösterpanoya kopyalayazdır?

/*  all media  */

@media all

{

body    { color:#666; font:13px arial,

helvetica, sans-serif; padding:20px 0 30px 0; }

}

 

@media print

{

body    { color:#000; font:12px arial, helvetica, sans-serif; padding:0; }

}

şeklinde yaparak css dosyalarımızı tek dosya içerisinde toplayabiliriz.

 

Daha fazla sayıda css dosyası kullanmamız

durumunda ise sunucu veya istemci taraflı

kod yardımı ile css veya js dosyalarımızı

tek bir dosya gibi gösterebiliriz. Bu konuya

burada girmeyeceğim. Konu ile alakalı çalışmaların linklerini aşağıda veriyorum.

Salı, 08 Eylül 2009 21:46 tarihinde güncellendi
 

CSS İpucu 17: Float Uygulanmış Elementleri Tam Kapsayamama Sorunu İpuçları

Cumartesi, 07 Mart 2009 01:57
e-Posta Yazdır PDF

1- Firefox 3′de form elemenalarının Tıklanamaması Sorunu

Daha önce bir kaç kez bahsettiğim ve web kod yazarlarının birçok zaman karşılaştığı ‘Float uygulanmış elementlerin kapsayamama sorunu’ bugün xpur(Gökhan)’un bir sorusu üzerine bu yazıyı yazma gereği duydum.

Kapsayamama sorunu yaşadığımız katman içinde eğer selectbox var ise Firefox 3′de bu selectbox tıklanabilir olmuyor. Açılmıyor yani

Kodumuz aşağıdaki gibi

kodu gösterpanoya kopyalayazdır?
  1. .kapsayamamaSorunu: after {  
  2.     content: ".";  
  3.     display: block;  
  4.     height: 0;  
  5.     clear: both;  
  6.     visibility: hidden;  
  7. }  
  8. .kapsayamamaSorunu {display: inline-block;}  
  9. /*IE-mac de bu bolumu sakla \ */  
  10. * html .kapsayamamaSorunu {height: 1%;}  
  11. .kapsayamamaSorunu {display: block;}  
  12. /* IE-mac bu bolumu saklam artik */  

sorunu çözümü ise .kapsayamamaSorunu ile :after arasındaki boşluğu kapatmak .kapsayamamaSorunu:after

kodu gösterpanoya kopyalayazdır?
  1. .kapsayamamaSorunu:after {  
  2.     content: ".";  
  3.     display: block;  
  4.     height: 0;  
  5.     clear: both;  
  6.     visibility: hidden;  
  7. }  

Küçük bir nokta olsa da zamanı gelince insanın çok zamanını alıyor.

2- Sorunun Kısayolu

Bu konuda hakkında bir başka ipucuda float’uygulanmış nesnelerde bu sorun ile çok fazla karşılaşıyoruz, ben eskiden her bir sorunlu eleman için bu kodu yazıyordum. Sonra bunu bir sınıfa atayıp gerekli yerlerde bu sınıfı kullanmanın daha avantajlı olacağını düşündüm.

kodu gösterpanoya kopyalayazdır?
  1. .kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}  
  2. .kapsayamamaSorunu {display: inline-block;}  
  3. /*IE-mac de bu bolumu sakla \ */  
  4. * html .kapsayamamaSorunu {height: 1%;}  
  5. .kapsayamamaSorunu {display: block;}  
  6. /* IE-mac bu bolumu saklam artik */  
kodu gösterpanoya kopyalayazdır?
  1. <div id="icerik" class="kapsayamamaSorunu">  
  2.     <ul>  
  3.         <li>  
  4.             <select>  
  5.                 <option value="-1">Seçiniz</option>  
  6.                 <option value="1">Deneme1</option>  
  7.                 <option value="2">Deneme2</option>  
  8.             </select>  
  9.         </li>  
  10.     </ul>  
  11. </div>  
  12. <div class="resimAlani kapsayamamaSorunu">  
  13.     <img src="images/deneme.jpg" width="150" height="80" />  
  14. </div>  

#icerik ve .resimAlani bu sorun ile karşılaştığımızı düşünelim. Tek tek bu kodu yazmaktansa .kapsayamamaSorunu isimli bir sınıf tanımlayıp sorunumuz ile karşılaştığımız her yerde bu sınıfı tanımlarız. Tek tanımla ile işimizi hallettik.

 
Daha Fazla İçerik...
  • «
  •  Başlangıç 
  •  Önceki 
  •  1 
  •  2 
  •  3 
  •  4 
  •  5 
  •  6 
  •  7 
  •  8 
  •  9 
  •  10 
  •  Sonraki 
  •  Son 
  • »
Sayfa 1 - 19

by Online

Şu anda 9 konuk çevrimiçi

Üye Formu

Giris yap / Kayit OL