‘html5’ etiketi için sonuçlar

Firefox 4

Mart 22nd, 2011 • 16 yorum CSS, Haberler, HTML5
Etiketler: , , , , ,

Mart ayı internet tarayıcıları için bayağı yoğun geçiyor. Mart’ın başlarında Google Chrome 10 çıktı, Chrome o kadar sık sürüm geçiyor ki ne zaman 10 oldu anlayabilmiş değilim. Opera’da ise bu duruma biraz daha buçuklu bir cevap verdi Opera 11.10 sürümünü beta olarak yayınladı. Ardından uzun süredir beklenen İnternet Explorer 9 çıktı, normal kullanıcı isteklerini karşılayan bizim gibi geliştiricileri yine eksikleri ile düşündüren bir sürüm. Son olarak bu gün Firefox 4 çıktı. Burada sizlere FireFox 4’ün yeniliklerinden bahsedeceğim. Firefox 4’de aslında başta 3.7 olarak adlandırıldı sonra geçen sene çıkacaktı direkten döndü derken mart’a kadar bekletti bizi.  Yeni özellikleri inceleyelim.

Yenilenen Arayüz

Yeni nesil bir çok tarayıcıda gördüğümüz içeriğe daha fazla alan bırakan yeni tasarım kabulünü Firefox 4’de de görüyoruz. İnternet Explore 9’da dediğimiz gibi hepsi ortalama olarak doğru yolu buluyor.

Daha derli toplu bir arayüze kavuşmuş Firefox4. Gerçi o kadarda problememiz yoktu arayüzü ile ilgili, ama yenilenmiş daha hoş olmuş. Sekmeler Chrome’daki gibi üste alınmış. Ana bir Menü Sağ üst köşeye Firefox başlığı ile eklenmiş. Ana Sayfa ve Yerimleri arama kutusu yanına yerleştirilmiş. Ayrıca Yeni Eklenti Düzenleme arayüzü eklenmiş.

Performans

Bencee en büyük artıyı hızdan, performanstan yana olmuş. Bellek kullanımda uzun süreli kullanımda şişmeler oluyor ve can sıkıcı sonuçlar doğruyordu. İlk kullanım deneyimlerime göre gayet başarılı bir gelişme olmuş bu konuda. Google Chrome’un öncülüğünde artık tüm tarayıcıların önceliğini hız konusuna veriyor. Bence bu güzel bir gelişme.

Yenilenen javascript motoru(Jägermonkey) ve HTML5 motoru sayesinde bir önceki sürüme göre 6 kat daha hızlı olduğunu söylüyor Mozilla. Bunu kullanırken hissediyorsunuz. Ayrıca “hardware acceleration” sayesinde hızlanma daha fazla hissediliyor. İnternet Explorer 9’dan hatırladığımız bu özellik grafik işlemciyide devreye sokuyor.

Eklentileri güncellemeleri arkaplanda yükleyerek eklentilerin eski sürümlerdne dolayı yavaşlamasını engelliyor. Eklenti güncellemeleri sonrası tarayıcı kapatıp açmaya gerek yok artık.

Yeni Sekme Özellikleri

Panorama özelliği sayesinde çok fazla sekme kullanan kullancılar için bir düzeni sağlamak artık daha kolay olacak.

Sekmeli yapıya geçtikten sonra bir çok insan sekmelere alıştı, bunun sonucu olarakta sekmeleri düzenleme ihtiyacı duydular. Bu ihtiyacı çok iyi gören Firefox mart ayındaki bu yeni tarayıcı sürümleri içinde belki en iyi özelliği kullanıcılarına sundu.

Ayrıca sekmeleri sabitleme özelliğide eklendi. Daha önce Chrome’dan alışık olduğumuz uygulama sekmeleri sabitleme özelliği artık Firefox’da da var. Çok kullandığımız özellikleri veya uygulamaları sabitleyerek devamlı göz önünde tutuyoruz. Sabitlenen sekmeler görüntü olarakta sadece ikonları görünür kalıyor, bölylelikle fazla yer kaplamıyor.

