Software Engineering ඉගෙන ගනිමු - 1 පාඩම

කොහොමද යාලුවන්ට, අද අපි කථා කරන්නෙ Software Engineering Basics ගැන

Software ,Generic software හා Bespoke software කියලා ප්‍රධාන කොටස් 2කට බෙදන්න පුලුවන්.

1.Generic software: stand-alone software කියන්නෙ මේවට. open market ඒකට අරන් යන software.
උදා:     spreadsheet applications
            database systems
            text editors වගේ දේවල්

2.Bespoke software: විශේෂ customer කෙනෙක් සදහාම නිර්මාණය වුන software
උදා:    banking systems
           air traffic control systems

ඒ වගේම software  system software, application software කියලා ප්‍රධාන කොටස් 2කට බෙදන්න පුලුවන්.
System software: පරිගණකයේ resources manage කරගන්නයි application programme වල  execution
වෙන විදිහ check කරන්න තියෙන software.

Application software: end user ඒ කියන්නෙ පාරිභෝගිකයාට අදාල වන විශේෂ වන ක්‍රියාවලියකට දායක වන software.

 System software ප්‍රධාන කොටස් කිහිපයක් යටතේ වර්ග කරන්න පුලුවන්.
1.Operating Systems
  I.Client operating systems
  II.Network operating systems

2.Database management systems

3.Network Software
  I.Network management software
  II.Server software
  III.Security and encryption software
  IV.Middleware

4.Development tools සහ Programming language software
 I.Software development tools
 II.Testing tools

5.General business productivity applications
 I.Word processors
 II. Spreadsheets
 III.Simple databases
 IV.Graphics applications
 V. project management software

6.Home use applications
 I.Games
 II.Media players

7.Cross-industry application software
 I.  Professional accounting software
 II.Human resource management
 III.Customer relations management software
 IV.Geographic information system software

8.Vertical market application software
 I.Software for a specific industry(manufacturing, health care, telecom)

9.Utilities software
 I.Anti virus
 II.Compression programme
 III.Search engines
 IV.Font
 V.Voice recognition software

software engineering වල අර්ථ කථනය ගොඩනැගුනේ 1968දි  "software crisis" කියන තේමාව යටතේ පැවැත්වුනු සමුළුවේදීයි.

software crisis(මෘදුකාංග අර්බුදයට හේතු වූ කරුණු)

i. පරිගණක දඩාංග තාක්ෂණය අධි වේගයෙන් වර්ධනය වීම
ii. ඒහි ප්‍රතිපලයක් වශයෙන් සංකීර්ණ මෘදුකාංග නිර්මාණය කරන්නට හැකිවීම
iii. ඒසේ වුවත් මෙි සංකීර්ණ මෘදුකාංග තාක්ෂණය දරා ගැනීමට තරම් ඒ සදහා නිවැරදි සම්මත ක්‍රමවෙිදයන් පැවතුනේ නැත.
iv. මෙි නිසා සිදුකරන මෘදුකාංග අයවැයට වඩා විශාල මුදලකට මෙන්ම නියමිත කාලයටත් වඩා වැඩියෙන් නිම වන්නට විය.
v. මෘදුකාංග අඩු ප්‍රමිතියකින් යුක්ත වන්නට විය.
vi. මෘදුකාංග ඒහි අවශ්‍යතා සම්පූර්ණ කලේ නැත.
vii. ව්‍යාපති කලමණාකරණය කර ගැනීමට නොහැකි වූ අතර නඩත්තු කිරීමටද අපහසු විය.

නව මදුකාංග නිර්මාණය කිරීම ප්‍රධාන ක්‍රම 3ක් යටතේ සිදුවිය.

1.  නව මෘදුකාංග සංවර්ධනය කිරීම
2. සංවිධානයකට සුදුසු වන පරිදි generic software හදුනා ගැනීම
3. පෙර භාවිතා කළ මෘදුකාංගය නැවත පාවිච්චි කිරීම

 මෘදුකාංග ක්‍රියාවලිය (Software process)

