Site-uri și aplicații pentru web

Curs 6


Responsive Web Design

Generalități

Rezoluţiile ecranelor pe care un site trebuie să se afişeze pot varia în limeite largi. Odată realizat, un site trebuie să poată fi afişat corect atât pe ecranul unui telefon având o rezoluţie de 480x800 pixeli (ţinut vertical) sau chiar inferioară cât și pe un ecran cu rezoluția de 2560x1600 pixeli. Utilizatorii Web-ului accesează din ce în ce mai mult paginile de pe telefoane, ultimele statistici relevând faptul că peste 70% dintre accesări se realizează de pe telefoane mobile.

Suportul pentru tehnologia care permite acest lucru este integrat în HTML5 şi CSS3 iar trecerea de la design-ul clasic la varianta adaptabilă nu necesită mult efort.

Observație: În secțiunea head a fost adăugat sistematic un element meta destinat adaptării modului de redare în cazul utilizării de terminale cu ecran mic (telefoane, tablete):

   <meta name="viewport" content="width=device-width, initial-scale=1" />

CSS3 Media Query

CSS3 aduce în Web posibilitatea interogării browser-ului în legătură cu lăţimea efectivă a spaţiului de afișare (eng. viewport).

Scrierea regulilor de stilizare specifice unei anumite dimensiuni a spațiului de afișare sunt introduse printr-o interogare privind dimensiunea spațiului de afișare (eng. media query):

@media screen and (max-width: 770px) {
   bloc conținând reguli de stilizare specifice 
}

În exemplul dat, regulile se stilizare incluse în blocul introdus de media query vor fi aplicate ecranelor având maximum 770px.

Având în vedere tendința actuală de accesare a site-urilor predominant de pe mobil, există un trend în stilizare denumit mobile first. Site-urile astfel stilizate încep cu reguli destinate afișării pe ecranele telefoanelor, după care prin media query-uri succesive se introduc reguli de stilizare suplimentare, aplicabile ecranelor mai mari.

// Reguli aplicabile ecranelor având de la 0px la 600px
body {
  background: white;
}

// Reguli aplicabile ecranelor mai mari de 600px
@media (min-width: 600px) {
  body {
    background: yellow;
  }
}

Astfel scris, primul set de reguli se aplică ecranelor mici (mai mici de 600px) după care, folosind expresia @media (min-width: 600px) se introduce un bloc de reguli aplicabile ecranelor mai mari de 600px.

Se observă că proprietatea max-width utilizată în primul exemplu a fost înlocuită cu min-width

Procedând astfel, timpul de încărcare pe ecranul telefonului scade deoarece nu vor fi încărcate decât regulile din primul set, pasate înainte de media query.

Observație: Pentru Bootstrap, o colecție de componente Web prestilizate (începând cu versiunea 4 este mobile first), regulile de stilizare sunt definite prin media query-uri scrise astfel:

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

TOP

Aplicație

Revenind la site-ul revistei Vogue, în continuare va fi stilizată pagina prezentată deja în cursul 4. Pe un ecran mare, prima parte a paginii se afișează astfel:


Pregătirea

Deoarece dorim o pagină mobile first, se va simula o reprezentare pe mobil folosind facilitățile browser-ului. Prin urmare se va accesa opțiunea Inspect element a browser-ului (Google Chrome în acest caz) și apoi se va impune afișarea pe un ecran mic (iPhone X, în imagine):

Structura de pornire a paginii va fi următoarea (vezi aici) :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Studiu</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/reset.css" rel="stylesheet">
  <link href="css/stil.css" rel="stylesheet">
</head>

<body>

</body>
</html>

Se observă că pentru stilizare sunt folosite două fișiere, reset.css și stil.css. Fișierul reset.css ar putea avea conținutul prezentat deja la cursul 4.

/* Stiluri de resetare */
* {
    box-sizing: border-box;
}

aside, article, body, div, footer, header, html, nav, section, ol, ul, li, p {
    margin: 0;
    padding: 0;
}

/* Se poate de asemenea adăuga codul pentru a ușura exprimarea mărimii fonturilor */ 
html {
    font-size: 0.625rem;  /* pt. elementul html s-a impus 10px */
} 

Deoarece începând chiar în elementul header va trebui folosită o pictogramă din colecția Font Awesome (disponibilă și în alte colecții, desigur, dar Font Awesome este cea mai utilizată), va fi de asemenea inserată referința:

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Observație: Referința a fost copiată din documentația framework-ului Bootstrap, menționat deja.