Senkronize Firefox (Firefox Sync)

Daha önce eklenti olarak sunduğu bu özelliği artık program içinde geliyor. Farklı araçlar ile internete girenler için ve farklı yerlerde tarayıcısının özelliklerini her kullandığı yere taşımak isteyenler için güzel bir özellik. Tüm tarayıcı bilgileriniz ve ayarlarınızı her kullandığınız yerden erişmenizi sağlıyor bu özellik.

Web Standartları Desteği Arttı

  • HTML5 yorumlama motoru geliştirildi,
  • HTML5 Form elemanları, form doğrulama ve form özellikleri desteğini arttırıldı,
  • HTML 5 Yapısal elemanları desteği sunuyor. <article>, <section>, <nav>, <aside>, <hgroup>, <header> ve <footer>,
  • HTML5 hidden özelliğini destekliyor,
  • Yeni HTML5 özelliklerini destekliyor: <mark>, <figure> ve <figcaption>,
  • WebSocket APı desteği sağlıyor,
  • WebGL desteği sunuyor,
  • Google’un çıkardığı WebM video formatı desteği sunuyor,
  • SVG animasyonu SMIL desteği sunuyor,
  • Medya elementlerinin(video, audio) buffered özelliğini destekliyor,
  • Medya elementlerinin(video, audio) preload özelliğini destekliyor,
  • CSS geçiş(transitions) özelliği desteği sunuyor,
  • Matematiksel işlemler yapmayı sağlayan -moz-calc özelliği desteği sunuyor,
  • CSS dokunma özellikleri desteği sunuyor,
  • -moz-font-feature-settings, -moz-tab-size, resize özelliklerini destekliyor
  • CSS3 :-moz-handler-crashed, :-moz-placeholder, :-moz-submit-invalid, :-moz-window-inactive, :invalid, :optional, :required ve :valid sözde sınıflarını ve :-moz-focusring sözde seçici desteği sunuyor
  • -moz-background-size yerine background-size, -moz-border-radius yerine border-radius ve -moz-box-shadow yerine box-shadow isim değişikliklerini yapıyor
  • Firebug’dan alışık olduğumuz Web Konsol özelliğini sunuyor

Diğer Özellikler

Beni izleme(Do Not Track) özelliği eklenmiş,  Çoklu dokunma özelliği ve daha güvenli gezintiler için bazı özellikler sunuyor. Ayrıca Chrome’dan alışık olduğumuz otomatik güncelleme özelliği ile biz indirmeden yeni sürümler kurulacak artık. Bu özellik tüm tarayıcılara gelirse çok güzel olur.

Sonuç

Mart ayı tarayıcılar için kendilerini gösterme zamanı olarak geçiyor. Her yeni özellik bizi heyecanlandırıyor. Gelişen web teknolojilerine ayak uyduran tarayıcılar ayrıca yeni ve kullanışlı özelliklerde sunuyor. Firefox’un hız sorununu bu sürümde düzelttiği kanısına varsam da uzun süreli kullanımlardaki performansını görmeden kesin bir şey söylemek zor.

Firefox’a FireBug ile olan göbek bağım nedeni ile benim için Firefox birincil tarayıcımdır ve bu yeni sürüm ile birlikte bu daha çok pekişecektir.

Son olarak rekabet güzel şey.

Yeni nesil tarayıcıların Hız testi http://lifehacker.com/#!5784396/browser-speed-tests-firefox-4-internet-explorer-9-chrome-11-and-more

Kaynaklar

Internet Explorer 9

Mart 15th, 2011 • 11 yorum CSS, Haberler, HTML5
Etiketler: , , ,

Dün(14 Mart) akşamı Microsoft İnternet Explorer tarayıcısını son sürümü olan 9′un final sürümünü yayınladı. Yeni arayüzü, geliştirilmiş performansı, Windows 7 entegrasyonu vd. özellikleri ile dikkat çekiyor. 