Software Engineering වල පාවිච්චි වෙන ක්‍රමවත් පද්ධතියක් විදියට වන අාරම්භයක් software process ඒකක් කියලා හදුන්වන්න පුලුවන්. අැත්තටම software process ඒකක් කියන්නෙ ක්‍රියාවලි කිහිපයක් අනුපිලිවෙලින් සිදුවීමක්. මේ ක්‍රියාවලිය ගමන් කරන්නෙ සම්පුර්ණ මෘදුකාංගයක් අාරම්භයේ සිට අවසන් වන තැන දක්වා...  

ඔිනෑම software ඒකක් නිර්මාණය වීමේදි සිදුවෙන මූලික ක්‍රියාවන් 4ක් තියෙනවා.

1. Software Specification (මෘදුකාංග විස්තර)

    i.Analysis ( විශ්ලේෂණය කිරීම)
    ii. Specification ( විස්තර පිලිවෙලකට බෙදා ගැනීම)

2. Software Development(මෘදුකාංග විකාශනය)
    i. Design (නිර්මාණය කිරීම)
    ii. Implementation (ක්‍රියාවට නැංවීම)
    iii. Documentation (ලේඛන ගත කිරීම)

3. Software Validation (මෘදුකාංග වලංගුකරණය)
     i. Testing (පරික්ෂා කිරීම)
     ii. Debugging (වැරදි අඩුපාඩු නිවැරදි කිරීම)

4. Software Evolution ( මෘදුකාංග විකාශනය)
    i. Maintenance (පවත්වාගෙන යාම)

මේ ලිපියෙ අඩුපාඩු තියෙනවනම් කියන්න. මේකෙ දෙවෙනි ලිපියත් ඒක්ක ඉක්මනටම හමුවෙන්නම්...

web ඉගෙන ගනිමු - 8 පාඩම

කොහොමද යාලුවන්ට, අද අපි කථා කරන්නෙ CSS වල තවත් ප්‍රධාන කොටසක්.
අපි type කරන code ඒක page ඒක scroll කලා කියලා නැති වෙන්නෙ නැතුව ඒ position ඒක නොවෙනස්ව තියෙනවනම් අපට ඒක සෑහෙන්න වැදගත් වේවි.
ඒක කරන්න අපි පාවිච්චි කරන්නෙ position කියන property ඒක.
position ඒකෙ ප්‍රධාන අනු කොටස් කිහිපයක් තියෙනවා.

1. Position:fixed
මේකේදි position ඒක fix වෙනවා. තවත් පැහැදිලි කරනවනම් page ඒක scroll කලා කියලා  මේ දේවල් චලනය වෙන්නෙ නෑ. ඒක ඒතනට fix වෙලයි තියෙන්නනෙ....

ex:

p.fixed_posion
{
     position: fixed;
     top:20px;
     left:20px;
}

2.Position:relative
මේකෙදි position ඒක අදාල property ඒකේ original position ඒකත් ඒක්ක වෙනස් වෙනවා. ඒකයි මේකෙ position ඒක relative කියන්නෙ.

ex:

p.relative_position
{
      position:relative;
      left:20px;
}

3.Position:absolute
මේකෙදි පාවිච්චි වෙන absolute position ඒකේදි position ඒක ගැන හිතන්නෙ නැතුව properties පාවිච්චි කරන්න පුලුවන්.මේක හුගක් වෙලාවට පාවිච්චි කරනවා headers දාන කොට.

ex:

h1{
       position:absolute;
       left:100px;
}

අපි type කරන code ඒකකට shadow ඒකක් වුනත් දාන්න පුලුවන් CSS පාවිච්චි කරලා....

ex:

h1{
        color: white;
        text-shadow: 2px 2px 2px #000000;
}