Un alt fișier necesar este Savoy_Regular.ttf, menționat și la analiza inițială a paginii din cursul 4. El poate fi descărcat de pe site-ul https://fontsov.com/ și inserat în subdirectorul /css/ al site-ului.


Elementul header

Primul element din pagină, header, trebuie să ocupe pe lățime tot spațiul disponibil și să aibă înălțimea de 56px, rezultată din analiza acestuia:

De asemenea el trebuie să fie declarat folosind proprietatea: display: fixed. Deci fișierul de stiluri, stil.css, poate începe astfel:

@font-face {
  font-family: Savoy;
  src: url(Savoy_Regular.ttf);
}

#container{
    width: 100%;
}

header {
    display: fixed;
    height: 56px;
}

Conținutul secțiunii <body> a fișierului html ar putea fi acesta:

<body>
    <div id="container">
        <header>
            <div class="header_buton"><i class="fa fa-bars" aria-hidden="true"></i></div>
            <picture>
                <img src="imagini/logo-header.png" alt="logo">
            </picture>
            <div class="header_bloc_dreapta">SUBSCRIBE</div>
        </header>
    </div>
</body>

Se observă că acesta conține un element <div> având id="container". Este o practică uzuală, acest element fiind necesar pentru centrarea conținutului site-ului când acesta va fi afișat pe ecrane mari.

În lipsa unei stilizări adecvate, elementul <header> se va afișa astfel:


Stilizarea elementului header

Elementul <header> conține două elemente <div> care implicit sunt de tip bloc, deci ocupă întreaga lățime disponibilă. Un prim pas ar fi utilizarea proprietății display: inline-block;. Rezultat:

Regulile din fișierul stil.css sunt acum scrise astfel:

header {
    height: 56px;
}

.header_buton {
    display: inline-block;
    margin-left: 10px;
    font-size: 1.8rem;  
}

.header_bloc_dreapta {
    display: inline-block;
    margin-right: 10px;
    font: 1.3rem  helvtica, sans-serif;
    color: #333333;
}

Un pas suplimentar este spațierea corespunzătoare a elementelor și centrarea acestora pe verticală.

Pentru aceasta elementul header va fi declarat folosind proprietatea display: flex.

Într-un astfel de container, elementele conținute sunt distribuite de-a lungul unei axe principale (eng. Main Axis). Perpendicular pe aceasta există o a doua axă, axa secundară (eng. Cross Axis).

Pentru a dispune într-un anumit fel elementele în direcția principală se folosește proprietatea justify-content. Aceasta poate lua valorile: start, center, space-between, space-arround și space-evenly. Semnificațiile acestora rezultă din acest poster, care poate fi, eventual, imprimat.

În cazul considerat se va folosi justify-content: space-between; care asigură spațierea elementelor astfel încât distanța dintre ele să fie aceeași. Primul element este lipit de latura din stânga al containerului de tip flex iar ultimul este lipit de latura din dreapte.

Rezultat:

header {
    display: flex;
    justify-content: space-between;
    height: 56px;
}

.header_buton {
    display: inline-block;
    margin-left: 10px;
    font-size: 1.8rem;  
}

.header_bloc_dreapta {
    display: inline-block;
    margin-right: 10px;
    font: 1.3rem  helvtica, sans-serif;
    color: #333333;
}

Este evident un progres, dar blocurile trebuie centrate și pe verticală, deci de-a lungul axei secundare a șirului de blocuri. Proprietatea care controlează poziționarea elementelor de-a lungul axei secundare este align-items. Ea poate lua următoarele valori: stretch, center, start și end. Semnificațiile acestora pot fi înțelese din posterul menționat deja.

Pentru cazul considerat se va folosi align-items: center;.

Rezultat:

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
}

Totuși mai este o problemă. Cele două blocuri de la capetele containerului de tip flex nu au aceeași lățime. Aceasta face ca sigla firmei Vogue să nu fie centrată pe orizontală.

Soluție: Așa cum s-a mai zis, elementele având display: inline-block pot fi dimensionate folosind proprietățile cunoscute: width, height, padding, etc. Deci se poate impune o valoare identică pentru proprietatea width a celor două, elemente, de exemplu 80px. Mărimea aleasă este mai mare decât lățimea blocului mai mare, din dreapta.