Web mecrasında çalışanları tarayıcıları ve yetenekleri konusunda çok iyi bilgi sahibi olması gerekir. Helede Arayüz Geliştiricileri için çok önemlidir. Çünkü kodumuzu yazarken farklı tarayıcılara göre yazıyoruz. 

Bu yazımda İnternet Explorer 9′un önemli özelliklerinde bahsedeceğim. 

Yeni Görünüm

En büyük değişimlerden biri görünümde gerçekleşmiş. Yeni nesil tarayıcılardaki anlayış ile hareket edilmiş menü ve adres çubuklarının kapladığı alan en aza indirilerek gösterilen sayfa alanı genişletilmiştir. 

Yukarıda görüldüğü gibi gittikçe tarayıcılar orta noktada buluşuyorlar.

Bunun dışında;

  • Sekmelerin yapısı ve görünümüde değiştirilmiş.
  • Yeni sekme açıldığında karşımıza çıkan boş ve anlamsız bir sayfa yerine split görünmlü en sık açtığımız siteler listeleniyor.
  • Yeni bir bildirim alanı eklenmiş. İndirilen dosyalara ait bilgililerin gösterilmesi, popup pencerelerini ait bilgiler, güvenliğe ait uyarılar, şifre kayıtları vd. bildirimleri artık tarayıcının alt kısmında gösteriliyor.
  • Dosya yüklemek için kullanılan Yükleme Yöneticisi kısmı yenilenmiş ve kullanışlı bir yapıya kavuşturulmuş.

Standartlar ve Performans

İnternet Explorer 9′un alt yapısal olarak en büyük yeniliği GPU destekli yani "Hardware Acceleration" destekli yeni javascript tarama motoru(çakra) sayesinde web sitelerini daha hızlı yorumluyor. 

İnternet Explore 9′un geneline baktığımızda diğer tarayıcılara göre en büyük avantajı GPU destekli tarama motoru olarak görünüyor. Bu sayede web sayfalarını masaüstü programlar gibi hızlı ve beklemeksizin kullanım imkanı sunmayı düşünüyor. GPU destekli "Hardware Acceleration" kastımız şudur; grafik desteğini bilgisayar işlemcisinden(cpu) grafik işlemcisine(gpu) taşımayı sağlayan javascript motoru sayesinde ana işlemci üzerindeki yükü dağıtarak daha fazla verim almayı sağlıyor. Buda bize web’de görsel bakımdan zengin içerikli siteleri daha hızlı gezme imkanı sağlıyor.

Bu yenilenen ve hızlandırılan tarama motorları HTML5 desteğini sunuyor. Burada şöyle bir liste var. Destekleme konusunda İnternet Explorer’un eski sürümlerine göre çok büyük eklemeler var, ancak diğer tarayıcıların son sürümlerini dikkate aldığımızda neredeyse yarı yarıya bir eksiklik var.

http://www.findmebyip.com/litmus

Sitesini incelemenizi öneriyorum. 

Aşağıda İnternet Explorer 9′un desteklemediği özelliklerin belli başlıları listesi var.

  • Application Cache (offline)
  • Web Workers (threads in JavaScript)
  • HTML5 Forms (validation mechanism, CSS3 selectors)
  • JavaScript Strict Mode
  • ForeignObject (embed external content in SVG)
  • SMIL Animations (SVG animations)
  • File API
  • WebGL (3D)
  • CSS3 Transitions (for animations)
  • CSS3 Text Shadow
  • CSS3 Gradients
  • CSS3 Border Image
  • CSS3 Flex box model
  • ClassList APIs
  • FormData
  • HTML5 History API
  • Drag’n Drop from Desktop

Pek iç açıcı bir tablo değil.

Performansla ilgili bir çok yayınlanan grafik var. Bunlara bakıldığında İnternet Explorer 9 kendi ailesinin en hızlı ve yeni nesil tarayıcılara yaklaşan performansı var. 

Windows 7 ile Sorunsuz ve Tümleşik Çalışma

