Noupe ” 20 Firefox Add-ons to Enhance your Web Development ”   başlığı altında 20 firefox eklentisini sıralamış. Eğer web tasarımla ilgileniyorsanız kesinlikle bakmalısınız. Vaktim olduğunda burdaki eklentileri anlatacağım. Şimdilik haberiniz olsun..

• Evet ilk eklentimizi anlatalım. Web developer.  Bu eklentiyi daha öncede anlatmıştım. Ama önemli bir eklenti olduğundan tekrar anlatmakta yarar var. Öncelikle eklentimizi buradaki adresten kurabiliriz.
  
  Eklentimiz kurulduktan sonra yukarıdaki gibi tarayıcımıza entegre olacaktır.
  Genel manada web sayfasının açılış şartlarını değiştirebilir ve bilgilerini bu eklenti sayesinde alabiliriz.
  Disable–>> Bu bölümde yer alan seçenekleri seçerek sitedeki bazı özellikleri kapatabiliriz. Buna örnek olarak sayfadaki tüm renkleri, javascriptleri, açılır sayfaları…
  cookies–>> Bildiğiniz gibi tarayıcılar sitelerdeki bazı bilgileri tutarlar. Bunun için şifrelenmiş dosyalar kullanırlar. Örneğin bir siteye giriş yaptığınızda eğer cookie açıksa sizin giriş parolanız ve kullanıcı adınız cookie de kaydolur. İşte bu gibi kayıtları engellemek için bu menüyü kullanabilirsiniz.
  CSS–>> Buraki menüden isterseniz sitenin tüm css kodlarını kapatabilir, css kodlarını görebilir, edit css diyerek sizin tarayıcınızda görünecek sayfa düzenlemesini yapabilirsiniz.
  Forms–>> Burdaki özellikle adından anlaşılacağı gibi form yapılarını düzenleyebilir yada kapatabilirsiniz.
  İnformation–>> Benim çok kullandığım bir menü. Özellikle view color information seçeneği sayfadaki tüm reklerin hekzadesimal kodlarıyla beraber görünmesini sağlıyor. Diğer display ile başlayan özellikler gösterim amaçlıdır. Örneğin display link details dediğinizde linklerin yerini belli eder. View ile başlayan menüler ile site içindeki dinamikleri görebilirsiniz. Örneğin View java script ile java modülünü görüntüleyebilirsiniz. YAZININ TAMAMINA BAK »
  Henüz Konuşma Yok

Bu site tasarım ve kodlanma yönünden çok hoşuma gitti. İçerik olarakta bir çok siteyi tanıtıyor girmenizi tavsie ederim.

speckyboy sitesinde hazırlanıp sunulan bu liste, css le kodlamış temiz ve hoş görünümlü siteleri içeriyor.

emeklerine sağlık.

ilk on resimli şekilde verilmiş.
işte liste:

1. Maqina/ (www.maqina.ro/)

2. Fresh Creative (www.getfinch.com/)