ඒ වගේම div tag ඒක පාවිච්චි කරලා වෙන් කරන කොටසකට වුනත් shadow ඒකක් දාන්න පුලුවන්.

ex:

div{
          background-color: yellow;
          box-shadow: 10px 10px;
}

මේ කොටසින් CSS ඉවර වෙනවා. අපි ඊලග පාර ඉදන් Software engineering basic theories කථා කරමු.

web ඉගෙන ගනිමු - 7 පාඩම

අද අපි කථා කරන්නෙ CSS දෙවන කොටස...

මුලින්ම කථා කලොත් padding ගැන,
padding property ඒක පාවිච්චි වෙන්නෙ අපි හදාගන්න ඉඩේ size ඒක තීරණය කරන්න...

ex:

p{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

මේකෙ top කියන්නෙ උඩින් ඉඩ තියෙන ගාන. right left කියන්නෙ දකුණින් වගේම වමින්  ඉඩ තියෙන ගාන. bottom පහලින් තියෙන ඉඩ තීරණය කරනවා.

මේ ලොකු code ඒකම short කරලා පහල විදියට type කරන්න පුලුවන්.

ex:

p{
padding: 50px 60px 70px 80px;
}

මේකෙ පිිලිවෙල ඒන්නෙ top right bottom left පිලිවෙලට...

p{
padding: 50px 60px 70px;
}


මේ විදියට අාවොත් නම් top right bottom.

p{
padding: 50px 60px;
}

values 2යි නම් තියෙන්නෙ top right

p{
padding: 50px;
}

මේකෙන් කියවෙන්නෙ values 4ම 50px වෙනවා කියලා...

ඊලගට කථා කරමු div tag ඒක ගැන
div පාවිච්චි වෙන්නෙ කොටස් වලට කඩා ගන්න.

div කියන tag ඒක html කොටසේ යෙදුවට පස්සෙ

div{
width: 50px;
height: 50px;
}

div කොටසක width height කොටස්2 අනිවාර්යයි.
ඒ වගේම max-width, max-height , min-width, min-height tags වුනත් div කොටසට භාවිතා කරන්න පුලුවන්.

හුග දෙනෙක්ට තිබ්බ ගැටලුවක් තමයි font ඒක bold italic කරන හැටි.
ඒකට ගන්නෙ

p{
font-weight: bold;
}

ඊලගට කථා කරන්නෙ <a> tag ඒකට CSS දාන හැටි.

a.link{
               color:red;
}

a.visited{
              color:yellow;
}

a.hover{
              color:blue;
}

a.active{
              color:green;
}

මේකෙ a.link කියන්නෙ පවතින විදිහ අපි මුලින්ම දකින තැනදි පවතින විදිහ.
a.visited කියන්නෙ අපි කලින් බලලා තියෙන link ඒකක් අායෙත් පාරක් බලද්දි පෙන්වන විදිහ.
මේකට හොදම උදාහරනෙ තමයි google ඒකේ අපි කලින් බලපු link වෙනස් වෙලා පෙන්වන ඒක.
a.hover කියන්නෙ mouse ඒක ඒ link ඒක උඩින් අරන් යද්දි වන වෙනස්කම්.
a.active කියන්නෙ අපි click කරන link ඒක තවදුරටත් open වෙලානම් තියෙන්නෙ ඒක active link ඒකක් කියලා සලකනවා.

ඊලග පාඩමෙන් තවත් කොටසක්....

web ඉගෙන ගනිමු - 6 පාඩම

අැත්තටම web පාඩම් මාලාව පාඩම් 6කටත් අැවිත්...

අද පොරොන්දු වුනා වගේම CSS පටන් ගන්නවා. මට යාලුවෙක් කිවුවා software engineering theories ඉදිරි පාඩමකින් කථා කරන්න පුලුවන්නම් හොදයි කියලා...
ඒ ගැන ඔයාලගෙ suggestionuත් අපිට  කියන්න.

අැත්තටම අපි html කථා කරද්දිත් css පොඩ්ඩක් කථා කලා.

අැත්තටම css කරන්නෙ ලොකු උදව්වක්. පිට ඉදන්  set වෙන css external file ඒකකින් පොඩි html code ඒකක් වුනත් ලස්සන කරන්න පුලුවන්!

css code ඒකක් මූලිකව කොටස් වලට කඩන්න පුලුවන්.
selector සහ deceleration විදියට...

selector ඒකේ දී අපි සදහන් කරන්නෙ මේක paragraph ද?, header ද?, footer ද? කියන මූලික කාරනාව.

deceleration ඒකෙන් කියවෙන්නෙ අපි දෙන selector ඒකේ properties වෙනස්  වෙන්නෙ කොහොමද කියන ඒක.

p{
  color: red;
}

උඩින් තියෙන code ඒකේ p කියන්නෙ  selector ඒක. curly bracket අැතුලෙ වැටෙන්නෙ deceleration ඒක.

ඊලගට අපි කථා කලොත් CSS වල selectors ගැන.

1.Element Selector
                  මෙතන දී මූලික වෙන්නෙ element ඒක. paragraph, header, element ඒකේ name ඒකෙන් තමයි මෙතනදි mention වෙන්නෙ.

h1{
        text-align: center;
        color:red;
}

2.ID Selector
                  මෙතනදි පාවිච්චි වෙන්නෙ element ඒකක අපි id කියලා ඒතනට භාවිතා වන නම.ඒ වගේම තමයි id ඒක පාවිච්චි වෙද්දි CSS කොටසෙදි id name ඒකට ඉදිරියෙන් "# " ලකුණ යෙදෙනවා.ඣක්

<p id="first"></p>  වුනොත් CSS කොටසට පාවිච්චි වෙන්නෙ first කියන කොටස.

#first{
             color:yellow;
             font-size: 20px;
}