Masaüstünüzü ikiye ayırarak geniş ekranlarda iki farklı siteyi tek ekran görme imkanı sağlayan bir yapıyı kullanabilirisiniz. 

Windows 7′nin programlar için sunduğu en sık kullanılan sitelere daha hızlı erişimi sağlayan yapı web sitelerinde sağlanmış. Sık kullandığımız web sitelerini programlar gibi alt barımıza sabitleyebiliyoruz.

Eklenti Desteği ve Eklenti Performans Göstergesi

Eklenti Performans göstergesi bize eklentilerin ne kadar zaman kaybına neden olduğunu gösteriyor. Biz bu verilere göre eklentiyi kaldırıyor veya bize lazım ise kalmasına karar veriyor. Bence diğer tarayıcılarında edinmesi gereken bir özellik bu.

Gelişmiş Adres Çubuğu

Adres çubuğu hem arama yapmamıza, hemde web sitelerinde gezmeye yarayan bir yapıya kavuşturulmuş. Buna "Tek Kutu" adı verilmiş. Bir çok yeni nesil tarayıcının yöneldiği bu sisteme İnternet Explorer 9′da getirilmesi güzel.

Diğer tarayıcılardan elimizin alıştığı ve bize çok hız kazandıran bu yapı tüm tarayıcılar için güzel bir gelişme.

Sonuç

Sonuç olarak şunu söyleyebilirim ki yukarıda açıkladığım ve araştırdığım kadarı ile bir çok yönü ile gayet başarılı bir tarayıcı olarak görünüyor İnternet Explorer 9, ancak gerek HTML5 ve gerekse CSS3 özelliklerini destekleme konusundaki eksiklikleri beni düşündürüyor. Anlayamadığım bir olay varki bir çok yönden gelişmiş bir tarayıcı sunmasına rağmen nasıl oluyorda bu özellikleri desteklemiyor, anlam verebilmiş değilim. Ayrıca Windows XP’ye yüklenemeyecek olmasıda ilginç.

Chrome’daki güncelleme mantığı ile gelen bir yapıya sahip olsa idi bu durumda bir türlü geçiştirilebilirdi, ancak böyle bir yapıda olmadığını görünce üzülüyorum açıkçası. Hala %60 seviyelerinde kullanıcısı olan bir tarayıcıdan daha sorunsuz bir tarayıcı çıkarmasını bekliyordum. 

Mevcut tarayıcıları düşündüğümde belki sadece GPU nedeni ile belki kullanılabilir ama bu sene içinde çıkacak diğer tarayıcılarında bu özelliği kazanacağını ve İnternet Explorer 9 ile belki geçici bir yükselme yaşansa bile daha sonra düşüşün devam edeceğini düşünüyorum.

Kaynaklar

Tablo mu? Div mi? Karmaşasına Son Noktayı HTML5 koydu

Aralık 1st, 2010 • 19 yorum CSS, HTML5
Etiketler: , , , , ,

Ben bu siteyi açtığımdan beri CSS tabanlı yani div ile kodlamanın önemini ve avantajını anlatmaya çalışıyorum. Bu geçiş o kadar kolay olmadı ve hala Türkiye’de birçok site tablo alt yapını kullanıyor. Bunda standartların bu yönde bir telkini olmamasının önemi çoktur. Uzun süredir yazmayı düşündüğüm bu makaleyi yazmak bu güne nasipmiş.

HTML5 bizim div ile oluşturduğumuz yapı yerine kendi yapısal etiketleri yerleştirdi ve bu hareketli ile tablolu yapı ile site yapısına son darbeyi indirdi.

