Devino programator Frontend JavaScript

Cursul Advanced Website UI Design and Animation

Cursul abordează conceptul de creare a părții de client a aplicației web sau a părților sale cu ajutorul lui JavaScript și a tehnologiilor aferente. Conținutul acestui curs cuprinde în totalitate unitatea creării aplicației web și conține soluții pentru diferite tipuri de cereri. Se explică cum se poate integra JavaScript în HTML. La curs, accentul se pune pe lucrul cu conținutul HTML a paginii, cu ajutorul tehnologiei DOM, și asta prin diferite abordări – de la JavaScript curat până la utilizarea bibliotecii populare JQuery. 

Cursul oferă răspunsuri la întrebările privind accesul elementelor HTML pe pagină. Cum se creează, cum se modifică sau cum se creează dinamic stilizarea lor. Este abordată în detaliu tehnologia Document Object Model (DOM), API-urile ei, caracteristicile, precum și diferitele moduri de utilizare. În această secțiune, cursantul poate învăța cum să facă tranziția elementelor, cum să reducă sau să mărească elementele sau să le schimbe conținutul.

Cursul abordează utilizarea lui JQuery AJAX API, cu ajutorul cărora se pot efectua într-un mod simplu cereri asincrone către server. Pe lângă gestionarea de bază a elementelor HTML încorporate, cursul abordează și lucrul cu controale avansate prin biblioteca JQuery UI. Datorită acestui adaos, JQuery se poate transforma într-un instrument puternic pentru crearea interfeței grafice cu utilizatorul, a cărei gestionare o veți asimila pe durata acestui curs.

Sunteţi interesat de acest curs? Îl puteţi parcurge în cadrul acestor programe LINK Academy: Frontend JavaScript Development Nou.

Descrierea și obiectivele cursului Advanced Website UI Design and Animation

Cursul Advanced Website UI Design and Animation a fost creat cu accentul pe pregătirea completă a cursantului pentru lucru pe părțile de client ale aplicației web. După parcurgerea sa, cursantul va putea să îmbogățească prezentarea existentă cu funcționalitatea de client, cu animații și interacțiune cu utilizatorul. Va putea să înțeleagă, să planifice și să implementeze o soluție pentru orice cerere referitoare la partea de client a aplicației și va asimila cu succes tehnicile pentru manipularea lui DOM și a bibliotecilor JQuery și JQuery UI.

Având în vedere că este un curs unde veți asimila abilități foarte importante pentru viitoarea voastră profesie, întreaga materie este împărțită în unități tematice, așa-numitele module. Astfel, fiecărui modul i se va dedica suficientă atenție și în același timp va oferi treptat cursanților cunoștințe pentru a le ușura studiul în continuare. 

Primul modul a acestui curs se va ocupa cu implementarea limbajului de programare JavaScript în browser. Aici cursanții se vor familiariza cu script tags, cu tehnicile de împachetare, distribuții și securitatea codului JavaScript, După asimilarea cunoștințelor menționate, urmează modulul în care se pune accentul pe JavaScript DOM. Cu această ocazie, vine rândul lecțiilor legate de structura și ierarhia obiectelor DOM, precum și a abilităților care se referă la manipularea obiectelor DOM. În acest modul, viitorii programatori frontend vor învăța să manipuleze formularele.

În modulul următor, denumit Grafica și animație, cursanții vor lucra la integrarea și utilizarea graficii SVG, gestionarea tranzițiilor CSS, precum și gestionarea execuției amânate (setInterval, setTimeout). Apoi urmează cursul care este dedicat bibliotecilor JQuery. Aici cursanții se vor familiariza cu conceptele de bază privind implementarea și utilizarea lui JQuery, precum și cu utilizarea animației și a efectelor. La final, veți afla ce este JQuery UI, precum și cum se setează și cum se folosesc controalele sale. Pe lângă acest lucru, veți învăța interacțiunea controalelor UI și cu numeroase abilități utile.

