Resimde görüldüğü gibi başlık yapmak için bir bg resmi hazırlayıp başlığın altına tanımlıyordum. Sonra acaba ben bunu resim kullanmadan yapabilirmiyim diye düşündüm. Float uygulanmış elemanların kapsayamama sorunu diye ismini uzattığım clearfix sorunu aklıma geldi, aslında bu bir sorun değil kabul idi. Tarayıcılar olayı böyle kabul ettiği için içinde float uygulanmış bir eleman olan kapsayıcı eleman içeriğine göre yükseklik almıyor ve sorun oluşturuyor.

Peki, burası ile ne alakası var diyorsanız. Gelelim bura ile olan alakasına; şöyle bir şey geldi aklıma eğer bu başlık elemanına alt çizgisi eklersem ve  içine bir eleman koyup float uygularsam başlık eleman içindeki kapsayamayacak ve istediğim çözüme kavuşacağım. Sadede gelelim ve hemen bir örnek yapalım.

HTML kodu;

<h1><span>Ged tortor odio</span></h1>

CSS kodu;

h1{border-bottom:3px solid #9faf41;}
h1 span{float:left; padding:0 10px; background-color:#111; margin-left:10px; margin-top:-15px; display:block; font-size:24px}

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

Örnekte dikkat edeceğimiz bir iki husus var. h1 içie koyduğumuz span’ın ardalan rengini zemin ile aynı yaparak yazının altındaki çizgileri yok ediyoruz, ayrıca bu span’a sağdan ve solda padding vererek yazıya tam yapışmasını engelliyoruz.

Metot sadece bir başlığın olduğu ve tek bir stilin olduğu durumlardan daha çok, site içinde birden fazla alt çizgi rengi ve şekli olan sitelerde daha kullanışlı olacağı düşüncesindeyim. Tabi karar size kalmış.

Metodu IE6+, Firefox, Chrome, Opera ve Safari destekliyor. Burada tek dezavantaj ise fazladan span kullanımıdır.

Kalın sağlıcakla

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

Bu sürümdeki en büyük atılım bence bu dur. PHP tabanlı CMS’leri WordPress, Drupal ve Joomla tam anlamıyla düzenleme imkanı sağlıyor bu yeni sürüm.

Bu CMS’leri geliştirenler için biçilmiş kaftan bence yeni sürüm.

Kolay entegrasyon, düzenleme, dosya upload etme vb. özellikleri ile tam bir CMS editörü olmuş Dreamweaver. Dinamik yapılı bu CMS’leri tam anlamıyla bir statik sayfa gibi kolayca değiştirebilme ve test edebilmeyi sağlıyor bizlere. Ayrıca otomatik tamamlama özelliği ile çok büyük kolaylık sağlıyor.

PHP özel sınıfı kod ipuçları

PHP ile oluşturulan özel sınıflar içinde otomatik tamamlama özelliği eklenmiş. PHP’ye yönelik bir editör olma eğilimi sergilemiş yeni sürümde Dreamweaver, bence mantıklı Visual Studio’yu geçemeyeceğini anlayınca PHP’ye yönelmiş.

Dinamik İlişkili Dosyalar

Bir önceki sürümde statik sayfalar için sunulan ilişkili dosyalar özelliği şimdi dinamik dosyalar içinde eklenmiş. Dreamweaver üzerinden PHP yaznalar için çok güzel bir özellik bence.

SVN(Subversion) Desteği Geliştirilmiş

Daha öncedende sunulan SVN(Subversion) özelliği bu sürüm ile birlikte bayağı bir geliştirilmiş. Diğer SVN programları ile uyum ve çerçevenin geliştirilmesi bu özelliği daha kullanılabilir yapmış.

Business Catalyst® ile uyum

Programlamaya gerek kalmadan güçlü çevrimiçi işletmeler oluşturmak için Dreamweaver ile Adobe Business Catalyst® hizmeti uyumu sağlanmış.

Basit Site Kurulumu

Mevcut site kurulumu penceresi biraz daha geliştirilerek kullanıcıya daha fazla seçenek ve kolaylık sunulmuş. Site kontrolünü Dreamweaver üzerinden sağlayanlar için güzel bir gelişme.

Widget Browser Özelliği

Bu özellik bize diğer insanların geliştiridiği yapıları sitemize ekleme imkanı sunuyor. Güzel bir özellik eğer uygulama sayısı artarsa gayet kullanışlı bir özellik

Özellik hakkında daha fazla bilgi için  http://tv.adobe.com/watch/learn-dreamweaver-cs5/using-the-widget-browser/ videoyu izlemenizi tavsiye ederim.

İlişkili Dosyaları Filtreleme

Dreamweaver çalıştığımız doküman ile ilgili dosyalarıda gösteriyor, yeni sürüm ile birlikte dinamik dosyalarıda göstermeye başlıyor. Bu bazen karmşaya neden oluyor, bunu içni bir çözü üretilmiş. Filtreleme menüsünden itediğimiz dosya tipini veya dosyaları filtreleye biliyoruz. Bu sayede ilişkili dosyaları daha düzenli bir hale getirme imkanımız oluyor.

Sonuç

Yeni sürümün CSS ve PHP üzerine yoğunlaşmış bir sürüm olmuş. PHP CMS geliştirenler için bir çok yenilik var. CSS için getirilen yenilikler ve daha fazlası zaten mevcut kullanımımda vardı benim. Gerek FireBug ve gerekse IETester. Benim asıl beklentim büyük bir ivme kazana javascript kütüphaneleri hakkında bir gelişme idi. Örneği jquery kütüphanesi ile çok çalışan biri olarak jquery otomatik tamamlama özelliği olması benim çok sevindirirdi, ne yapalım bundan sonraki sürümleri bekleyeceğiz artık bunun için.

Yukarıda belirttiğim gibi sitelerimiz farklı platformlarda ve tarayıcılarda test için AdobeLabs yeterli gelmiyor bence daha fazla gelişmiş bir araç ile bu açık kapatılmalıdır.

Kalın sağlıcakla.

Kaynaklar

• http://tv.adobe.com/watch/learn-dreamweaver-cs5/getting-started-gs-what-is-dreamweaver-cs5-/ (video)
• http://www.mymac.com/2010/07/cs5-dreamweaver-whats-new/
• http://webdesign.about.com/od/dreamweaver/p/differences-dreamweaver-cs5-and-dreamweaver-cs4.htm
• http://www.wpbeginner.com/news/wordpress-themes-made-easy-with-adobe-dreamweaver-cs5/
• http://www.thinkdigit.com/Features/Adobe-Dreamweaver-CS5-Review_4420.html
• http://www.pcmag.com/slideshow_viewer/0,1205,l%253D249944%2526a%253D249895%2526po%253D9,00.asp?p=y
• http://cs5.org/?p=1373
• http://www.adobe.com/tr/products/dreamweaver/whatsnew/

İki yöntem var aslında bunun için.

Birinci Yöntem

body {
    height: 100%;
    width: 100%;
    margin: 0;
}

şeklinde bir kod. Ancak bu kod ne yazık ki Firefox ve Opera’da çalışmıyor. Yada çalışması için html sayfamızdan DOCTYPE’ı silmemiz gerekiyor. Bence bu pek mantıklı bir kullanım değil, o nedenle ben ikinci yöntemi öneriyorum.

İkinci Yöntem

swfobject.embedSWF("test.swf", "myContent", "100%", "100%", "9.0.0", "expressInstall.swf");

Genişlik ve yüksekliğini 100% veriyoruz ve css kodumuzu yazıyoruz.

/* hide from ie on mac \*/
html {
    height: 100%;
    overflow: hidden;
}

#myContent {
    height: 100%;
}
/* end hide */

body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #090;
}

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