Alışkanlıkları kolay bırakamayan insanlar hala tablo ile kodlamaya devam ediyor. Ben çalışma hayatımın belli bir bölümün tablolu yapı ile kodlama yaparak geçirdim, daha sonra div ile kodlamaya başladım. Her ikisininde kolaylıklarını ve zorluklarını gördüm. Div ile kodlamanın tek dezavantajı dikeyde ortalama diyebilirim. Onun dışında tablolu yapıya göre avantajlıdır. Aşağıda genel başlıklar ile div’li yapının tablolu yapıya olan avantajlarından bahsedeceğim.

  • Daha hızlı sayfa yükleme zamanları
    Tabloların yapısından kaynaklanan fazla kod ve kod karmaşası yazılan kodun boyutunu arttırır buda sitenin daha yavaş yüklenmesine nedendir. Siteyi hızlandırmak için divli yapıda çeşitli yöntemler vardır. Örn:(CSS sprite tekniği)
  • Daha Düşük Barındırma ücretleri
    Daha az yüklenme zamanı barındırma ücretleri ve bant genişliğinin az kullanılması demektir ve bunun sonucu barındırma hizmeti aldığımız şirkete daha az ödeme yaparız. Küçük sitelerde değilde büyük çaplı sitelerde bu konu büyük önem kazanır.
  • Site düzenlemek daha daha kolay
    Tablolu yapının zorluklarından biri karmaşık yapısından dolayı düzenlemek çok zor olur. Div ile hazırlana sitelerde düzenleme yapmak daha kolay olur
  • Tekrar tasarlama daha ucuzdur
    Hazır sistemlerde gördüğümüz gibi(wordpress vb.) aynı yapı üzerine farklı tasarımların adapte edilmesi kolaydır.
  • Web sitesinde Görsel tutarlılık vardır
    Tek yerden(css) kontrol edilen div’li yapı tablolu yapıya göre daha tutarlı olur.
  • Daha iyi SEO için
    Daha az kod olması ve kodlama yapısının tablolu yapıya göre daha düzenli olması arama motorlarının indekslemesi için bir avantajdır. Ayrıca h1, h2, h3 … ve ilgili elementlerin yerinde kullanılması ile arama motorlarına daha uygun kodlama yapabiliriz. Ayrıca CSS ile birçok javascript ile yapabileceğimiz işleri yapabiliriz. Örneğin menüler gibi.
  • Hızlı web sitesi çapında güncellemeleri
    CSS ile kontrol edilen siteler daha hızlı kontrol edilir ve düzenlenir. Bu projelerin daha hızlı oluşması için bir avantajdır.
  • Takım çalışmalarına daha uygundur
    Web sitesi önyüzü ve arka planı ayrımı yapılır. Bu sayede daha organize site üretimi yapılabilir. Arayüz geliştirici ve programcı arasında daha kolay ve güzel iletişim sağlanır. İki ayrı koldan iş yürür.
  • Kullanılabilirlik ve Erişilebilirlik Artar
    Farklı tarayıcılara göre kod yazmak daha kolaydır. ie6 ile uğraşırken bu başlığı pek inandırıcı bulmayabilirsiniz, ancak eskiden tablolu yapı zamanımda Netscape ile ie5.5 ile az uğraşmazdık ve bir çok yerinde sabunlardık(es geçerdik)

    Div ile kodlama yapılırken yazılan kodlar css yardımı ile farklı araçlar için ayrı ayrı kodlanmadan sadece css kodu değiştirilerek elde edilebilir. Mesela yazıcıdan çıktı almak için print medya tipi kullanılan css yorumlanır, benzer şekilde mobil araçlar için handle medya tipli css dosyası kullanır. Şimdi iPone, iPad içinde benzer ayrımı yapabiliyoruz.

  • Daha karmaşık düzenler ve tasarımlar
    Tablolar ile oluşturulan karmaşık yapılı siteler bazen içinden çıkılmaz haller alabiliyordu, ancak div ile kodlama yaparken birçok yapı kolay bir şekilde oluşturulabiliyor.
  • Boş GIF kullanımı
    Tablolu kodlamada düzeni sağlamak için kullandığımız 1×1 lik bir saydam gif hazırlanır ve tablo düzeni bu gifler yardımı ile sağlanır. Div ile kodlamada böyle bir ihtiyaca gerek yoktur. Bu fazla kod ve yükten bizi kurtarır.
  • Geleceğe dönük bir yapıdır
    HTML5 ile birlikte gelen yeni etiketler ve HTML5’in yapısı div ile kodlamanın devamı niteliğindedir. Daha önce yazdığım HTML5’in yapısal elemanları adlı makaleye göz atın.

