<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>bildirgec.org - etiketler: modern web tasar&#305;m&#305;</title>
    <link>http://www.bildirgec.org/</link>
    <language>tr-tr</language>
    <ttl>40</ttl>
    <description>bildirgec.org - etiketler: modern web tasar&#305;m&#305;</description>
    <item>
      <title>Neden CSS &#214;&#287;renmeliyiz?</title>
      <author>oztecnic</author>
      <description>&lt;p&gt;Web ve teknolojileri g&#252;ndelik ya&#351;am&#305;m&#305;za gireli pek de fazla olmamas&#305;na ra&#287;men, bu alandaki geli&#351;meler g&#246;z kama&#351;t&#305;r&#305;yor. Herg&#252;n yeni bir mucize duyar olduk. Al&#305;n birisi i&#351;te, Google! RSS de&#287;il mi bir di&#287;eri? Flash her yerde kar&#351;&#305;m&#305;za &#231;&#305;km&#305;yor mu?&lt;/p&gt;


	&lt;p&gt;Web teknolojilerinde g&#252;n ge&#231;tik&#231;e vites artt&#305;ran bir geli&#351;me s&#252;redursun, bizim yani web tasar&#305;mc&#305;lar&#305; i&#231;in ba&#351;&#305;m&#305;za gelmi&#351; en g&#252;zel mucizelerden biridir CSS&#8230;&lt;/p&gt;


	&lt;p&gt;Cascading Style Sheets&#8217;den, yani stil sayfalar&#305;ndan k&#305;saca CSS diye bahsedece&#287;iz&#8230; CSS sayfalar&#305;n&#305;n olu&#351;turulmas&#305; ve uygulanmas&#305;na bu yaz&#305;da hi&#231; bula&#351;madan, CSS&#8217;in bize sa&#287;lad&#305;&#287;&#305; art&#305;-de&#287;erden bahsetmek istiyorum. B&#246;ylece neden CSS &#246;&#287;renmeliyiz? sorusunu da a&#231;&#305;kl&#305;&#287;a kavu&#351;turmu&#351; olaca&#287;&#305;z&#8230;&lt;/p&gt;


	&lt;p&gt;CSS &#246;&#287;renmeliyiz &#231;&#252;nk&#252;;&lt;/p&gt;


	&lt;p&gt;&lt;strong&gt;Yap&#305; (Structure) ve Tasar&#305;m&#305;n (Design) Sevindirici Ayr&#305;l&#305;&#287;&#305;&lt;/strong&gt;&lt;/p&gt;


	&lt;p&gt;Bir web sayfas&#305;n&#305;nda i&#231;eri&#287;ini, yani yap&#305;y&#305; olu&#351;turan &#351;ey yal&#305;n XHTML kodudur. Tasar&#305;mdan kas&#305;t ise bu i&#231;eri&#287;in g&#246;rsel davran&#305;&#351;&#305;d&#305;r. Yani bir men&#252;n&#252;n web sayfas&#305;nda nerde duraca&#287;&#305;, bir spot haberin yaz&#305;s&#305;n&#305;n rengi, karakteri, sayfan&#305;n arkaplan rengi vb. g&#246;rsel davran&#305;&#351;lar&#305;n bir toplam&#305;d&#305;r tasar&#305;m. Bunlar&#305;n birbirinden ayr&#305;lmas&#305; m&#252;mk&#252;n oldu&#287;unda, bu bizim i&#231;in i&#231;erik ve g&#246;rselli&#287;in farkl&#305; yerlerden y&#246;netilmesi anlam&#305;na gelmekteydi.&lt;/p&gt;


	&lt;p&gt;Bu anlatt&#305;&#287;&#305;m&#305;z somutlamak istersek; takip etti&#287;im blog yazarlar&#305;nda biri olan Fatih Turan&#8216;&#305;n web sitesine, Firefox web taray&#305;c&#305;n&#305;zla girdi&#287;inizde g&#252;zel bir anasayfa sizi kar&#351;&#305;lar. E&#287;er taray&#305;c&#305;n&#305;zda CSS&#8217;i kapat&#305;rsan&#305;z, alaca&#287;&#305;n&#305;z g&#246;r&#252;nt&#252; &#351;u &#351;ekilde olacakt&#305;r&#8230;&lt;br&gt;&lt;/p&gt;


