Cursul Website Building

Cursul Website Building este dedicat abordărilor moderne ale dezvoltării site-urilor web. Cursul, prin mai multe module conexe, le permite cursanților să creeze în mod independent site-uri web folosind limbaje HTML, CSS și JavaScript, dar și unele dintre cele mai cunoscute cadre software și biblioteci de astăzi.

Descrierea și scopul cursului Website Building

Pentru a crea un layout, cursul Website Building abordează cel mai popular cadru de software front-end – Bootstrap. Bootstrap permite crearea de medii de utilizator foarte eficiente pe web, respectând postulatele designului responsive și mobile first. Cursanții vor avea ocazia să se familiarizeze cu cel mai puternic sistem grid pentru aranjarea elementelor, dar și cu numeroase abordări Bootstrap care permit stilizarea eficientă a aproape tuturor elementelor HTML.

Pentru a le permite cursanților să creeze site-uri dinamice, interactive, cursul Website Building abordează diferite tehnici de preluare a controlului asupra browserului și asupra documentului HTML în sine. Astfel, sunt prezentate mai întâi abordările JavaScript de bază pentru utilizarea interfețelor de programare a aplicațiilor browser încorporate, care îi permit programatorului să obțină diferite informații despre browser și dispozitivul utilizatorului și să preia controlul asupra structurii documentului HTML. Cursanții vor învăța cum să schimbe dinamic structura, stilizarea și conținutul documentelor HTML și să proceseze diferitele evenimente pe care browserele le pun la dispoziția codului JavaScript.

În cursul Website Building, o atenție deosebită este acordată uneia dintre cele mai vechi și mai faimoase biblioteci JavaScript – jQuery. Este vorba despre o bibliotecă care simplifică foarte mult numeroase aspecte ale programării client, prin simplificarea logicii care trebuie formulată pentru efectuarea unor operații standard.

La final, pentru a completa povestea dezvoltării moderne a site-urilor, cursul Website Building ilustrează diferite abordări ale integrării graficelor vectoriale și hărților geografice. Este vorba despre elementele care sunt ingrediente indispensabile ale site-urilor de astăzi.

Finalizarea fiecăreia dintre domeniile enumerate ale cursului Website Building implică aplicarea a ceea ce s-a învățat pe exemplul realizării unui site web real pentru cafenele. Astfel, cursul Website Building prezintă procesul de creare a site-urilor moderne, de la prima linie scrisă până la un produs software complet funcțional.

Scopul cursului este de a le permite cursanților să creeze în mod independent site-uri web folosind Bootstrap, jQuery, grafică vectorială și biblioteci pentru integrarea hărților.

Website Building

Profesorul nostru, Silviu Ojog, vă prezintă pe scurt importanța cursului Website Building.

Cursul Website Building vă va răspunde la următoarele întrebări:

1. Ce este Bootstrap?

În cursul Website Building, se acordă o atenție deosebită învățării diferitelor funcționalități ale unuia dintre cele mai populare framework-uri software de pe front-end. Este vorba despre Bootstrap. Bootstrap a fost creat de Mark Otto și Jacob Thornton, ca instrument intern al companiei Twitter pentru a obține aspectul și comportamentul uniform al aplicațiilor web ale acestei companii. Apoi, Bootstrap a ieșit din compania Twitter și a devenit un produs open source disponibil public, care se poate utiliza complet gratuit.

Bootstrap facilitează crearea de site-uri web având deja scrisă o cantitate mare de stilizare, pe care programatorii le pot folosi atunci când creează site-uri web. O astfel de stilizare ajută la crearea unui afișaj uniform pe toate browserele web, facilitează aranjarea elementelor și accelerează optimizarea site-urilor web pentru diferite dispozitive. Totuși, Bootstrap este mult mai mult decât un set de stiluri. De fapt, este un cadru software destinat dezvoltării front-end.

2. Ce este Bootstrap grid?

Grid este o formă care este foarte des folosită în designul web pentru a crea layout-uri. De fapt, grid este structura de bază, adică scheletul designului. Este format din linii invizibile, ale căror intersecție construiește o structură, adică un sistem care poate fi folosit pentru aranjarea elementelor. În cazul designului web, aceste elemente sunt componentele grafice și conținuturile de diferite tipuri care alcătuiesc un singur site web.

Bootstrap este cu siguranță cel mai cunoscut pentru sistemul său grid, ale cărui caracteristici esențiale sunt ușurința în utilizare și puterea mare de configurare. Conceptele de bază ale unui astfel de sistem sunt containerele, rândurile și coloanele. Prin combinarea acestor elemente, Bootstrap permite ca layout-ul definit de wireframe sau machetă să fie ușor convertit într-o structură funcțională, responsive a elementelor HTML.

Cursul Website Building studiază toate abordările relevante pentru crearea unei Bootstrap grid și adaptarea sa la nevoile site-ului web care se dezvoltă.

3. Ce este BOM?

Cunoașterea regulilor sintactice și lexicale ale limbajului JavaScript este esențială astăzi pentru munca de succes a programatorilor front-end. Cu toate acestea, cunoașterea foarte bună a elementelor lexicale de bază ale limbajului este doar un bilet de intrare în lumea programării web. Cu alte cuvinte, pe lângă o bună cunoaștere a JavaScript, pentru crearea de site-uri moderne este nevoie de o înțelegere a funcționalității pe care browserele web le pun la dispoziția programatorilor.

