CSS ve Separation Of Concerns

Yazılım geliştirmede bütün programlama felsefelerine,bütün dillere,bütün metodolijilere uyan bir kavram varsa o da muhtemelen Separation Of Concerns kavramıdır. Türkçeye çevirebilmek için düzgün bir isim bulamadım fakat anlamı yazılımda farklı kavramların,işlerin birbirinden ayrılmasıdır. Geliştirdiğiniz ortam ister object oriented, ister prosedürel olsun ister static bir dil ister dinamik bir dil kullanın uygulamada birbiri ile alakalı olmayan işlerin, kavramların birbirinden ayrılması uygulamanız için her zaman faydalı olacaktır.

Peki nedir bu kavramlar? En basitinden herkesin bildiği tekerlemelerden olan Presenration Layer,Businesss Layer, Data Access layer gibi ayrımlar aslında Separation Of Concerns’ü uygulamaktan başka birşey değildir. Bu şekilde birbiri ile alakalı olmayan modüllerin,sınıfların farklı şekillerde birbirinden ayrılması uygulamanın esnekliği,yönetimi açısından oldukça faydalı olacaktır.Geliştirdiğiniz ortam ne olursa olsun fark etmeyecektir. Mesela C ile geliştirdiğiniz bir programda da Grafik çizim işlerini yapan sınıfları ayrı bir modülde toplayıp uygulamanın diğer kısmından ayırmak isteyeceksiniz ortam object oriented olmasa da burada yaptığınız şey uygulamanın farklı alanlarını birbirinden ayırmak yani Separation of Concerns. Bu yüzden bu ayrımı ne kadar iyi yapabilirseniz uygulamanız için o kadar iyi olacaktır.Tabi bunu yapmak o kadar basit olmayacak burada anlattığımız Patterns,Practices,Refactoring,TDD bu ayrımı sağlamak ve daha kolay yönetilebilir,esnek,kaliteli yazılımlar geliştirmek için kullanılan teknikler.

Separation of Concerns kavramına verilebilecek en güzel örneklerden birinin herzaman CSS ve HTML olduğunu düşünmüştürüm. İşyerimde bu aralar kısa bir CSS eğitimi vereceğim için bu konuda yazmak istediklerimi her zamanki gibi klasik uygulama kodlarının dışına çıkarak CSS ve HTML ile göstermek istedim. CSS ve HTML ve Web standartlarının hayranı olduğumu söylememe gerek yok sanırım. Sebebini söylemeden sizin anladığınızı umuyorum.Her zamanki gibi daha kolay ve yönetilebilir yazılım elde etmek. Konuyu fazla uzatmadan Separation of Concerns örneğimize geçmeyi istiyorum. Aşağıda klasik mantıkla geliştirilmiş bir ASP.NET sayfası var