&lt;div class="imajorta"&gt;&lt;img src='http://www.bildirgec.org/imaj/oztecnic/neden-css-1.jpg' alt="Yal&#305;n XHTML ve CSS" border="0"&gt;&lt;br&gt;Yal&#305;n XHTML ve CSS&lt;/div&gt;

	&lt;p&gt;Bu sade g&#246;r&#252;nt&#252; XHTML&#8217;in CSS&#8217;siz yorumlanmas&#305;d&#305;r&#8230; CSS ile tasar&#305;m, XHTML&#8217;den (Yap&#305;&#8217;dan) ba&#351;ar&#305;l&#305; bir &#351;ekilde ayr&#305;lm&#305;&#351;t&#305;r&#8230;&lt;/p&gt;


	&lt;p&gt;&lt;strong&gt;Temiz ve Anla&#351;&#305;l&#305;r XHTML&lt;/strong&gt;&lt;/p&gt;


	&lt;p&gt;Bir web sayfas&#305;nda g&#246;rsel unsurlar&#305;n ayr&#305;lmas&#305;, do&#287;al&#305;nda XHTML taraf&#305;nda kodsal temizli&#287;i sa&#287;lam&#305;&#351; olur. Bu da herkes i&#231;in anla&#351;&#305;labilirli&#287;i artt&#305;racakt&#305;r. Anla&#351;&#305;labilir kod, m&#252;dahale edilebilir koddur.&lt;/p&gt;


	&lt;p&gt;&lt;strong&gt;Y&#246;netilebilir CSS&lt;/strong&gt;&lt;/p&gt;


	&lt;p&gt;G&#246;r&#252;n&#252;me dair unsurlar&#305; bir, ya da birka&#231; CSS dosyas&#305;nda toplad&#305;&#287;&#305;m&#305;zda g&#246;r&#252;n&#252;m&#252; XHTML sayfalar&#305;ndan &#231;&#305;karm&#305;&#351;, merkezi bir yerden y&#246;netebilir duruma gelmi&#351; oluruz. Yap&#305; ve tasar&#305;m&#305;n i&#231; i&#231;e girdi&#287;i karma&#351;&#305;k sayfalar&#305; tek tek d&#252;zenlemek yerine, h&#305;zl&#305;ca tek merkezden CSS dosyam&#305;z&#305; modifiye ederiz. Bu dosyaya ba&#287;l&#305; olan web sayfalar&#305; otomatik olarak etkilenirler. B&#246;ylece bak&#305;m ve m&#252;dahaleler olduk&#231;a kolayla&#351;&#305;r. Zamandan ve i&#351; y&#252;k&#252;nden tasarruf etmi&#351; oluruz.&lt;/p&gt;


&lt;div class="imajorta"&gt;&lt;img src='http://www.bildirgec.org/imaj/oztecnic/neden-css-2.jpg' alt="CSS ile Organizasyon" border="0"&gt;&lt;br&gt;CSS ile Organizasyon&lt;/div&gt;

	&lt;p&gt;&lt;strong&gt;Doyas&#305;ya &#214;zg&#252;rl&#252;k&lt;/strong&gt;&lt;/p&gt;


	&lt;p&gt;CSS&#8217;in yayg&#305;nla&#351;mas&#305; &#246;ncesinde reva&#231;ta olan tablo kullan&#305;larak yap&#305;lan tasar&#305;mlar&#305;n yaratt&#305;&#287;&#305; hantall&#305;ktan, CSS ve onun zengin &#246;zelllikleri sayesinde kurtulmu&#351; olururuz. Web sayfas&#305;n&#305; olu&#351;turan bloklar&#305;n nerede duracaklar&#305;n&#305; tablolar&#305;n h&#252;creleri de&#287;il, CSS dosyalar&#305;nda tan&#305;mlad&#305;&#287;&#305;m&#305;z kurallar belirler. &#304;steti&#287;imiz zaman sitemizin sa&#287; taraf&#305;nda duran bir menuyu, sitemizin soluna ta&#351;&#305;yabilir, bloklar&#305; birbirine g&#246;re konumlayabiliriz. Bu anlatt&#305;klar&#305;ma en g&#252;zel &#246;rne&#287;i &lt;a href="http://www.csszengarden"&gt;www.csszengarden.com &lt;/a&gt;sitesinde g&#246;receksiniz. Bu sitede sergilenen b&#252;t&#252;n &#246;rnek siteler ayn&#305; XHTML koda sahipken hepsinin g&#246;rselli&#287;i, men&#252;lerin yeri, linklerin &#351;ekli &#246;zg&#252;nd&#252;r. Bu siteler tasar&#305;m ve yap&#305;n&#305;n birbirinden ayr&#305;lmas&#305;na en g&#252;zel &#246;rneklerdir.&lt;/p&gt;