Setul de astfel de funcționalități care sunt destinate să interacționeze cu browserul web însuși, adică fereastra în care este afișat documentul HTML, este foarte adesea numit colectiv Browser Object Model. Nu există nicio specificație oficială care să standardizeze BOM, dar majoritatea browserelor web oferă funcționalități identice. Câteva dintre exemplele de funcționalități care se încadrează în modelul obiect al unui browser web sunt: ​​posibilitatea de a muta fereastra, posibilitatea de a redimensiona fereastra, de a obține informații despre browserul web, de a gestiona istoricul paginilor web vizitate.

Cursul Website Building abordează detaliat modelul obiect al unui browser web, ceea ce le permite cursanților să preia controlul asupra ferestrei documentului și să optimizeze în continuare site-urile pe care le dezvoltă.

4. Ce este DOM?

Setul de funcționalități care permit controlul programabil asupra unui document HTML este denumit în mod colectiv interfața de programare a aplicației a modelului obiect al documentului sau, pe scurt, DOM API.

Un document HTML este alcătuit din elemente care îi construiesc structura. Astfel de elemente JavaScript nu au o semnificație specială. Dar atunci când sunt compilate în obiecte, se obțin entități pe care JavaScript le poate folosi. Și tocmai aceasta este caracteristica de bază a lui DOM –  este vorba despre obiecte care reprezintă elemente HTML.

Reprezentarea obiectuală a structurii documentului permite limbajului JavaScript să interacționeze cu ușurință cu documentul.

Analizarea structurii și funcționalității DOM în cursul Website Building le va permite cursanților un control programabil complet al codului HTML – adăugarea și eliminarea elementelor, definirea conținutului nou sau modificarea celui existent, gestionarea stilizării.

5. Ce este jQuery?

La crearea site-urilor web, se pot folosi diferite biblioteci, cadre software și instrumente. Toate sunt menite să faciliteze crearea de site-uri web sau a unor părți ale acestora. Una dintre cele mai vechi astfel de biblioteci este jQuery. Are scopul de a facilita manipularea browserului și a documentului.

jQuery este o bibliotecă JavaScript creată de John Resig în 2006, sub sloganul Write less, do more – Scrie mai puțin, fă mai mult. Scopul de bază al bibliotecii jQuery poate fi dedus din acest slogan. Și anume, jQuery simplifică realizarea multor aspecte ale programării web client.

Cursul Website Building acoperă funcționalitățile jQuery în detaliu. Astfel, cursanții se familiarizează cu selectori de bază și avansați, cu diferite modalități de a defini logica care se va activa atunci când are loc un eveniment, dar și cu funcționalitățile care promovează manipularea modelului obiect al documentului.

6. Cum se integrează grafica vectorială în HTML?

Site-urile web moderne nu pot fi imaginate fără elemente grafice vizuale, cum ar fi logouri, iconițe, imagini de fundal, grafici, ilustrații și altele. Se poate spune că site-urile web de astăzi sunt dominate de conținut grafic, care în majoritatea situațiilor îi poate transmite vizitatorului mesajul dorit într-un mod mult mai bun și mai clar decât textul „pur”. În ultimii ani, abordarea principală pentru integrarea logourilor, iconițelor și diagramelor în documentele HTML a fost utilizarea graficelor vectoriale.

Vectorii sunt un tip special de grafică care nu se bazează pe conceptul de pixeli și pe pozițiile și culorile acestora. De aceea, este vorba despre o grafică care are numeroase avantaje în comparație cu rasterele: ocuparea resurselor, dimensiunea arbitrară, calitatea afișajului, posibilitatea de manipulare programabilă.

Datorită importanței vectorilor pe web-ul de astăzi, cursul Website Building acordă o atenție deosebită diferitelor modalități de integrare a acestora în documentele HTML. Pe lângă abordarea integrării graficelor pe care o creăm singuri folosind SVG, cursul abordează și utilizarea mai multor biblioteci externe de iconițe vectoriale, în primul rând Font Awesome și Google Material Design Icons.

7. Cum se integrează hărțile web interactive în documentele HTML?

Interactivitatea este una dintre caracteristicile de bază ale site-urilor web moderne. Așadar, astăzi, întreaga comunitate implicată în dezvoltarea web se străduiește ca site-urile web simple, de prezentare, să le ofere utilizatorilor mai mult decât text și fotografii. Unul dintre exemplele de interactivitate a site-ului web sunt și hărțile.

Prima asociere cu hărțile de pe site-urile web pentru majoritatea este probabil secțiunea de contact sau o pagină separată cu o hartă care indică locația în care se află obiectul de interes al site-ului. Abordările moderne de integrare a hărților digitale în site-uri web vă permit să transformați hărțile geografice statice în elemente complet interactive de design web, care le pot oferi utilizatorilor mult mai mult decât o simplă perspectivă asupra adresei unei companii, organizații sau persoane.

Cursul Website Building prezintă diferite abordări pentru integrarea hărților în site-uri web, dar și pentru preluarea controlului total programabil asupra acestora.

Planul și programa cursului

Modulul 1: Crearea layout-ului folosind Bootstrap

• Introducere în Bootstrap grid
• Setarea grilei Bootstrap

Modulul 2: Utilizarea grilei Bootstrap pentru stilizarea conținutului

• Text și imagini
• Liste și tabele
• Formulare și butoane

Modulul 3: Manipularea documentului și a browserului 

• Manipularea ferestrei browserului web
• Modelul obiectual al documentului
• Evenimente 

Modulul 4: jQuery

• Bazele jQueryž
• Selectori și evenimente jQuery
• Manipularea conținutului, a structurii și stilizării folosind biblioteca jQuery

Modulul 5: Grafica vectorială și hărțile 

• SVG
• Iconițele vectoriale
• Hărțile