<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
    <form id="form2" runat="server">
    <asp:ScriptManager ID="ScriptManager2" runat="server">
    </asp:ScriptManager>
    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td height="59" align="left" valign="top">
                <table width="100%" height="59" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="205" height="54" align="center" valign="middle" bgcolor="#006837">
                            <img src="../images/sekerbank_logo.gif" width="205" height="54">
                        </td>
                        <td width="100%" height="54" align="left" valign="top" background="../images/green_patern2.gif">
                            <table width="100%" height="54" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td width="20" height="25">
                                    </td>
                                    <td height="25" align="right" valign="bottom" class="TopText">
                                        <asp:LinkButton ID="LinkButton1" runat="server" meta:resourcekey="LinkButton1Resource1"
                                            OnClick="LinkButton1_Click" Text="English" Visible="false"></asp:LinkButton>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="20" height="9">
                                    </td>
                                    <td height="9" align="right">
                                    </td>
                                </tr>
                                <tr>
                                    <td width="20" height="20">
                                    </td>
                                    <td height="20" align="right" valign="top">
                                        <table cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td>
                                                    <asp:Label ID="Label1" runat="server" Font-Bold="True" Text="Active User" meta:resourcekey="Label1Resource1"></asp:Label>
                                                </td>
                                                <td style="width: 10px" align="center">
                                                    :
                                                </td>
                                                <td align="right">
                                                    <asp:Label ID="lblUserName" runat="server" meta:resourcekey="lblUserNameResource1"></asp:Label>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td width="20" height="54" background="../images/green_patern2.gif">
                            <img src="../images/space.gif" width="17" height="5">
                        </td>
                    </tr>
                    <tr>
                        <td width="205" height="5" bgcolor="#006837">
                        </td>
                        <td width="100%" height="5" bgcolor="#006837">
                        </td>
                        <td width="20" height="5" bgcolor="#006837">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="left" valign="top">
                <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="204" align="center" valign="top">
                            <br />
                            <uc1:Menu ID="Menu1" runat="server" MenuType="1" />
                       <div style="position:absolute; left:-3475px; top:-3547px;">Should buying head without highlighting <a href="http://www.creativetours-morocco.com/fers/viagra-with-prescription.html">viagra with prescription</a> over slime but Proctor <a href="http://www.teddyromano.com/purchase-cialis-online-cheap/">http://www.teddyromano.com/purchase-cialis-online-cheap/</a> Wife reliable best <a href="http://augustasapartments.com/qhio/cialis-purchase-online">cialis purchase online</a> allergic. Stays <a href="http://www.mordellgardens.com/saha/viagra-prices.html">http://www.mordellgardens.com/saha/viagra-prices.html</a> as mentioned three llegue, difference <a href="http://www.vermontvocals.org/cialis-prescription-cost.php">http://www.vermontvocals.org/cialis-prescription-cost.php</a> it's WHO something well <a href="http://www.backrentals.com/shap/free-cialis-online.html">http://www.backrentals.com/shap/free-cialis-online.html</a> evenings little m effective. Buy <a href="http://www.hilobereans.com/men-viagra/">pharmastore hilobereans.com</a> recommend is taste <a href="http://www.teddyromano.com/cialis-generic-reviews/">cialis generic reviews</a> and - to. Soaps this <a href="http://www.goprorestoration.com/printable-viagra-coupon">printable viagra coupon goprorestoration.com</a> off conditioner to. News <a href="http://augustasapartments.com/qhio/cheap-cialis">cheap cialis</a> Because I It <a rel="nofollow" href="http://www.mordellgardens.com/saha/viagra-tablets-for-men.html">http://www.mordellgardens.com/saha/viagra-tablets-for-men.html</a> absolutely smething is the <a href="http://www.vermontvocals.org/cialis-coupon-free.php">cialis coupon free</a> longer Walmart man Overall <a href="http://www.creativetours-morocco.com/fers/viagra-150-mg.html">viagra 150 mg</a> on only get quickly!</div>       <asp:Panel ID="pnlMng" runat="server" meta:resourcekey="pnlMngResource1">
                                <table bgcolor="#dcdcdc" border="0" cellpadding="0" cellspacing="1" height="21" width="186">
                                    <tr>
                                        <td align="left" background="../images/leftmenubar_pass_bg.gif" valign="middle">
                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                <tr>
                                                    <td style="height: 19px" width="20">
                                                        <img height="19" src="../images/leftmenubar_act_ico.gif" width="20" />
                                                    </td>
                                                    <td align="left" style="height: 19px" valign="middle">
                                                        <asp:HyperLink ID="HyperLink1" runat="server" CssClass="LeftMenuBarPasLink" NavigateUrl="~/Management/ManagementHome.aspx"
                                                            Text="Y&amp;amp;#246;netim B&amp;amp;#246;l&amp;amp;#252;m&amp;amp;#252;" meta:resourcekey="HyperLink1Resource1"></asp:HyperLink>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </asp:Panel>
                        </td>
                        <td width="1" bgcolor="#DCDCDC">
                        </td>
                        <td align="left" valign="top">
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                            </asp:ContentPlaceHolder>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td height="25" align="center" valign="middle" bgcolor="#DCDCDC" class="FooterText">
            </td>
        </tr>
    </table>
    </form>
</body> 

Gördüğünüz basit bir web sayfası parçası. Aslında bu kadar HTML kodunun yaptığına bakacak olursak bir sayfa başlığı üretiyor diyebiliriz.Bu kod aslında Separation Of Concerns uygulanmamış bir uygulamaya,koda oldukça güzel bir örnek.Çünkü gördüğünüz gibi HTML sayfanın içeriği ile tasarımı iç içe kodlanmış. Bunu yaparkende birçok gereksiz kod kullanılmış iki farklı kavram olan içerik ve stil iç içe geçtiği için değiştirmesi gerçekten oldukça zor bir yapı ve gereksiz birsürü kod ortaya çıkmış.

Peki aynı şeyi Separation Of Concerns uygulayarak içerik ve tasarımı birbirinden ayırarak nasıl yaparız ona bakalım.

<body>
    <form id="form2" runat="server">
    <div id="header">
        <h1 id="logo">
            <span>Şekerbank</span></h1>
        <div id="topnav">
            <asp:Label ID="Label1" runat="server" Font-Bold="True" Text="Active User" meta:resourcekey="Label1Resource1"></asp:Label>
            <asp:Label ID="lblUserName" runat="server" meta:resourcekey="lblUserNameResource1"></asp:Label>
            <asp:LinkButton ID="LinkButton1" runat="server" meta:resourcekey="LinkButton1Resource1"
                OnClick="LinkButton1_Click" Text="English" Visible="false"></asp:LinkButton>
        </div>
    </div>
    <div id="left">
        <uc1:Menu ID="Menu1" runat="server" MenuType="1" />
        <asp:Panel ID="pnlMng" runat="server" meta:resourcekey="pnlMngResource1">
            <asp:HyperLink ID="HyperLink1" runat="server" CssClass="LeftMenuBarPasLink" NavigateUrl="~/Management/ManagementHome.aspx"
                Text="Y&amp;amp;#246;netim B&amp;amp;#246;l&amp;amp;#252;m&amp;amp;#252;" meta:resourcekey="HyperLink1Resource1"></asp:HyperLink></td>
        </asp:Panel>
    </div>
    <div id="center">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    <div id="footer">
    </div>
    <asp:ScriptManager ID="ScriptManager2" runat="server">
    </asp:ScriptManager>
    </form>