3. CLASS Selector
                class selector ඒකේදි අපි භාවිතා කරන element ඒකේ class කියන attribute ඒක. මේකෙ css file ඒක වෙනම අදුරගන්න ". " ලකුණ පාවිච්චි වෙනවා.

<p class="center"></p> වුනොත් CSS කොටසට පාවිච්චි වෙන්නෙ center කියන කොටස.

.center{
              color:red;
              align-text:center;
}

මේකෙ විශේෂත්වය තමයි තවත් attribute ඒකක් තිබුනොත් class ඒක center වෙන ඒයාටත් මේ properties බලපානවා.

ex:

<h1 class="center"></h1> මේ header ඒකටත් උඩින් තිබ්බ CSS code ඒක බලපානවා.

මේකෙ තව විශේෂ දෙයක් තමයි අපිට attribute ඒකේ නමින්ම code ඒක හදාගන්න පුලුවන්.
කලින් උදාහරණයක්ම අපි ගත්තොත්...

<p class="center"></p> 

p.center{
                 color:red;
                 align-text:center;

}

මේක අපේ ඊට පස්සෙ උදාහරණය වුන <h1 class="center"></h1> ට බලපෑමක් කරන්නෙ නෑ. ඊට හේතුව අපේ CSS code ඒකේ "p.center" විදියට <p> tag ඒක define කරලා තියෙනවනෙ. ඒතකොට බලපාන්නෙ pට විතරයි.

CSS ගැන තවත් අලුත් දෙයක් ඊලග පාඩමෙන් කථා කරමු...

web ඉගෙන ගනිමු - 5 පාඩම

අපි කිව්වා වගේ මේ පාර අපි කථා කරන්නේ table හැ‍ද‍ෙන හැටි

 table හදන්න ගන්නෙ <table> </table> tag ඒක.
මේ කොටස අැතුලෙ තමයි table ඒක පවතින්නේ...