Sonuç olarak şunu söyleyebilirim ki, 2002’den beri div ile kodlama yapıyorum ilk başlarda çok zorlanıyordum, hatta ilk projemde(koc.net) yarı div yarı tablolu bir yapı kurdum zorluklarında dolayı. Ama şimdi daha fazla kaynak, örnek mevcut, birçok yöntem teknik ve araç  ile div’li yapıda kodlama yapmak artık daha kolay.

Hala tablo ile kodlama yapanlara önerim bir sonraki projenizi muhakkak div ile yapın ve ne kadar zorlansanız da tabloya geri dönmeyin, yani gemileri yakın.

HTML5’in filizlenmeye başladığı bir dönemde bu konuya dikkat çekmek istedim.

Kalın sağlıcakla

Kaynaklar

HTML5: Doküman Yapısını Oluşturan Elemanlar

Kasım 27th, 2010 • 9 yorum HTML5
Etiketler: , ,

HTML5 ve CSS3 hayatımıza girmeye başladı. Her ne kadar Microsoft nedeni ile tam olarak kullanmasakta birçok makale ve örnek uygulamayı takip ediyoruz. Hala geliştirilmekte olan özellikleri ile bu yeni teknolojilerin hayatımıza girişi bize birçok güzellik kazandıracaktır.

Bir çok makale okuyorum ve uygulama görüyorum ama HTML5 ile bir şey yapmak daha nasip olmadı bana. HTML5 hakkında okuduklarım ve araştırdıklarım konulardan bir tanesi de konu başlığından anlaşılabileceği gibi. HTML dokümanının yapısını oluşturan elemanlar hakkında ufak bir yazı yamayı planladım. Aslında mevcut HTML’de farkını yazacağım. Daha bir sadeleştirilmiş diyebiliriz.

DOCTYPE

Doğru DOCTYPE Kullanımı hakkında bir makalem vardır. Doctype, dokümanın tipi gösteriyor yorumlayıcıya(tarayıcıya). Bu tanımlar çok uzun metinler içeriyordu ancak HTML5 bu tanımı kısaltmış ve çok güzel yapmış.

Şimdiye kadar ve hala kullanmakta olduğumuz bir doctype örneği,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Yukarıdaki HTML etiketi bize bu html dokümanının xhtml 1.0 olduğunu ve Transitional ise hem HTML hemde XHTML kurallarının bu dokümanda geçerli olduğunu gösteriyor. Peki HTML5’de bu işi nasıl yapıyoruz.

<!DOCTYPE html>

Bu kadar, kısa ve hafıza da kalıcı. HTML kodlarını Not Defteri ile  yazdığım dönemlerde çok çekerdim bu Doctype tanımlarında. Git bir yerden örneğini al falan. Sonra Dreamweaver bunu otomatik ekliyordu da yazmaktan kurtulmuştum. Açıkçası ben hiç bir zaman yukarıdaki HTML5 öncesi kodu aklıma yazamadım.

Doctype Etiketinin kapama etiketi ve işareti yoktur ve küçük büyük harf duyarlılığı yoktur.

HTML5 öncesi sürümler SGML kökenli diller olduğu için DTD tanımlarına gereksinim duyardı ancak HTML5 SGML kökenli olmadığı için buna gerek duymaz. 

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
...
</body>
</html>

Peki burada bir sürüm numarası yok nasıl sonraki sürümler ile bunu ayıracağız?

Burada şöyle bir şey var HTML5 geliştirilirken eğer buraya bir sürüm numarası verilse idi mevcut bütün web siteleri bu kapsam dışında kalacaktı, ama bu şekilde bir tanım ile eski ve yeni tüm dokümanlar aynı kefeye konmuş oldu. Geçmişide destekleyen bir yapıya kavuşturulmuş oldu.

