În Tutoriale

Primii pași în scrierea codului unui site web

pasi in codare website

Multă lume vorbește despre HTML5, CSS3 sau SEO, însă, din păcate, nu am reușit să găsesc suficiente articole care să combine toate aceste subiecte într-un exemplu scurt și la obiect. Așadar, astăzi, voi încerca să vorbesc despre primii pași pe care trebuie să îi urmăm atunci când începem scrierea codului unui site web.

Voi încerca să mă rezum la crearea unei singure pagini web în care să acoperim cele mai importante aspecte de care ținem cont atunci când începem lucrul la un nou site.

Pasul 1: Structura folderelor pe server

Este, probabil, primul lucru pe care îl facem atunci când începem să lucrăm la un site nou. Depinde, în mare măsură, de amploarea proiectului, dar structura pe care o folosesc eu, personal, și care nu m-a dezamăgit până în prezent, arată cam așa în faza de inițializare a proiectului:

root/

index.php (pagina de pornire)

upload/ (dosar pentru stocarea imaginilor și altor fișiere necesare site-ului)

include/

header.php (header-ul site-ului, parte comună a tuturor paginilor)

footer.php (footer-ul site-ului, parte comună a tuturor paginilor)

assets/

css/

ui.css (stiluri generale)

js/

common.js (scripturi generale)

img/ (imagini ce au legătură cu stilizarea site-ului, cum ar fi sprite-urile)

Fișierele header.php, footer.php, common.php și common.js vă vor salva de conținut duplicat și cazuri de copy-paste, necesare atunci când se actualizează anumite elemente comune mai multor fișiere.

Pentru ca această structură să funcționeze, veți avea un mediu de lucru care suportă PHP, cum ar fi un server pe internet sau unul local. Dacă optați pentru un server local, recomandările mele sunt WAMP și EasyPHP.

Pasul 2: Inserarea tag-urilor de inițializare a proiectului

Nu sunt multe situații în care vom mai fi nevoiți să folosim un alt DOCTYPE decât cel HTML5, iar codul inițial al paginii index.php, conform structurii de mai sus, ar arăta cam așa:

<!DOCTYPE html>
  <html lang="en">
    <head>
    <meta charset="UTF-8" />

    <title>Titlul reprezentativ paginii curente</title>
    <meta name="description" content="Descrierea paginii, necesara pentru SEO" />

    <link href="assets/css/ui.css" rel="stylesheet" type="text/css" />
    <script src="assets/js/common.js" type="text/javascript" charset="utf-8"></script>

    <!--Creeaza elementele HTML5 pentru browsere mai vechi decat IE9-->
    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <?php include('include/header.php'); ?>
    <?php include('include/footer.php'); ?>
  </body>
</html>

Desigur, puteți include aici și un shortcut icon, librării javascript, meta tag-uri sociale și alte tag-uri necesare proiectului vostru. Codul de mai sus este minimum necesar oricărui proiect web nou.

Pasul 3: Începerea scrierii codului

Nu știu alții cum sunt, dar eu când mă gândesc la începerea scrierii codului unui site web, mă apuc de structura HTML a acestuia.

De prima dată de când am aruncat un ochi peste imaginea de mai sus, am observat câteva elemente distincte pe care le putem structura schematic, astfel:

  • Header-ul site-ului care cuprinde o listă cu linkurile de navigare prin paginile site-ului și un link extern  (header > nav > ul, aside)
  • Titlul paginii (h1)
  • Două coloane de conținut, fiecare având mai multe elemente (section > article)
  • Prima coloană conține o descriere (article) și o listă de linkuri (ul)
  • A doua coloană conține două imagini și descrierile acestora (article > figure > img + figcaption)
  • Footer-ul site-ului care cuprinde o singură linie de text (footer)

Este important să avem o structură HTML bine definită încă de la începutul proiectului, nu doar pentru a avea o imagine de ansamblu cât mai clară asupra acestuia, dar și pentru a ne acomoda cu cantitatea de informație și pentru a ne asigura că structura este corectă din punct de vedere semantic, ceea ce ne va ajuta și în eforturile depuse ulterior în vederea optimizării pentru motoarele de căutare.

Din datele de mai sus, putem deja formata codul HTML din interiorul tag-ului body, care va arăta cam așa:

<!-- header.php -->
<header>
  <nav>
    <ul>
      <li><a href="#">Acasa</a></li>
      <li><a href="#">Portofoliu</a></li>
      <li><a href="#">Despre Mine</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <aside>
    <a href="#">Urmareste-ma pe Facebook</a>
  </aside>
</header>

<!-- Continut index.php -->
<h1>Titlul vizibil al paginii</h1>