Cursul Advanced Website UI Design and Animation vă va răspunde la următoarele întrebări:

Cu ajutorul lui JavaScript se poate schimba aspectul paginii?

JavaScript a apărut drept consecință a imposibilității de interacțiune a programelor cu pagina după ce aceasta a fost trimisă clientului. HTML, cu care se prezintă elementele paginilor web, nu a avut de la început niciun fel de posibilități dinamice. Tocmai de aceea a fost introdusă și o platformă specială, suplimentară, cu care se va putea controla în mod imperativ un conținut fără a relua pagini complete de pe server. Această platformă este tocmai JavaScript. 

Încă de la început, JavaScript a fost un ajutor în „reîmprospătarea” paginilor, dar în prezent nu există o pagină fără el. Cu ajutorul diferitor biblioteci, precum angular și react, întreaga funcționalitate a aplicațiilor se execută pe browserul web în loc de server.

Ce este SVG și la ce se folosește?

Scalable Vector Graphics (SVG) este format în HTML. Spre deosebire de celelalte formate ale graficii, acest format se definește textual. Cu ajutorul limbajului XML. Datorită acestui lucru, imaginile SVG pe pagină sunt ușor de creat, de modificat sau de analizat.

Având în vedere că JavaScript este destinat modificării paginii, utilizarea sa în combinație cu grafica SVG dă rezultate excelente.  

Grafica SVG este utilă în mod special în timpul lucrului cu diferitele tipuri de grafici și de diagrame deoarece se poate modifica ușor dinamic, la fel și cantitatea de date care se trimit către client și este mult mai mică decât în cazul altor formate.

Cu ajutorul lui JavaScript se poate interacționa cu utilizatorul?

JavaScript permite interacțiunea dintre utilizator și aplicație îmbunătățind sistemele existente de interacțiune deja existente în HTML, dar introducând și unele noi, care nu pot fi realizate în HTML. 

De exemplu, dacă vrem să prezentăm o fereastră cu un mesaj la execuția unui program sau dacă vrem ca într-o anumită parte a execuției să adresăm o întrebare utilizatorului și să preluăm răspunsul de la el. Dacă vrem ca pe baza unei acțiuni a utilizatorului să facem o altă acțiune în cadrul programului sau dacă vrem să comunicăm la cererea utilizatorului cu serverul și să preluăm date de la el. Toate acestea sunt etapele care nu ar fi posibile dacă pe pagină nu ar exista un cod JavaScript și dacă browserul web nu ar fi în stare să pornească acest cod.

Advanced Website UI Design and Animation

Ce este UI și JQuery UI?

Interfața cu utilizatorul (UI) face parte din programul care este responsabil direct de comunicarea cu utilizatorul. Deși comunicarea cu programul pare ceva complet natural, noi nu am putea face acest lucru fără controlul dat de program pentru noi. De exemplu, dacă vrem să accesăm sistemul cu ajutorul numelui de utilizator și a parolei, introducem aceste date în câmpul pentru text, apoi apăsăm tasta ca să confirmăm operațiunea. Dacă vrem să alegem un element în program, folosim meniul derulant. Dacă vrem să introducem data nașterii, folosim controlul pentru selectarea datei etc. Toate controalele menționate fac parte din interfața cu utilizatorul a unui program. 

HTML conține interfața cu utilizatorul pentru toate operațiile de utilizator folosite des. Dar această interfață are un aspect decent și cere multă muncă pentru a fi modificată, așadar deseori este actualizată în vreo bibliotecă UI. Jquery UI este o bibliotecă populară pentru gestionarea interfeței cu utilizatorul.

Ce este AJAX?

Din prima, aplicațiile web au generat de la început fiecare acțiune a utilizatorului. Dacă utilizatorul ar da clic pe o tastă sau un link, pagina completă ar trebui deschisă din nou. 

