Codul sursa - (page source). Ce inseamna?

O pagina web este o resursa web de obicei in format HTML sau xHTML. Browserul (fie el IE, Firefox, Chrome) citeste acest cod HTML si il interpreteaza, rezultatul fiind pagina pe care o cititi. Acest cod HTML este de fapt codul sursa al paginii.

Iata pasii pentru a vizualiza acest cod:

FIREFOX:

Meniu sus › View › View Page Source (Ctrl + U)

Right Click pe pagina vizualizata › View Page Source

Internet Explorer:

Meniu sus* › View › Source

Right Click pe pagina vizualizata › View Source

* In IE7 meniul poate fi ascuns; apasati ALT

Ar trebui sa puteti sa vizualizati in acest moment codul sursa al acestei pagini. El arata cam asa:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  
  5. <title>Creare web site | Cod sursa curat (page source)</title>
  6.  
  7.     <meta name="description" content="Web site-uri executate profesionist. Ce inseamna un cod sursa curat. Dezavantajele unui website lucrat neglijent." />
  8.     <meta name="keywords" content="creare web site, cod sursa, cod sursa curat" />
  9.     <meta name="author" content="SC. BEST WEB IMAGE SRL, Website: www.bestwebimage.ro"/>
  10.     <meta name="copyright" content="Nume: SC.Best WEB Image SRL, Adresa: Bucuresti, Romania"/>
  11.     <meta name="expires" content="never" /> 
  12.     <meta name="robots" content="index, follow" />
  13.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  14.     <meta http-equiv="Pragma" content="no-cache" />
  15.  
  16.     <link rel="icon" href="/favicon.ico" type="image/x-icon" />
  17.     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  18.     <link href="/public/styles/bwi-style_v1.3.0.css" rel="stylesheet" type="text/css" />
  19.     <link href="/public/styles/geshi.css" rel="stylesheet" type="text/css" />
  20.  
  21.     <!--[if lte IE 6]>
  22.     <script language="javascript" type="text/javascript" src="/public/js/iepngfix_tilebg.js"></script>
  23.     <link rel="stylesheet" type="text/css" href="/public/styles/ie-style_v1.0.css">
  24.     <![endif]-->
  25. </head>
  26.  
  27. <body>
  28.  
  29. <div id="page-frame">
  30.  
  31.     <div id="header">
  32.  
  33.         <div id="bwi-logo">
  34.  
  35.             <a href="/" title="Best WEB Image: Pagini web, Creare web site-uri" id="top">
  36.             <img src="/public/images/misc/best-web-image-header-logo.png" alt="Best WEB Image: Pagini web, Creare web site-uri" />
  37.             </a>
  38.  
  39.         </div>
  40.  
  41.         <div id="quote-frame">
  42.  
  43.             <p>Solutia ta pentru un website de calitate</p>
  44.  
  45.         </div>
  46.  
  47.         <div id="last-updated">
  48.  
  49.             <p>Actualizat: 20.03.2009</p>
  50.             <p>BWI v1.4</p>
  51.  
  52.         </div>
  53.  
  54.         <div id="header-flash">
  55.  
  56.             <div id="flashContent">
  57.                 <a href="http://www.adobe.com/go/getflashplayer">
  58.                     <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Descarcati Adobe Flash Player" />
  59.                 </a>
  60.             </div>
  61.  
  62.         </div>
  63.  
  64.     </div>
  65.  
  66.     <div id="main-menu-frame">
  67.  
  68.         <div id="main-menu">
  69.  
  70.             <ul>
  71.  
  72.                 <li><a href="/" title="Pagini web, Creare site, Best Web Image"><span>Best Web Image</span></a></li>
  73.  
  74.                 <li><a href="/vreau-site-web/" title="Vreau site web"><span>Vreau site</span></a></li>
  75.  
  76.                 <li><a href="#" title="Creare web site" class="submenu" onclick="return false;"><span>Creare web</span></a>
  77.  
  78.                     <ul>
  79.  
  80.                         <li><a href="/creare-web-site/cod-sursa-curat/" title="Cod sursa curat">Cod sursa curat</a></li>
  81.  
  82.                         <li><a href="/creare-web-site/compatibilitate/" title="Compatibilitate intre browsere">Compatibilitate</a></li>
  83.  
  84.                         <li><a href="/creare-web-site/valid-xhtml-si-css/" title="Valid xHTML si CSS">Valid xHTML, CSS</a></li>
  85.  
  86.                         <li><a href="/creare-web-site/structura-tableless/" title="Structura tableless">structura TABLELESS</a></li>
  87.  
  88.                         <li><a href="/creare-web-site/reguli-seo/" title="Reguli SEO">Reguli SEO</a></li>
  89.  
  90.                         <li><a href="/creare-web-site/sfaturi-google/" title="Sfaturi GOOGLE">Sfaturi GOOGLE</a></li>
  91.  
  92.                     </ul>
  93.  
  94.                 </li>
  95.  
  96.                 <li><a href="/cat-costa-un-site-web/" title="Preturi web design | Cat costa un site?"><span>Cat costa?</span></a></li>
  97.  
  98.                 <li><a href="/site-uri-web-create/" title="Ce site-uri web am creat?"><span>Site-uri web create</span></a></li>
  99.  
  100.                 <li><a href="/contact/" title="Contacteaza echipa Best WEB Image"><span>Contact</span></a></li>
  101.  
  102.             </ul>
  103.  
  104.         </div>
  105.  
  106.         <div id="search-frame">
  107.  
  108.         	<div id="search-left">
  109.                 <form id="search-form" name="searchForm" method="post" action="/cauta-pe-site/">
  110.                 	<input type="text" name="searchBox" id="searchBox" value="text de cautat..." disabled="disabled" />
  111.                 </form>
  112.             </div>
  113.  
  114.             <div id="search-right">
  115.             	<a href="#" title="Cauta pe site"></a>
  116.             </div>
  117.  
  118.         </div>
  119.  
  120.     </div>    
  121.     <div id="h1-frame">
  122.  
  123.         <h1>Un web site executat profesionist cu cod sursa curat</h1>
  124.  
  125.     </div>
  126.  
  127.     <div id="main-content-frame">
  128.  		<div id="articles-main-frame">
  129.         	<div id="articles-main-top">
  130.             	<div id="articles-main-bottom">
  131.                	  <div id="content-articole">
  132.                    	  <h2>Codul sursa - (page source). Ce inseamna?</h2>
  133.                         <p>O pagina web este o resursa web de obicei in format <abbr title="HyperText Markup Language">HTML</abbr> sau <abbr title="eXtensible HyperText Markup Language">xHTML</abbr>. Browserul (fie el <abbr title="Internet Explorer">IE</abbr>, Firefox, Chrome) citeste acest cod HTML si il interpreteaza, rezultatul fiind pagina pe care o cititi. Acest cod HTML este de fapt codul sursa al paginii.</p>
  134.                         <p>Iata pasii pentru a vizualiza acest cod:</p>
  135.  
  136.                         <div class="browsers-specifics">
  137.                           <div class="firefox">
  138.                             <div class="ff-header">FIREFOX: </div>
  139.                                 <p>Meniu sus <strong>›</strong> View <strong>›</strong> View Page Source (Ctrl + U)</p>
  140.                                 <p>Right Click pe pagina vizualizata <strong>›</strong> View Page Source</p>
  141.                             </div>
  142.                           <div class="ie">
  143.                             <div class="ie-header">Internet Explorer:</div>
  144.                                 <p>Meniu sus* <strong>›</strong> View <strong>›</strong> Source</p>
  145.                                 <p>Right Click pe pagina vizualizata <strong>›</strong> View  Source</p>
  146.                                 <p><strong>*</strong> In IE7 meniul poate fi ascuns; apasati ALT</p>
  147.                             </div>
  148.                         </div>
  149.  
  150.                         <div class="clear"></div>
  151.                         <p>Ar trebui sa puteti sa vizualizati in acest moment codul sursa al acestei pagini. El arata cam asa:</p>
  152.  
  153.                         <div class="code-box" style="height: 300px;"></div>
  154.  
  155.                         <p>Acesta este codul HTML al acestei pagini. Deoarece continutul acestei pagini este generat dinamic o sa observati ca exista pe alocuri zone de cod cu identare nepotrivita, insa per ansamblu acest cod este "citibil".</p>
  156.                         <p>Cu toate ca HTML/xHTML nu este un limbaj de programare anumite tehnici de a scrie cod se aplica si in acest caz si sunt recomandate.</p>
  157.                         <h2>Tehnici prin care faci un cod sursa curat ?</h2>
  158.                         <p><strong>CSS separat de HTML</strong>: Separand CSS-ul de codul HTML separi astfel design-ul paginii de continutul ei. Astfel codul css poate fi reutilizat si pentru alte pagini, iar daca doresti sa schimbi designul unei pagini nu trebuie sa rescrii si continutul acesteia.</p>
  159. 			<div class="code-box"></div>
  160.                         <p><strong>Javascript separat de HTML:</strong> Aceleasi motive ca la CSS se aplica si aici. Este mult mai elegant si mai usor de adus la zi o pagina care are separate aceste fisiere. Includerea fisierelor javascript este recomandabil sa fie facuta la sfarsitul paginii.</p>
  161.                         <div class="code-box"></div>
  162.                         <p><strong>Identarea (alinierea codului)</strong>: Cu ajutorul identarii codului putem identifica usor sectiunile unei pagini. Deasemenea cu ajutorul identarii poti vedea mult mai usor unde incepe si unde se termina un tag html evitand astfel erorile (printre cele mai comune erori la paginile HTML se afla neinchiderea unui tag <div></div>).</p>
  163.                         <p><strong>O instructiune pe linie:</strong> Orice <div>, <p>,<form>,<input>,<ul> este scris separat pe o singura linie. Exista si exceptii, de exemplu cazul <li> urmat de un <a> (des intalnit cand este creat un meniu) care este scris pe o singura linie.</p>
  164.                         <p><strong>Nume sugestive de id, class:</strong> Pentru toate tag-uri care necesita o clasa sau un id, este recomandat sa pui niste denumiri sugestive. De exemplu daca vreau sa denumesc partea de sus a paginii ii voi pune numele de "header". Ca sub elemente o sa am bwi-logo (bestwebimage logo) si quote-frame. Denumirile sunt puse in limba engleza pentru ca mi se par mai intuitive decat echivalentul lor in limba romana.</p>
  165.                         <div class="code-box"></div>
  166.  
  167.                         <p>In functie de proiectul la care lucrezi te poti lovi de anumite probleme de compatibilitate intre browsere sau de scripturi complexe de javascript care te obliga sa incalci anumite reguli, dar este o practica buna sa reduci aceste situatii la minim.</p>
  168.                         <h2>Cum sa NU scrii codul unei pagini:</h2>
  169.                         <p>Iata un exemplu de cum sa nu scrii codul sursa al unei pagini. Ce ati zice daca site-ul dumneavoastra ar fi scris asa?</p>
  170.                         <p>Cod CSS amestecat cu HTML si cu JavaScript. O combinatie total nereusita.</p>
  171.                         <div class="code-box" style="height: 300px;"></div>
  172.  
  173.                    	<h2>Avantajele unui website avand un cod sursa curat</h2>
  174.  
  175.                         <p>O companie care se respecta are anumite standarde de a scrie codul pe care le impune programatorilor sai. Acesta este doar unul din lucrurile care fac diferenta dintre webdeveloperi profesionisti si cei amatori.</p>
  176.                         <p>Principalul avantaj il reprezinta reutilizabilitatea codului. Daca va decideti peste 3 luni sa faceti niste modificari la web site veti investi <strong>mai mult timp si bani </strong>decat daca ati fi avut un web site cu un cod curat. De altfel anumite firme specializate o sa refuze sa lucreze cu acest cod sub acest pretext.</p>
  177.                         <p>Continutul unui web site de succes ar trebui sa se schimbe o data la 3 luni (ma refer la site-urile de prezentare). In aceste conditii un web site cu un cod sursa scris bine usureaza foarte mult procesul de schimbare a continutului.</p>
  178.                         <p>Deasemenea un astfel de web site nu va contine nici erori deoarece poti sa urmaresti codul foarte usor.</p>
  179.                         <p>Cineva din domeniu web care se va uita la site-ul dumneavoastra va spune, DA acesta web site este facut <strong>profesionist</strong>.</p>
  180.                         <p>&nbsp;</p>
  181.  
  182.                	  	</div>
  183.  
  184.                     <div class="clear"></div>
  185.  
  186.                 </div>
  187.             </div>
  188.         </div>
  189.         <div id="articles-menu-frame">
  190.         	<p><a rel="NOFOLLOW" title="Trimite pe Yahoo" class="yahoo" href="ymsgr:im?+&amp;msg=Avantajele+unui+website+avand+un+cod+sursa+curat:+http://www.bestwebimage.ro/creare-web-site/cod-sursa-curat/">Trimite pe Yahoo</a></p>
  191.             <p><a rel="NOFOLLOW" title="Listeaza pagina" class="print" href="javascript:window.print();">Print</a></p>
  192.             <p><a rel="NOFOLLOW" href="#top" class="jump-top">Mergi sus</a></p>
  193.  
  194.             <div class="separator"></div>
  195.  
  196.             <p class="other-articles-header">Alte articole</p>
  197.             <ul class="articles-menu">
  198.  
  199.                 <li><a href="/creare-web-site/cod-sursa-curat/" title="Cod sursa curat">Cod sursa curat</a></li>
  200.  
  201.                 <li><a href="/creare-web-site/compatibilitate/" title="Compatibilitate intre browsere">Compatibilitate</a></li>
  202.  
  203.                 <li><a href="/creare-web-site/valid-xhtml-si-css/" title="Valid xHTML si CSS">Valid xHTML, CSS</a></li>
  204.  
  205.                 <li><a href="/creare-web-site/structura-tableless/" title="Structura tableless">structura TABLELESS</a></li>
  206.  
  207.                 <li><a href="/creare-web-site/reguli-seo/" title="Reguli SEO">Reguli SEO</a></li>
  208.  
  209.                 <li><a href="/creare-web-site/sfaturi-google/" title="Sfaturi GOOGLE">Sfaturi GOOGLE</a></li>
  210.  
  211.             </ul>
  212.  
  213.             <div class="separator"></div>
  214.  
  215.             <div id="article-info">
  216.         	    <pre><span class="art-info-cat">Modificat:</span> 28.03.2009</pre>
  217.     	    	<pre><span class="art-info-cat">Adaugat: </span>  28.03.2009</pre>
  218. 	            <pre><span class="art-info-cat">Autor: </span>David Alexandru</pre>
  219.             </div>
  220.  
  221.         </div>
  222.     </div>
  223.  
  224.  <div id="footer-zone">
  225.  
  226.         <div id="bottom-menu">
  227.  
  228.             <ul>
  229.  
  230.                 <li class="go-to-top"><a href="#top" title="Mergi sus">Mergi sus</a> | </li>
  231.  
  232.                 <li><a href="/" title="Pagini web, Creare site, Best Web Image">Best Web Image</a> | </li>
  233.  
  234.                 <li><a href="/vreau-site-web/" title="Vreau site web">Vreau site</a> | </li>
  235.  
  236.                 <li><a href="/creare-web-site/" title="Creare web site">Creare web site</a> | </li>
  237.  
  238.                 <li><a href="/cat-costa-un-site-web/" title="Preturi web design | Cat costa un site?">Cat costa?</a> | </li>
  239.  
  240.                 <li><a href="/site-uri-web-create/" title="Ce site-uri web am creat?">Site-uri web create</a> | </li>  
  241.  
  242.                 <li><a href="/contact/" title="Contacteaza echipa Best WEB Image">Contact</a></li>
  243.  
  244.             </ul>
  245.  
  246.         </div>
  247.  
  248.         <div id="built-by-bwi"><a href="http://www.bestwebimage.ro/" title="Creat de Best WEB Image"></a></div>
  249.  
  250.         <div id="copyrighted">
  251.  
  252.             <p>©2008-2009 Best Web Image</p> 
  253.             <p>Solutia ta pentru un website de calitate</p>
  254.  
  255.         </div>
  256.  
  257.         <div id="quality-logos">
  258.  
  259.         	<ul>
  260.  
  261.                 <li><a href="http://validator.w3.org/check?uri=referer" title="Compatibil xHTML 1.0" target="_blank"><img src="/public/images/misc/w3c-xhtml-logo.jpg" alt="compatibil-xhtml" title="Compatibil xHTML 1.0"/></a></li>
  262.                 <li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://bestwebimage/public/styles/dev/bwi-style_v1.1.0.css" title="Compatibil CSS" target="_blank"><img src="/public/images/misc/w3c-css-logo.jpg" alt="compatibil-css" title="Compatibil CSS" /></a></li>
  263.                 <li><a href="http://w3tableless.com/?uri=http://bestwebimage/creare-web-site/cod-sursa-curat/" title="Structura TABLELESS" target="_blank"><img src="/public/images/misc/w3c-tableless-logo.jpg" alt="structura-tableless" title="Structura TABLELESS" /></a></li>
  264.  
  265.           </ul>
  266.  
  267.         </div>
  268.  
  269.     </div>
  270.  
  271.     <script type="text/javascript" language="javascript" src="/public/js/swfobject.js"></script>
  272.     <script type="text/javascript" language="javascript" src="/public/js/banners.js"></script>    
  273. 	<script type="text/javascript" src="/public/js/jquery-1.3.2.js"></script> 
  274. </div>
  275.  
  276. <!-- Google Analytics Zone -->
  277. <script type="text/javascript">
  278. var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  279. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  280. </script>
  281. <script type="text/javascript">
  282. var pageTracker = _gat._getTracker("UA-6140400-1");
  283. pageTracker._trackPageview();
  284. </script>
  285. </body>
  286. </html>