3. Oranges (www.o.rang.es//)

YAZININ TAMAMINA BAK »

Evet yazımıza devam ediyoruz. Önceki yazıda bir elemanın nasıl kutu ürettiğini ve kutuların kendi arasında nasıl davrandığını gördük. Şimdiki konu css için oldukça önemli bir konudur.  çünkü kutuların kendi aralarında nasıl dizildiğini hangisinin öncelik kazanacağını bu konumuzda öğreneceğiz.
FLOAT: float özelliği kutuların kendi aralarındaki konumlamasını belirler.
genel değerleri;
left | right | none | inherit tir.
Örneğin bir paragrafımız olsun ve paragrafımızın içince bir resim olsun. Bu resim paragrafımızın içinde yüzer. O yüzden float a tanım olarak yüzen kutu konumlandırma özelliği denir.Resmimiz paragrafın içinde yüzerken onu nasıl konumlandıracağımıza bakalım.
örnek bir kod yazalım ve görelim; YAZININ TAMAMINA BAK »

Bu yazımda html işaretleme dilini en kestirme yönden ve işimize yarıcak yönlerini anlatmaya çalışacam. Çünkü css ile birlikte html içindeki biçimlendirme taglarının(<font><b><i>…) yerini stil tanımlamalar almıştır. Bunun yanı sıra htmlde geçen ve artık pek kullanılmayan FRAME yani çerçeveler tagınında üstünde durmucam. Çünkü artık web tasarımcıları görsellik ve teknik olarak bu tekniği kullanmak istemiyorlar.

Öncelikle HTML( Hyper Text Markup Language) işaretleme dili anlamına gelir. İşaretleme dili denmesinin nedeni, sunmak istediğimiz dökümanın, resimlerin yani içeriğin taglar içinde işaretlenip tarayıcı tarafından okunmasını sağlamasındandır. HTML bir programlama dili değildir. Çünkü html ile tek başına çalışabilecek bir program yazamazsınız.HTML W3C(World Wide Web Consortium )  tarafından standartlaştırılmaktadır.

Html’lin asıl görevini  anlamak için bir örnek vermek istiyorum.Örneğin bir tarayıcıda ( firefox,internet explorer,nescape,opera,safari…) hazırladığımız bir metnin görüntülenmesini istiyoruz. Metnimiz şu şekilde olsun
“Yeryüzünde barışı sağlayacak sihirli değnek analarla öğretmenlerin elindedir. Eğitim demek, vücutta ve ruhtaki güzelliği ve mükemmelliği son mertebesine kadar geliştirmek demektir.EFLATUN”.
Bu metnimizi tarayıcının tanıması ve istediğimiz şekilde yorumlaması için taglar(< >) kullanırız. Tag kullanılmasının nedeni vereceğimiz komutlarla düz metinimizin ayrılmak istenmesidir. Yukarıdaki metnimizi taglara dökersek;
<p><font color=”blue”>Yeryüzünde barışı sağlayacak sihirli değnek analarla öğretmenlerin elindedir. Eğitim demek, vücutta ve ruhtaki güzelliği ve mükemmelliği son mertebesine kadar geliştirmek demektir.</font><i>EFLATUN</i></p>
Biz burda tarayıcıya şunu demiş olduk;”bak kardeşim <p> ile başlayan ve </p> diye kapan yerler bir paragrafır. <i></i> arasındakiler italiktir.<font></font> arasındakilerde belirttiğim gibi mavi yazıdır. İşte web tarayıcısı bu dilden anlar ve verdiğimiz tagları yorumlar. Yukarıdaki örneğin görüntüsü şu şekildedir.
Yeryüzünde barışı sağlayacak sihirli değnek analarla öğretmenlerin elindedir. Eğitim demek, vücutta ve ruhtaki güzelliği ve mükemmelliği son mertebesine kadar geliştirmek demektir.EFLATUN YAZININ TAMAMINA BAK »

CSS i anlamak ve ona hakim olmak için bilinmesi gereken bir konudur. Tablosuz bir web tasarımı, daha temiz kod, daha az sorun  ve daha kullanışlı bir web sitesi demektir. Bunu anlamak içinde çerçeve modelini bilmemiz gerekir. Her eleman aksi belirtilmediği sürece (display:none) bir çerçeve üretir.
Örneğin <p> elemanı aşağıdaki şekilde çerçeve üretir. Ve bu çerçeve modeline istersek müdahale edebiliriz.

Örnekte görüldüğü gibi bir eleman belirtilen değerlere göre bir çerçeve üretir. İşte bu çerçevenin bir içerikte yüzdürülmesi, konumlandırılması veya çerçeve türünü belirliyen nitelikler vardır.Onlara değinecez ama önce çerçevenin oyutları hakkında bilgi verelim.
Çerçevenin boyutlarını şunlar belirler;
width:Çerçevenin genişliği bu nitelik ile tanımlanır.. Eğer niteliğin değeri auto ise kullanıcı arayüzü bu genişliği kendisi belirler.
height:Çerçevenin yüksekliği bu nitelik ile tanımlanır. Eğer niteliğin değeri auto ise taşıyıcı bloğun yüksekliği belgenin içeriğine uygun olarak büyüyecektir.

Bir elemanın bu şekilde çerçeve (blok) üretmesinin nedeni display niteliğidir. Yani blok seviyesinde olmayan bir elemanı blok seviyesine getirmek için veya tam zıtdı olarak blok seviyesinden bir elemanın seviyesinin indirgemek için kullanılır.Örnek verecek olursak; YAZININ TAMAMINA BAK »

CSS html elemanlarına(<p>,<h1>…) bakarken onları bir kutu içindeymiş gibi algılar.Yani bir paragrafımız olsun; css le paragrafa müdahale ederken, css paragrafa bir kenar çizgisi ekler (bu değer ‘0′ sa görünmez) yani border. border ile paragraf arasındaki alan kenar içi boşluğudur (padding).padding uzunluk değeri aldıkça boşluk büyür. Diğer bir boşluk border ile yani çerçeve ile diğer nesneler arasındaki boşluktur.Yani kenardışı boşluk (margin). Margin bir paragraf içindeki bir resmin , paragrafa yakınlık uzaklık değerini tanımlar.Biraz karışık bir durum gibi görülüyor ama aşağıdaki resme bakarak daha iyi anlayabiliriz.

Kenar iç boşluk alanının yüzey rengi veya resmi background niteliği ile belirtilir.
background{color:red;} gibi.

Bir örnekle daha iyi açıklayalım.

      li.cizgili {          /* LI için kenar çizgileri */
        border-style: dashed;  /* Kesik çizgili */
        border-width: medium;  /* Orta kalınlıkta */
        border-color: lime;    /* Açık yeşil renkte */
        background:#bb55cc;    /*mor renkte kenar içi boşluk*/
      }

Bu paragraf orta kalınlıkta kesik çigili ve yeşil renkte
border içerir.


Bu kodun görüntüsü şu şekildedir;
 
Genel olarak tanım bu şekildedir. yani kenar içi boşluk(padding),
kenar çizgisi(border) ve
kenar dışı boşluk(margin). Bu üç özelliğin tanımlamaları farklı farklıdır.
Örneğin border için;
kenar çizgisi tipi border-style, kenar çizgisi genişliği border-width ,
kenar çizgisi rengi border-color tanımlanabilir.
 Bu tanımlamarıda diğer yazımda vermek istiyorum.