&lt;div class="imajorta"&gt;&lt;img src='http://www.bildirgec.org/imaj/oztecnic/neden-css-3.jpg' alt="CSSZenGarden &#214;rnekleri" border="0"&gt;&lt;br&gt;CSSZenGarden &#214;rnekleri&lt;/div&gt;

	&lt;p&gt;&lt;strong&gt;Platformlara &#214;zel Tasar&#305;m&lt;/strong&gt;&lt;/p&gt;


	&lt;p&gt;CSS kullanarak web tabanl&#305; uygulamalar&#305;m&#305;z&#305;n bir yaz&#305;c&#305;dan &#231;&#305;k&#305;&#351; al&#305;n&#305;rken nas&#305;l g&#246;r&#252;nece&#287;ini, bir monit&#246;rden bak&#305;ld&#305;&#287;&#305;nda nas&#305;l davranca&#287;&#305;n&#305;, ya da bir mobil cihazda nas&#305;l g&#246;r&#252;nece&#287;ini, XHTML dosyalar&#305;m&#305;za dokunmadan ayr&#305; ayr&#305; CSS &#252;zerinden tan&#305;mlayabiliriz&#8230;&lt;/p&gt;


	&lt;p&gt;Daha ne olsun, bug&#252;n i&#231;in m&#252;kemmel...&lt;/p&gt;


	&lt;p&gt;Kaynak&lt;br&gt;&lt;a href="http://www.oztecnic.com"&gt;www.oztecnic.com&lt;/a&gt;&lt;/p&gt;&lt;p&gt;Bu yaz&#305; &lt;a href="http://www.bildirgec.org/uye/oztecnic"&gt;oztecnic&lt;/a&gt; taraf&#305;ndan &lt;a href=" http://www.bildirgec.org/yazi/neden-css-ogrenmeliyiz "&gt;bildirgec.org&lt;/a&gt; adresli sitede yay&#305;mlanmak &#252;zere yaz&#305;lm&#305;&#351;t&#305;r. Kaynak g&#246;sterilmeksizin kopyalanamaz.&lt;/p&gt;&lt;hr&gt;Pilli Projeleri: &lt;a href="http://pilli.com"&gt;Pilli.com: Kolektif Ba&#287;&#305;ms&#305;z &#304;&#231;erik&lt;/a&gt; | &lt;a href="http://sosyomat.com"&gt;Sosyomat.com: Arkada&#351;&#305;n&#305; Etiketle&lt;/a&gt; | &lt;a href="http://put.io"&gt;Put.io: Online Cloud Storage&lt;/a&gt;</description>
      <pubDate>Sat, 13 Dec 2008 15:07:00 GMT</pubDate>
      <guid isPermaLink="false">78134@http://www.bildirgec.org/</guid>
      <link>http://www.bildirgec.org/yazi/neden-css-ogrenmeliyiz</link>
      <category>css</category>
      <category>web standartlar&#305;</category>
      <category>xhtml</category>
      <category>web teknolojileri</category>
      <category>modern web tasar&#305;m&#305;</category>
    </item>
  </channel>
</rss>