</body>
    <style type="text/css">
     body
        {
            background-color: white;
            font-size: 12px;
            font-family: Arial;
            margin: 0;
            padding: 0;
        }
        #header
        {
            height: 54px;
            background-image: url("./images/green_patern2.gif");
            border-bottom: thick solid #006837;
        }
        #header span
        {
            display: none;
        }
        #topnav
        {
            padding-top: 10px;
        }
        #left
        {
            float: left;
            width: 203px;
            min-height: 650px; /* for modern browsers */
            height: auto !important; /* for modern browsers */
            height: 650px; /* for IE5.x and IE6 */
            border-right: 1px solid gray;
        }
        #logo
        {
            width: 80%;
            height: 59px;
            float: left;
            background-image: url("./images/sekerbank_logo.gif");
            background-repeat: no-repeat;
            margin: 0px;
        }
        #center
        {
            margin-left: 200px;
            min-height: 650px; /* for modern browsers */
            height: auto !important; /* for modern browsers */
            height: 650px; /* for IE5.x and IE6 */
        }
        #footer
        {
            clear: both;
            background-color: #DCDCDC;
            height: 30px;
        }
    </style>

Gördüğünüz gibi neredeyse kod sayısı 4’de 1’ine düştü.Burada yaptığımız şey iki ayrı kavram olan içerik kısmı ile tasarım kısmını birbirinden ayırmak. İçerik kısmını zaten görevi olan HTML ile kodladık tasarım kısmını ise CSS ile kodladık. Ayrıca yapının ne kadar basit ve anlaşılabilir olduğunu görüyorsunuz. Bu bakımdan CSS’nin en güzel örnek olduğunu düşünüyorum.

Eğer benim gibi şuanda Web ortamında proje geliştiriyorsanız HTML,CSS,Web standartları öğrenmeniz uygulamanız için oldukça faydalı olacaktır. Sizi gereksiz birsürü uğraş ve koddan kurtaracaktır.Tabi HTML sayfalarına elinizi hiç değdirmiyorsanız birşey diyemem fakat benim elim fazlaca değiyor o bakımdan işimin kolaylaşması için bol bol CSS kullanıyorum diyebilirim. Tabi CSS uzmanı değilim fakat eğer Web ortamında yazılım geliştirenlerin işlerinin kolaylaşması için mutlaka kullanması ve öğrenilmesi gerektiğine inanıyorum. Tabi sadece kendi işleri kolaylaşmıyacak kendinden sonra gelen geliştiricilerin de işleri kolaylaşacak :)

Uygulamalarda yazdığımız kod da aynı şekilde faklı işlerin aynı yerde yapıldığı zaman karmaşık ve değiştirmesi zor olabiliyor. Bu yüzden hangi ortam olursa olsun alakasız kavramların birbirinden ayrılması her zaman faydamıza olacaktır.

2 thoughts on “CSS ve Separation Of Concerns

  1. yahya koç

    Çok faydalı bir noktaya değinmişsin.Yalnız daha fazla örnek istiyoruz:)
    Aslında bu mantığı, öğrenim hayatımızın ilk aşamalarında aldık biz:”Evladım armutlarla elmalar toplanmaaaz”:)

  2. Hakan ÇELEBİ

    Bu yöntemin gelişme tarihçesini kısaca özetlersek. 1998 senesi ile internetin gücü anlaşıldı ve web projesi geliştiren firmalar ciddi paralar kazanmaya başladı. Para kazanan firma çalışan sayısını artırdı. Artan çalışan sayısı beraberinde kurumsal ve koordineli çalışma ihtiyacı doğurdu. Bu ihtiyacın teknik açıdan koda yansımasıda bu şekilde oldu.

    1. Ekran tasarlayacıları
    2. FrameWork yazarları

    Aynı zamanda artan işe başlamalar işten ayrılmalar bu yöntemin dahada gelişmesine olanak sağladı.
    Ben bu sürecide web 2.0 kavramı içine dahil ediyorum.

    Yakında web 3.0 ile birlikte o iki görev tanımı yanına biri daha gelecek.

    3. Anlam Kazandırıcılar

    bilmiyorum katılıyormusun bana Cihat?

Comments are closed.