Pentru soluționarea acestei probleme, în loc de pagina completă, se pot încărca din nou numai părțile modificate. Tehnologia în cadrul lui JavaScript cu care se poate face aceasta se numește JavaScript Asincron și XML (AJAX). Asincron deoarece datele se încarcă asincron, iar JavaScript deoarece se încarcă cu ajutorul lui JavaScript. În ultima variată a utilizării AJAX nu se încarcă părțile paginii, ci doar datele curate, care sunt necesare programului pentru completarea rezultatului. Din prima, aceste date au fost trimise în formatul XML, ceea ce explică și ultima noțiune a acronimului.

Astăzi, AJAX este baza bibliotecilor/cadrelor moderne pentru JavaScript a aplicației web.

Ce este DOM?

DOM (Document Object Model) este interfața de program pentru documentele HTML și XML. DOM permite o prezentare structurală a documentului și definește modul în care se poate accesa structura din program și cum pot schimba structura sa, stilul și conținutul. DOM reprezintă o reprezentare completă a paginii web orientată pe obiecte.

La încărcarea paginii web, browserul creează aceste pagini DOM. Folosind modelul Document Object, de la HTML static putem face unul dinamic astfel încât cu ajutorul lui JavaScript putem:

  • să schimbăm toate elementele HTML pe pagină, 
  • să schimbă toate atributele HTML pe pagină, 
  • să schimbăm toate stilurile CSS pe pagină, 
  • să înlăturăm elementele HTML și atributele existente,
  • să adăugăm elemente și atribute HTML noi, 
  • să reacționăm la evenimentele existente (events) pe pagină, 
  • să facem noi evenimente HTML (events) pe pagină. 

Ce este JQuery?

JQuery este biblioteca JavaScript, care are scopul de a ușura folosirea lui JavaScript pe paginile web. Pentru ceea ce ar trebui să scrieți zeci de mii de linii de cod în JavaScript, în JQuery este suficientă o linie de cod. JQuery simplifică scrierea multor lucruri comparativ cu JavaScript, ca de exemplu apelurile în AJAX și manipularea DOM. 

Biblioteca JQuery permite și ușurează manipularea HTML/DOM, manipularea CSS, metode HTML pentru gestionarea evenimentelor, crearea efectelor și a animațiilor, lucrul cu AJAX și multe alte lucruri utile. Pentru JQuery există și multe pluginuri scrise care vă pot ajuta suplimentar și vor accelera programarea aplicațiilor web eficiente.

Planul și programa cursului:

1. Implementarea lui JavaScript în browser

  • Script tags 
  • Împachetarea, distribuția și securitatea codului JavaScript 

2. JavaScript DOM

  • Structura și ierarhia obiectului DOM
  • Manipularea obiectului DOM
  • Evenimente DOM
  • Manipularea formularelor 

3. Grafica și animația

  • Integrarea și utilizarea graficii SVG
  • Manipularea tranzacțiilor CSS
  • Gestionarea execuției amânate (setInterval, setTimeout) 

4. Biblioteca JQuery

  • Introducere în JQuery, conceptele de bază, implementarea și utilizarea
  • Lucrul cu selectori JQuery și navigarea DOM
  • Utilizarea animațiilor și a efectelor în JQuery
  • Jquery AJAX
  • JQuery plugins (integrarea pluginurilor existente și crearea propriilor pluginuri)

5. JQuery UI

  • Setarea și utilizarea controlului UI
  • Dialoguri UI și controale UI de bază (taste, taste pentru confirmare, taste radio, glisoare)
  • Controale UI avansate (alegerea datei, meniurile derulante și progress bars)
  • Interacțiune cu controale UI (glisare, modificarea dimensiunii, selecție)

Advanced Website UI Design and Animation

3 moduri de a obține un job bine plătit

Am pregătit un document în care puteţi descoperi trei moduri de a obţine un job bine plătit pentru profesioniştii care lucrează pe calculator. Descărcați raportul aici

Înscrierea pentru generaţia 2019/20 se face aici.

Pentru a afla totul despre înscriere, click aici.