table ඒකක් වුනාම table raws තියෙන්න ඔින. table columns තියෙන්න ඔින, ඒ වගේම table data තියෙන්න ඔිනේ.
table raw වලට <tr></tr> කියන tag ඒක පාවිච්චි වෙන්නෙ. columns නම් html වලදි auto recognize කරගන්නවා. table headers වලට පාවිච්චි වෙන්නෙ <th></th> කියන tag ඒක. table data වලට ගන්නෙ <td></td>.  අපි බැලුවොත් මේ table වල codings තියෙන්නෙ කොහොමද කියලා...

<table border="1">
      <tr>
              <th> Name</th>
              <th>Age</th>
              <th>Address</th>
      </tr>
      <tr>
             <td>Aruna</td>
             <td>40</td>
             <td>Ampara</td>
      </tr>
</table>

මේ code ඒක browser ඒකේ වැඩ කරන්නෙ පහත දක්වලා තියෙන විදියට...

The Table

මේකෙ table tag ඒකේ පාවිච්චි වෙන මූලික attributes තමයි width, border, id වගේ දේවල්.

තවත් වැදගත් කාරනාවක් තමයි colspan සහ rawspan ...

colspan වලින් කෙරෙන්නෙ ඒකම row ඒකේ තියෙන columns දෙකක් ඒකතු කරන ඒක.
code ඒක type වෙන්නෙ මෙහෙම...

<table border="1">
      <tr>
              <th> Name</th>
              <th colspan="2">Address</th>
             
      </tr>
      <tr>
             <td>Aruna</td>
             <td>Anuradhapura</td>
             <td>Ampara</td>
      </tr>
</table>

Colspan Mode

rowspan වලින් කෙරෙන්නෙ ඒකම column ඒකේ තියෙන raws දෙකක් ඒකතු කරන ඒක.
code ඒක type වෙන්නෙ මෙහෙම...

<table border="1">
      <tr>
              <th> Name</th>
              <td>Aruna</td>
      </tr>
      <tr>
             <th rowspan="2">Address</th>
             <td>Anuradhapura</td>
      </tr>
      <tr>
              <td>Ampara</td>
      </tr>
</table>

Rowspan mode

අපි ඊලග පාර ඉදන් CSS කථා කරමු...

Web ඉගෙන ගනිමු - 4 පාඩම

කෝමද යාලුවනේ අදත් කථා කරන්න හිතුවෙ HTML වල ඉදිරි කොටසක්...

මුලින්ම කියන්නම් මේ html වල Comment ඒකක් ගහගන්නේ  කොහොමද කියලා.
<!--ඔයාට type කරන්න ඔින comment ඒක-->
මෙහෙම type කරන්න හේතු වෙන්නෙ අපි tag ඒකක් නැතුව type කරන හැමදේම web page ඒකේ display වෙන ඒක.

ඒ වගේම කථා කරන්න අාපු ප්‍රධාන කාරනාව HTML වලට CSS කියන භාෂාව පාවිච්චි කරන්නෙ කොහොමද කියලා...

මේකට පාවිච්චි වෙන්නෙ <style > tag ඒක

CSS පාවිච්චි වෙන්නෙ Cascadin Style Sheet විදියට...

Web page ඒකකට css දාන්න ප්‍රධාන ක්‍රම 3යි.
1. Inline ක්‍රමය
2.Internal ක්‍රමය
3.External ක්‍රමය

1.Inline ක්‍රමය

මේ ක්‍රමේදී tag ඒක අැතුලෙම අපිට ඔින tag ඒක type කරනවා.style කියන attribute ඒක තමයි පාවිච්චි කරන්නෙ.

<h1 style="color:blue">This is a heading</h1>

2.Internal ක්‍රමය

මේ ක්‍රමේදී type වෙන්නෙ <head></head> ඒක අැතුලේ. style කියන tag ඒක පාවිච්චි වෙන්නෙ...