Rezultat:

.header_buton {
    display: inline-block;
    margin-left: 10px;
    font-size: 1.8rem;
    width: 80px;
}

.header_bloc_dreapta {
    display: inline-block;
    margin-right: 10px;
    font: 1.3rem  helvtica, sans-serif;
    color: #333333;
    width: 80px;
}

Perfect. Deocamdată.


TOP

Formulare

Aplicaţiile web presupun afişarea unei interfeţe grafice, introducere de date și comenzi de către un operator şi prelucrarea lor. Prelucrările pot avea loc atât în browser (prin secvențe de cod scrise în JavaScript) cât și în aplicații care rulează pe serverul care găzduiește aplicația web.

În cele ce urmează va fi prezentată codificarea în html a elementelor HTML folosite la crearea formularelor: casete de text, butoane de diferite tipuri, controale cu listă etc..


Elementul <form>

Elementul form definește o secțiune dintr-o pagină web care conține controale Windows destinate trimiterii de informații spre un server pentru web. El este delimitat prin marcaje <form>… </form>.

Un element form poate conține două atribute caracteristice:

  • method defineşte numele unei metode implementată de aplicația de tip server web (Apache de exemplu) care trebuie lansată în execuție. Serverul web expune un set destul de larg de metode apelabile: GET, POST, PUT, HEAD, DELETE, PATCH și OPTIONS. În cadrul cursului vor fi utilizate numai două dintre ele, GET și POST. Apelul uneia dintre aceste metode determină lansarea în execuție pe server a unui script (în cadrul cursului va fi un script scris în limbajul PHP). Diferența dintre ele constă în modul de transmitere spre script a parametrilor necesari acestuia. Astfel GET transmite parametrii printr-un șir de caractere adăugat adresei scriptului apelat. Exemplu de apel a metodei GET:
  http://localhost/splendid/calcul.php?id_prod=23 

Mecanismul de transmitere specific metodei POST presupune transmiterea valorilor parametrilor prin fișierul standard de intrare al scriptului apelat (echivalentul stdin în limbajul C++). În cazul informațiilor sensibile se va folosi exclusiv POST deoarece browser-ul va memora în istoric apelurile scripturilor dar în cazul utilizării metodei GET în istoric vor fi vizibile și valorile parametrilor transmiși în momentul apelului. De asemenea va fi apelată metoda POST dacă se dorește modificarea unor date din baza de date a aplicației, GET fiind destinată exclusiv cererilor care nu presupun modificări ale bazei de date ci numai interogări ale acesteia.

  • action indică denumirea scriptului care va prelucra datele trimise. În funcție de limbajul utilizat (PHP, Python, Perl etc.) aplicația de tip server web va lansa în execuție un interpretor de cod specializat și va trimite acestuia fișierul precizat de atributul action.

Observație: Dacă preluarea datelor din formular se realizează în cadrul paginii web, prin funcții scrise în JavaScript, elementul form va fi inclus doar ca element de grupare, fără atributele method și action.

Pentru scrierea componentelor aplicaţiilor web care trebuie executate pe server s-au dezvoltat în timp diferite limbaje, cele mai răspândite fiind PHP, PERL, PYTHON sau Java.

Observație: Pentru modificarea aspectului implicit al unui control Windows dintr-un formular se folosesc stiluri. Pentru limitarea efortului de stilizare, frecvent se apelează la utilizarea unor colecții de componente prestilizate, cea mai utilizată fiind Bootstrap.

Exemplu de scriere a unui element <form>:

  <form method="post" action="programe/calcul.php">

Principalele tipuri de controale Windows


Elementul <input> de tip text

Acest element permite introducerea unui șir de caractere. Exemplu de utilizare:

  ...
  <h2>Formulare</h2>
  <form action="memo.php" method="post">
    <p>Numele și prenumele:</p>
    <label for="nume">Numele: </label>
    <input type="text" name="nume">< br>
    <label for="prenume">Prenumele: </label>
    <input type="text" name="prenume"> <br>
    <button type="submit">Trimite datele!</button>
 </form>
 ...

Elementele <label> care preced elementele <input> permit inserarea unor texte explicative.

Atributele name trebuie să aibă valori distincte în cadrul formularului deoarece servesc la crearea perechilor cheie - valoare care vor fi transmise aplicației care prelucrează datele (memo.php). Cheie va fi valoarea atributului name iar valoare va fi conținutul controlului Windows.