Acesta este codul HTML al acestei pagini. Deoarece continutul acestei pagini este generat dinamic o sa observati ca exista pe alocuri zone de cod cu identare nepotrivita, insa per ansamblu acest cod este "citibil".

Cu toate ca HTML/xHTML nu este un limbaj de programare anumite tehnici de a scrie cod se aplica si in acest caz si sunt recomandate.

Tehnici prin care faci un cod sursa curat ?

CSS separat de HTML: Separand CSS-ul de codul HTML separi astfel design-ul paginii de continutul ei. Astfel codul css poate fi reutilizat si pentru alte pagini, iar daca doresti sa schimbi designul unei pagini nu trebuie sa rescrii si continutul acesteia.

  1. <link href="/public/styles/bwi-style_v1.2.0.css" rel="stylesheet" type="text/css" />
  2.  
  3. <link href="/public/styles/geshi.css" rel="stylesheet" type="text/css" />

Javascript separat de HTML: Aceleasi motive ca la CSS se aplica si aici. Este mult mai elegant si mai usor de adus la zi o pagina care are separate aceste fisiere. Includerea fisierelor javascript este recomandabil sa fie facuta la sfarsitul paginii.

  1. <script type="text/javascript" language="javascript" src="/public/js/swfobject.js"></script>
  2.  
  3. <script type="text/javascript" language="javascript" src="/public/js/banners.js"></script>    
  4.  
  5. <script type="text/javascript" src="/public/js/jquery-1.3.2.js"></script>