<section>
  <h2>Identitate / Website</h2>
  <article>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
    <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
    <p>Client: Up</p>
  </article>
  <article>
    <ul>
      <li><a href="#">Google.com</a> - a search engine</li>
      <li><a href="#">Facebook.com</a> - for all your social needs</li>
      <li><a href="#">Twitter.com</a> - 140 character updates</li>
      <li><a href="#">Tumblr.com</a> - the microbogging platform</li>
    </ul>
  </article>
</section>

<section>
  <article>
    <figure>
      <img src="upload/up3.jpg" alt="Up Print" />
      <figcaption>Up Print - <a href="#">Viziteaza Up</a></figcaption>
    </figure>
  </article>
<article>
  <figure>
    <img src="upload/up3.jpg" alt="Up Website Homepage" />
      <figcaption></figcaption>
    </figure>
  </article>
</section>

<!-- footer.php -->
<footer>Footer-ul site-ului. &copy; ProiectulMeu.ro 2013</footer>

Desigur, vom separa tag-urile header și footer în fișierele PHP corespunzătoare. În general, prefer să structurez o parte cât mai mare din codul HTML înainte de a face modificări în fișierul CSS pentru a nu fi tentat să sar€™ peste diferite elemente semantice din comoditate. Ulterior, putem aplica diverse ajustări structurii stabilite inițial, în funcție de problemele întâmpinate pe parcursul dezvoltării proiectului și eventualelor modificări apărute în timpul procesului de lucru.

Pasul 4: Stiluri CSS

Odată ce am stabilit structura paginii web, putem începe definirea stilurilor. Putem face asta prin a defini câteva clase și reguli generale pe care le vom putea refolosi în pagina web, cum ar fi resetarea listelor, o clasă de grid, care definește lățimea layout-ului și centrarea paginii în browser, precum și stilurile de ancoră cel mai des apărute în design.

html,
body {margin:0; font-family:Arial, Helvetica, sans-serif; background-color:#F0F0F0; color:#999; font-size:0}
 
/*Defineste reguli si clase generale*/
a{text-decoration:none;color:#3B5998;outline:none;font-style:normal}
a:hover{text-decoration:underline}
 
ul{list-style:none;margin:0;padding:0}
ul li{display:inline-block;margin:0;padding:0}
figure{margin:0}
 
.inline{display:inline-block}
.grid{width:960px;margin:0 auto}

Pasul următor ar putea fi adăugarea de clase specifice elementelor din header și completarea stilurilor corespunzătoare acestora.

<header>
  <nav class="grid">
    <ul class="top-nav inline">
      <li><a href="#">Acasa</a></li>
      <li><a href="#">Portofoliu</a></li>
      <li><a href="#">Despre Mine</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <aside class="inline">
      <a href="#">Urmareste-ma pe Facebook</a>
    </aside>
  </nav>
</header>

/*Iar in CSS, Site header*/
header{line-height:80px;height:55px;font-size:12px;background-color:#2F2F2F;position:fixed;left:0;top:0;width:100%;z-index:1;border-bottom:1px solid #fff;transition:background 200ms;overflow:hidden}
header:hover{background-color:#000;}
.top-nav {font-size:0}
.top-nav a {padding:0 10px;color:#999;font-size:12px;}
.top-nav li:first-child a {padding-left:0}
.top-nav a:hover {color:#fff;text-decoration:none}
.facebook{color:#fff;padding:2px 5px;background:#3B5998;transition:all 250ms}
.facebook:hover{text-decoration:none;color:#3B5998;background:#fff}

Vom continua la fel și pentru restul secțiunilor din site (codul integral îl puteți găsi în fișierul atașat mai jos).

Pe parcursul dezvoltării mai multor proiecte web, probabil veți observa apariția unor clase generale de care veți avea mereu nevoie, cum ar fi:

.fl {float:left}
.fr {float:right}
.inline{display:inline-block}
.clear{clear:both}
.grid{width:1280px;margin:0 auto}

..și alte astfel de clase.

Este bine să ne obișnuim cu un set personalizat de clase generale, întrucât ne pot reduce timpul de muncă la stilurile proiectului web în mod semnificativ.

De asemenea, țineți cont întotdeauna de principiile DRY pentru a ușura procesul de lucru și a evita situațiile neplăcute care pot apărea în urma acțiunilor de copy-paste.

Pentru a completa site-ul, vom urca cele două imagini necesare paginii în folderul root/upload pe care l-am definit încă de la începutul proiectului.

Pe voi, cei mai experimentați în front-end development, vă întreb, de curiozitate, ce alte sfaturi puteți împărtăși cu cititorii noștri care sunt începători într-ale programării și ce le puteți recomanda pentru a le face învățarea mai ușoară? Ce alte probleme ați întâmpinat voi în procesul de învățare? Aștept comentariile voastre, mai jos.

☞ Descarcă Arhiva

(fişier ZIP)

Sursă imagine