Rezultat:

Observație: Pentru ameliorarea aspectului formularului se impune definirea unor stiluri sau utilizarea unei colecții de componente prestilizate (Bootstrap de exemplu).


Elementul <input> de tip password

Acest element permite introducerea unei parole. Singura diferență față de elementul de tip text este ascunderea caracterelor tastate. Exemplu de utilizare:

  ...
  <h2>Conectare cu nume și parolă</h2>
  <form action="login.php" method="post">
    <label for="nume">Numele de client: </label>
    <input type="text" name="nume"><br>
    <label for="parola">Parola: </label>
    <input type="password" name="parola">< br>
    <button type="submit">Conectare!</button>
 </form>
 ...

Rezultat:


Elementul de tip <textarea>

Acest element permite crearea unui control Windows care permite introducerea textelor lungi. În momentul definirii se va preciza numărul de linii care vor fi vizibile. Exemplu de utilizare:

  <h2>Sesizare privind funcționarea serviciului</h2>
  <form action="sesizare.php" method="post">
    <label for="nume">Numele de client: </label>
    <input type="text" id="nume" name="nume"><br>
    <label for="parola">Parola: </label>
    <input type="password" id="parola" name="parola"><br>
    <textarea name="rezumat" rows="5" cols="100">Descrierea incidentului:</textarea><br>
    <button type="submit">Trimite mesajul!</button>
 </form>

Rezultat:


Elementul <input> de tip checkbox

<input type="checkbox"> definește o casetă de validare. Casetele de validare permit selectarea uneia sau mai multor opțiuni sau chiar neselectarea niciuneia. Exemplu de utilizare:

  <h2>Cursuri active:</h2>
  <form action="selactiv.php" method="post">
  <p>Selectați cursul pe care doriți să-l urmați<sup>(*)</sup>:</p>
  <input type="checkbox" name="bir" value="opt1"> Aplicații pentru birotică<br>
  <input type="checkbox" name="progr" value="opt2"> Complemente de programare<br>
  <input type="checkbox" name="bdate" value="opt3"> Baze de date<br>
  <button type="submit">Am selectat!</button>
  </form>
  <p><sup>(*)</sup> Puteți selecta mai multe cursuri.</p>

Rezultat:


Elementul <input> de tip radio

<input type="radio"> definește un buton radio. Butoanele radio permit selectarea unei opțiuni dintr-un set predefinit. Exemplu de utilizare:

  <form action="selectare.php" method="post">
  <p>Selectați semestrul:</p>
  <input type="radio" name="sem" value="s1" checked> Semestrul I (octombrie-martie)<br>
  <input type="radio" name="sem" value="s2"> Semestrul II (martie-iulie)<br>
  <input type="radio" name="sem" value="s0"> Nu știu<br>
  <button type="submit">Mai departe...</button>
  </form>

Rezultat:

Observație: Pentru a obține efectul de grupare a butoanelor radio, proprietatea "name" va avea aceeași valoare pentru toate controalele din cadrul grupului.


Elementul de tip <select>

Elementul <select> permite definirea controalelor Windows complexe de tip text plus listă (casetă combinată, eng. combobox). Acest control afişează o valoare. Selectarea acesteia sau a săgeţii din dreapta ei cu mouse-ul va provoca afişarea listei asociate, operatorul putând selecta un alt element din listă.

Conținutul listei afișate se definește folosind elemente <option>.

Exemplu:

  <h2>Acces în magazinul nostru:</h2>
  <form action="selprod.php" method="post">
  <p>Selectați o categorie de produse:</p>
  <select id="raion" name="raion">
    <option value="niciuna" selected>(niciuna)</option>
    <option value="alimente">Produse alimentare</option>
    <option value="bautura">Băuturi</option>
    <option value="cosmetice">Cosmetice</option>
    <option value="menaj">Articole de menaj</option>
  </select><br>
  <button type="submit">Mai departe...</button>
  </form>

Rezultat:


Elementul de tip <button>

<input type="button"> definește un buton. Butoanele servesc la declanșarea unor acțiuni, deci acestora le sunt asociate de obicei funcții JavaScript. Totuși, în cazul în care un astfel de element are un atribut type="submit", el va iniția rularea pe server a scriptului asociat formularului, precizat prin atributul "action" al elementului <form>.


TOP