Identarea (alinierea codului): Cu ajutorul identarii codului putem identifica usor sectiunile unei pagini. Deasemenea cu ajutorul identarii poti vedea mult mai usor unde incepe si unde se termina un tag html evitand astfel erorile (printre cele mai comune erori la paginile HTML se afla neinchiderea unui tag <div></div>).

O instructiune pe linie: Orice <div>, <p>,<form>,<input>,<ul> este scris separat pe o singura linie. Exista si exceptii, de exemplu cazul <li> urmat de un <a> (des intalnit cand este creat un meniu) care este scris pe o singura linie.

Nume sugestive de id, class: Pentru toate tag-uri care necesita o clasa sau un id, este recomandat sa pui niste denumiri sugestive. De exemplu daca vreau sa denumesc partea de sus a paginii ii voi pune numele de "header". Ca sub elemente o sa am bwi-logo (bestwebimage logo) si quote-frame. Denumirile sunt puse in limba engleza pentru ca mi se par mai intuitive decat echivalentul lor in limba romana.

  1. <div id="header">
  2.  
  3. 	<div id="bwi-logo">
  4.  
  5. 		<a href="/" title="Best WEB Image: Pagini web, Creare web site-uri">
  6.  
  7. 			<img src="/public/images/misc/best-web-image-header-logo.png" alt="Best WEB Image: Pagini web, Creare web site-uri" />
  8.  
  9. 		</a>
  10.  
  11. 	</div>
  12.  
  13. 	<div id="quote-frame">
  14.  
  15.         	<p>Solutia ta pentru un website de calitate</p>
  16.  
  17.     	</div>
  18.  
  19. </div>