Aslında yeni nesil tarayıcılar bir tanım yapılmasa daha standart modda belgeyi tanımladığı için Doctype’ın pek bir geçerliliği kalmamış idi ama yinede bir tanım yapmak iyidir. İE’nin ne yapacağı belli olmaz.

<html> Elemanı

Html dokümanlarını çevreleyen kapsayıcı bir elemandır <html> html5 öncesinde tanımımız

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Şeklinde idi. Buradaki xmlns değeri bu dokümanın anaçatısının http://www.w3.org/1999/xhtml kullandığını gösteriyor. HTML5 anaçatısı belli olduğu için tekrar tanımlamaya gerek duymuyor ve ayrıca iki adet dil tanımınında gereksiz olduğunu kabul ediyor ve sonuçta html5’teki tanımımız;

<html lang="en"></html>

şeklinde oluyor.

<head> içi tanımlar

HTML5 sadece Doctype tanımını değil ayrıca <head> içinde kullandığımız etiketleride ciddi manada basit hale getirmiştir.

Karakter kodu için kullandığımız 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Yerine HTML5 karışılığı

<meta charset="UTF-8">

Gayet basit ve akılda kalıcı.

Gelelim script eklemek için kullandığımız koda;

<script type="text/javascript" src="dosya_adi.js"></script>

HTML5′de ise;

<script src="file.js"></script>

Benzer şekilde ilişkilendirilmiş dokümanlar için kullandığımız

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

yerine HTML5′de

<link rel="stylesheet" href="style-original.css" />

İşin kısacası, tüm tanımları olabildiğince kısaltmışlar. Süperde yapmışlar, şimdiye kadar bize çektirdikleri eziyet neydi kardeşim.

Sonuç olarak bir HTML5 basit yapısı

<!DOCTYPE html>
<html lang="">
<head>
 <meta charset="utf-8">
   <title></title>
   <meta name="description" content="" />
     <meta name="keywords" content="" />
   <meta name="robots" content="" />
</head>
<body>
</body>
</html>

Şeklinde olacaktır.

Kaynaklar

Adobe Dreamweaver CS5 Yenilikleri

Ekim 25th, 2010 • 12 yorum Haberler
Etiketler: , , , , , , , ,

Adobe Dreamweaver editör olarak beğenerek kullandığım bir editör. Burada sizlere yeni sürümü ve yeniliklerini anlatmaya çalışacağım ve son olarakta beklentilerimi ve yeni sürümün bunları ne kadar karşıladığımı yazacağım.

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

26 Mayıs 2008 web’den seçme haberler

Mayıs 26th, 2008 • 1 yorum Haberler
Etiketler: , , , , , , , , ,

  • CSS ile düzenlenmiş tablolar. Bağlantı
  • input ve button arasında farklılıklar. Bağlantı
  • CSS ile mesaj kutuları hazırlamak. Bağlantı
  • jQuery ile yapılmış güzel bir tarih aralığı seçimi. Bağlantı
  • CSS ve Jquery ile yapılmış güzel bir menü örneği. Bağlantı
  • jQuery yeni sürümü çıkmış 1.2.5 bazı sorunlar giderilmiş. Bağlantı
  • “Tek bir bilgisayarda birden fazla Internet Explorer” – eburhan.com Bağlantı
  • Basite indirgenmiş güzel bir yatay akordiyon menü örneği. Bağlantı
  • HTML5 ile birlikte gelen sıralı listeleri tersten sıralama özelliği. Bağlantı
  • Firefox3 1 ay içerisinde çıkması bekleniyor. Firefox3′ün gizli özellikleri Bağlantı
  • Dışa link için css ile ikon koymak. Bağlantı
  • jquery ile ilgili farklı bir büyük resim uygulaması. Bağlantı
  • Tarayıcı Uyumluluğu İçin CSS Sıfırlama – yakuter.com Bağlantı
  • 30 dakikada jQuery giriş yapmak. Bağlantı
  • jQuery ile animasyon geçişli içerikler. Bağlantı

« Önceki Yazılar

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.