<html>
<head>
    <title>
        CSS හැදෙන හැටි
    </title>

    <style>
         body{background-color:yellow;
                                }
         h1{ color:red;
                               }
    </style>

</head>
<body>

<h1>CSS creating</h1>

</body>
<html>

3.External ක්‍රමය

මේ ක්‍රමේදී පිටින් හදපු css file ඒකක් අපේ html file ඒකට set කරගන්නවා.
මම හදාගන්නවා style.css කියලා css file ඒකක්.

<html>
     <head>
           <link rel="stylesheet" href="style.css">
     </head>
     <body>
        <h1>This is a heading</h1>
    </body>
</html>

style.css හැදෙන්නෙ මෙහෙම..

 body{background-color:yellow;
                                }
         h1{ color:red;
                               }
ඊලග ලිපියෙන් කථා කරන්නෙ table හදන හැටි.
පොඩි කාරනා කිහිපයක් විතරයි මේ පාර css ගැන කථා කලේ...
ඉස්සරහට html ඉවර කරලා css ගැන කථා කරමු අපි...

ලගදිම අායෙත් හමුවෙමු...

WEB ඉගෙන ගනිමු - 3 පාඩම

අපි ලිපි 2කින් HTML කථා කලත් තාම HTML ඉවර නෑ. අද කථා කරන්නෙ html styling ගැන. ඒ කියන්නෙ පාට යොදවන හැටි ගැන. මේකට හුගක්ම පාවිච්චි වෙන්නෙ style කියන tag ඒක.

අපිට ඔිනනම් background ඒකට පාටක් දා ගන්න, අපි පාවිච්චි කරන්නෙ මේ tag ඒක.
<body style="background-color:yellow">
මේ tag ඒක පාවිච්චි කලාට පස්සෙ අපේ background ඒක කහ පාටට බලාගන්න පුලුවන්.
මේ style කියන attribute ඒක CSS language ඒකේ පාවිච්චි වුනත් HTML coding වලටත් ගන්න පුලුවන්.

<h1 style="color: red">HTML</h1>

• HTML

style attribute ඒකේ තවත් ප්‍රධාන property 1ක් තමයි font-family property ඒක.

<h3 style="font-family:verdana">This use the verdana font</h3>

• This use the verdana font

font-size property ඒක font ඒකේ size ඒකට බලපානවා.

<h3 style="font-size:20px">Font size is 20 px</h3>

• Font size is 20 px

text-align property ඒක පාවිච්චි වෙනවා අපි දාන text ඒක මොන පැත්තටද අැල වෙන්න ඔින කියන ඒක මත.
<h3 style="text align:center">Center is here</h3>

• Center is here 

මීලගට අපි කථා කරන්නෙ text formatting ක්‍රම ගැන.

1. Bold text <b> </b>

<b>This is bold one</b>

• This is bold one

2.Strong text <strong></strong>

<strong>This is strong one</strong>

• This is strong one

3.Italic text <i></i>

<i>This is Italic one</i>

• This is Italic one

4.Emphasized text <em></em>

<em>This is emphasized text</em>

• This is emphasized text

5.Marked text <mark></mark>

<mark>This is marked text</mark></br>This is normal text

This is marked text

This is normal text

6.Small text <small></small>

<small>This is small text</small>This is normal text

This is small text
This is normal text

7.Deleted text <del></del>

<del>This is deleted text</del>

This is deleted text
8.Insered text <ins></ins>

<ins>This is inserted text</ins>

This is inserted text
9.Subscript text 

_{This is Subscript text} This is normal text

_{This is Subscript text}  This is normal text

10. Superscript text 

^{This is superscript text} This is normal text

^{This superscript text} This is normal text

තවත් ඉස්සරහට HTML පාඩම් යනවා. අලුත් කොටසක් කතා කරමු ඊලග පාර...