In functie de proiectul la care lucrezi te poti lovi de anumite probleme de compatibilitate intre browsere sau de scripturi complexe de javascript care te obliga sa incalci anumite reguli, dar este o practica buna sa reduci aceste situatii la minim.

Cum sa NU scrii codul unei pagini:

Iata un exemplu de cum sa nu scrii codul sursa al unei pagini. Ce ati zice daca site-ul dumneavoastra ar fi scris asa?

Cod CSS amestecat cu HTML si cu JavaScript. O combinatie total nereusita.

  1. <body><div id="container">
  2. 	<div id="header">
  3. 		<table cellspacing="0" cellpadding="0">
  4. <tr><td align="left" valign="top" height="80" colspan="2">
  5. 	<img src="images/logo.png" align="left" hspace="7" vspace="2" height="70" width="121" style="behavior: url(iepngfix.htc);" />
  6. 	<h2 style="display: inline; font-family: 'Verdana'; font-size: 32px; color: #FFFFFF; padding:0px; margin:0px;">zzzz</h2><br />	
  7. 	<h1 style="display: inline; font-family: 'Verdana'; font-size: 22px; color: #FFFFFF; padding:0px; margin:0px; font-weight:normal">Cazare Pensiuni Bran</h1>
  8. </td></tr>
  9. <tr><td align="left" valign="top" height="303" width="710">
  10. <div id="info">
  11. 	<div id="image_bar">
  12. 		<img src="images/img_header.jpg" alt="zzzzzzz" />
  13. 		<img src="images/img_header3.jpg" alt="Castelul Bran - Dracula" />
  14. 		<img src="images/img_header2.jpg" alt="Restaurant - zzzz" />
  15. 		<img src="images/img_header4.jpg" alt="zzzz" />
  16. 		<img src="images/img_header5.jpg" alt="zzzz" />
  17. 	</div>
  18. 	<div id="title_bar">Pensiunea zzzzz</div>
  19. 	<script type="text/javascript">
  20. 	$('#image_bar').cycle({ 
  21. 	    fx:     'fade', 
  22. 	    delay:   3000,
  23. 	    speed: 500,
  24. 	    timeout: 5000, 
  25. 	    pause:   1,
  26. 	    next:   '#image_bar', 
  27. 	    before:  onBefore, 
  28. 	    after:   onAfter
  29. 	});
  30. 	function onBefore() { 
  31. 	    $('#title_bar').html('&nbsp;'); 
  32. 	} 
  33. 	function onAfter() { 
  34. 	    $('#title_bar').html(this.alt); 
  35. 	}
  36. 	</script>
  37. </div>
  38. </td><td align="left" valign="top" width="210">
  39. 	<div id="sidebar">
  40. 		<h2>conditii</h2> <h3>CAZARE</h3><br /><br /><br /><br />
  41. 		<ul>
  42. 		<li>zzz camere cu pat dublu, baie proprie si balcon</li>
  43. 		<li>zzz  apartamente cu baie proprie si balcon</li>
  44. 		<li>pensiunea beneficiaza de incalzire centrala tot anul</li>
  45. 		<li>restaurant propriu cu zzzz de locuri</li>
  46. 		<li>zzzz</li>
  47. 		<li>mai putin de zzzzz </li>
  48. 		<ul>
  49. 	</div>
  50. </td></tr>
  51. <tr><td align="left" valign="top" height="70" colspan="2">
  52. <div id="menu"><ul>
  53. <li><a href="index.php" class="selected" title="Pensiune">Pensiune</a></li><li><a href="servicii_oferite.php" onmouseover="this.style.background='url(images/buton.png)'" onmouseout="this.style.background='url(images/buton2.png)'" title="Servicii">Servicii</a></li><li><a href="cazare-bran.php" onmouseover="this.style.background='url(images/buton.png)'" onmouseout="this.style.background='url(images/buton2.png)'" title="Cazare">Cazare</a></li><li><a href="zzzz.php" onmouseover="this.style.background='url(images/buton.png)'" onmouseout="this.style.background='url(images/buton2.png)'" title="Zona Bran">Zona Bran</a></li><li><a href="localizare.php" onmouseover="this.style.background='url(images/buton.png)'" onmouseout="this.style.background='url(images/buton2.png)'" title="Harta">Harta</a></li><li><a href="team-building-bran.php" onmouseover="this.style.background='url(images/buton.png)'" onmouseout="this.style.background='url(images/buton2.png)'" title="Team Building">Team Building</a></li><li><a href="galerie_foto.php" onmouseover="this.style.background='url(images/buton.png)'" onmouseout="this.style.background='url(images/buton2.png)'" title="Imagini">Imagini</a></li><li><a href="contact.php" onmouseover="this.style.background='url(images/buton.png)'" onmouseout="this.style.background='url(images/buton2.png)'" title="Contact">Contact</a></li><ul></div>
  54. </td></tr>
  55. </table>	</div>

Avantajele unui website avand un cod sursa curat

O companie care se respecta are anumite standarde de a scrie codul pe care le impune programatorilor sai. Acesta este doar unul din lucrurile care fac diferenta dintre webdeveloperi profesionisti si cei amatori.

Principalul avantaj il reprezinta reutilizabilitatea codului. Daca va decideti peste 3 luni sa faceti niste modificari la web site veti investi mai mult timp si bani decat daca ati fi avut un web site cu un cod curat. De altfel anumite firme specializate o sa refuze sa lucreze cu acest cod sub acest pretext.

Continutul unui web site de succes ar trebui sa se schimbe o data la 3 luni (ma refer la site-urile de prezentare). In aceste conditii un web site cu un cod sursa scris bine usureaza foarte mult procesul de schimbare a continutului.

Deasemenea un astfel de web site nu va contine nici erori deoarece poti sa urmaresti codul foarte usor.

Cineva din domeniu web care se va uita la site-ul dumneavoastra va spune, DA acesta web site este facut profesionist.

 

Trimite pe Yahoo

Print

Mergi sus

Vor urma

Modificat: 28.03.2009
Adaugat:   28.03.2009
Autor: David Alexandru
Vizualizari: 2714