CSS kodumuz biraz daha fazla olan bu yöntem DOCTYPE kullanımı durumunda da çalıştığı için bence en kullanışlı yöntem. Geçen hafta anlattığım flashobject ile kodumuzu sayfaya ekledik.

CSS kodu biraz incelersek;

Kodun ilk iki tanımını ie5 Mac kullanıcılarından gizlemek için.

Htlm’e yüzde yüz yükseklik tanımı yapıyoruz ve flash dosyamız sayfanın tamamını kaplayacağı için sayfa kenarındaki kaydırma çubuğuna gerek kalmayacaktır, ie de kaydırma çubuğunu kaldırmak için overflow:hidden kodunu yazıyoruz.

Daha sonrada flash’ı eklediğimiz katman yüksekliğinide yüzde yüz yaparak elemanın tam sayfayı kaplamasını sağlıyoruz.

Son olarakta body elementinin yüksekliğini yüzde yüz yapıp margin ve padding değerlerini sıfırlıyoruz ve görünmese de işi garantiye almak için bir backgroun-color tanımı yapıyoruz. Bu kadar.

Kaynaklar

• http://blog.deconcept.com/2005/01/02/100-height-and-100-width-xhtml-flash-embed/
• http://www.kirupa.com/developer/mx2004/fullscreen.htm

Html’in yeni versiyon çalışmaları sürüyor. Şimdiye kadar bazı elementler 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 element tanımlamışlar. Biz şu an kodlama yaparken bu alanlar için genel <div> elementini kullanmaktayız, yeni elementlerle bu tekil element(<div>) yerine her kısım için bir element kullanma imkanımız olacak. Bu web sayfalarını kodlarken bize bir çok avantaj sağlayacaktı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çekte 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. <head> 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, ansiklopedideki bir bölümü tanımlamak için kullanabiliriz.

Anlamlı Blok Elementler

Yapısal elementlerden daha çok ayrıntıya inen elementlerde 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 eklenmiş 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 <dd> ve <dt> 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 ve 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.

Kaynaklar

• http://www.ibm.com/developerworks/xml/library/x-html5/
  
• http://www.w3.org/html/wg/html5
  
• http://xhtml.com/en/future/x-html-5-versus-xhtml-2/
• http://www.whatwg.org/specs/web-apps/current-work/
• http://www.bernzilla.com/item.php?id=876
• http://edward.oconnor.cx/2007/04/marking-up-figures