20480C Programming in HTML5 with JavaScript and CSS3

Acest curs de cinci zile reprezinta o introducere în HTML5, CSS3 și JavaScript. Acest curs de programare îi ajută pe studenti să dobândească abilități de bază de programare HTML5 / CSS3 / JavaScript, folositoare dezvoltarii de aplicații Web si Windows Store.

Inscrie-te folosind formularul de mai jos!
Contacteaza-ne daca ai nevoie de mai multe informatii
0728 ADVICE sau office@itadviser.ro
  • Pret 749€
  • Durata 5 zile
  • Nivel Mediu
  • Cursanti 10
  • Limba curs Engleza/Romana
  • Examen 70-480
  • Certificare MCSD Windows Store Apps Using HTML5

Detalii curs 20480C Programming in HTML5 with JavaScript and CSS3

Cursul se concentrează pe oferirea cunostintelor de utilizare a HTML5 / CSS3 / JavaScript pentru implementarea logicii de programare, definirea și utilizarea variabilelor, efectuarea de bucle și ramificare, dezvoltarea de interfețe de utilizator, captarea și validarea intrării utilizatorului, stocarea datelor și crearea unei aplicații bine structurate. Veti folosi Visual Studio 2017 care rulează pe Windows 10.

Profilul publicului

Acest curs este destinat dezvoltatorilor profesioniști care au 6-12 luni de experiență în programare și care sunt interesați să dezvolte aplicații folosind HTML5 cu JavaScript și CSS3 (aplicații Windows Store pentru Windows 10 sau aplicații web).

La finalizarea cursului
După finalizarea acestui curs, veti putea sa:

Explicați cum să utilizați Visual Studio 2017 pentru a crea și rula o aplicație Web.
Descrieți noile caracteristici ale HTML5 și creați și stilati pagini HTML5.
Adăugați interactivitate la o pagină HTML5 folosind JavaScript.
Creați formulare HTML5 utilizând diferite tipuri de intrare și validați introducerea utilizatorului folosind atribute HTML5 și cod JavaScript.
Trimiteți și primiți date către și de la o sursă de date la distanță, utilizând obiecte XMLHTTPRequest și API-ul Fetch.
Stilizati paginile HTML5 folosind CSS3.
Creați cod JavaScript bine structurat și ușor de întreținut.
Scrieți codul modern JavaScript și utilizați babel pentru a-l face compatibil cu toate browserele.
Utilizați API-urile HTML5 comune în aplicațiile Web interactive.
Creați aplicații Web care acceptă operațiuni offline.
Creați pagini Web HTML5 care se pot adapta diferitelor dispozitive și factori de formă.
Adăugați grafică avansată la o pagină HTML5 folosind elemente Canvas și utilizând și Grafică vectorială scalabilă.
Îmbunătățiți experiența utilizatorului prin adăugarea de animații la o pagină HTML5.
Folosiți Web Sockets pentru a trimite și primi date între o aplicație Web și un server.
Îmbunătățiti capacitatea de reacție a unei aplicații Web care efectuează operațiuni pe termen lung, utilizând procese Web Worker.
Utilizați WebPack pentru a pachet aplicații web pentru producție.

Modulul 1: Prezentare generală a HTML și CSS

Majoritatea aplicațiilor web moderne se bazează pe o bază de pagini HTML care descriu conținutul cu care utilizatorii citesc și interacționează, foi de stil pentru a face acel conținut plăcut vizual și cod JavaScript pentru a oferi un nivel de interactivitate între utilizator și pagină și pagină și server. . Browserul web folosește marcajul HTML și foile de stil pentru a reda acest conținut și rulează codul JavaScript pentru a implementa comportamentul aplicației. Acest modul examinează elementele de bază ale HTML și CSS și introduce instrumentele pe care le folosește acest curs pentru a crea pagini HTML și foi de stil.
Lecții
Prezentare generală a HTML
Prezentare generală a CSS
Crearea unei aplicații Web prin utilizarea Visual Studio 2017
Laborator: explorarea aplicației conferinței Contoso
Explorarea aplicației Conferinței Contoso
Examinarea și modificarea cererii de conferință Contoso
După finalizarea acestui modul, studenții vor putea:

Explicați cum să utilizați elemente și atribute HTML pentru a prezenta o pagină web.
Explicați cum să utilizați CSS pentru a aplica stilul de bază pe o pagină web.
Descrieți instrumentele pe care Microsoft Visual Studio le oferă pentru crearea de aplicații web.

Modulul 2: Crearea și stilizarea paginilor HTML

Tehnologiile care stau la baza tuturor aplicațiilor web – HTML, CSS și JavaScript – sunt disponibile de mulți ani, dar scopul și sofisticarea aplicațiilor web s-au schimbat semnificativ. HTML5 este prima revizuire majoră a HTML-ului în 10 ani și oferă un mijloc extrem de adecvat de prezentare a conținutului pentru aplicații web tradiționale, aplicații care rulează pe dispozitive mobile portabile și, de asemenea, pe platforma Windows 10. Acest modul introduce HTML5, descrie noile sale caracteristici, demonstrează modul de prezentare a conținutului folosind noile funcții din HTML5 și cum să stilăm acest conținut folosind CSS.
Lecții
Crearea unei pagini HTML5
Stilarea unei pagini HTML5
Laborator: Crearea și stilizarea paginilor HTML5
Crearea de pagini HTML5
Stilizarea paginilor HTML
După finalizarea acestui modul, studenții vor putea:

Descrieți scopul și funcțiile noi din HTML5 și explicați cum să utilizați noi elemente HTML5 pentru a întinde o pagină web.
Explicați cum să utilizați CSS pentru a stila aspectul, textul și fundalul unei pagini web.

Modulul 3: Introducere în JavaScript

HTML și CSS furnizează informații structurale, semantice și de prezentare pentru o pagină web. Cu toate acestea, aceste tehnologii nu descriu modul în care utilizatorul interacționează cu o pagină utilizând un browser. Pentru a implementa această funcționalitate, toate browserele moderne includ un motor JavaScript pentru a sprijini utilizarea scripturilor într-o pagină. De asemenea, implementează Document Object Model (DOM), un standard W3C care definește modul în care un browser trebuie să reflecte o pagină din memorie pentru a permite motoarelor de scripturi să acceseze și să modifice conținutul acelei pagini. Acest modul introduce programare JavaScript și DOM.
Lecții
Prezentare generală a JavaScript
Introducere în modelul de obiect document
Laborator: Afișarea datelor și gestionarea evenimentelor folosind JavaScript.
Afișarea datelor în mod programatic
Gestionarea evenimentelor
După finalizarea acestui modul, studenții vor putea:

Descrieți sintaxa JavaScript de bază.
Scrieți codul JavaScript care folosește DOM pentru a modifica și a prelua informațiile de pe o pagină web.

Modulul 4: Crearea formularelor pentru colectarea și validarea intrării utilizatorilor

Aplicațiile web trebuie adesea să adune contribuția utilizatorului pentru a-și îndeplini sarcinile. O pagină web trebuie să fie clară și concisă cu privire la aportul preconizat de la un utilizator pentru a reduce la minimum neînțelegerile frustrante cu privire la informațiile pe care utilizatorul ar trebui să le furnizeze. În plus, toată intrarea trebuie validată pentru a se asigura că respectă cerințele aplicației. În acest modul, veți învăța cum să definiți formularele de intrare utilizând noile tipuri de intrare disponibile în HTML5. Veți vedea, de asemenea, modul de validare a datelor utilizând atributele HTML5. În cele din urmă, veți învăța cum să efectuați validarea extinsă a intrărilor utilizând codul JavaScript și cum să oferiți feedback utilizatorilor atunci când introducerea lor nu este valabilă sau nu se potrivește cu așteptările aplicației.
Lecții
Crearea formularelor HTML5
Validarea introducerii utilizatorului prin utilizarea atributelor HTML5
Validarea introducerii utilizatorului prin utilizarea JavaScript
Laborator: Crearea unui formular și validarea intrării utilizatorului
Crearea unui formular și validarea introducerii utilizatorului prin utilizarea atributelor HTML5
Validarea introducerii utilizatorului prin utilizarea JavaScript
După finalizarea acestui modul, studenții vor putea:

Creați formulare de introducere folosind HTML5.
Utilizați atributele de formulare HTML5 pentru a valida datele.
Scrieți cod JavaScript pentru a efectua activități de validare care nu pot fi implementate cu ușurință folosind atribute HTML5.

Modulul 5: Comunicarea cu un server de la distanță

Multe aplicații web necesită utilizarea datelor deținute de un site la distanță. În unele cazuri, puteți accesa aceste date pur și simplu descărcându-le dintr-o adresă URL specificată, dar în alte cazuri, datele sunt încapsulate de site-ul de la distanță și accesibile prin intermediul unui serviciu web. În acest modul, veți învăța cum să accesați un serviciu web folosind cod JavaScript și să încorporați date la distanță în aplicațiile dvs. web. Vei analiza două tehnologii pentru realizarea acestui lucru: obiectul XMLHttpRequest, care acționează ca un pachet programatic în jurul solicitărilor HTTP către site-urile web de la distanță, și Fetch API, care simplifică multe dintre sarcinile implicate în trimiterea cererilor și primirea datelor. Deoarece API-ul Fetch și obiectul XMLHttpRequest sunt api asincronice, mai întâi veți afla despre cum să gestionați sarcini asincrone cu obiectul Promise, funcțiile săgeată și noua sintaxă async / wait care vă permite să gestionați solicitarea asincronă ca și cum ar fi sincrone.
Lecții
Programare Async în JavaScript
Trimiterea și primirea datelor prin utilizarea obiectului XMLHttpRequest
Trimiterea și primirea datelor prin utilizarea API-ului Fetch
Laborator: comunicarea cu o sursă de date de la distanță
Preluarea datelor
Serializarea și transmiterea datelor
Refactorizarea codului folosind metoda jQuery ajax
După finalizarea acestui modul, studenții vor putea:

Gestionați sarcini JavaScript asincrone folosind noile tehnologii de programare async.
Trimiteți date către un serviciu web și primiți date de la un serviciu web folosind un obiect XMLHttpRequest.
Trimiteți date unui serviciu web și primiți date de la un serviciu web folosind API-ul Fetch.

Modulul 6: Stilarea HTML5 folosind CSS3

Stilizarea conținutului afișat de o pagină web este un aspect important pentru a face o aplicație atractivă și ușor de utilizat. CSS este principalul mecanism pe care aplicațiile web îl utilizează pentru a implementa stilul, iar funcțiile adăugate la CSS3 acceptă multe dintre noile capabilități găsite în browserele moderne. În cazul în care CSS1 și CSS2.1 au fost documente unice, World Wide Web Consortium a ales să scrie CSS3 ca un set de module, fiecare concentrându-se pe un singur aspect al prezentării, cum ar fi culoarea, textul, modelul casetei și animațiile. Acest lucru permite ca specificațiile să se dezvolte treptat, împreună cu implementările lor. Fiecare specificație definește proprietățile și valorile care există deja în CSS1 și CSS2, precum și noi proprietăți și valori. În acest modul, veți examina proprietățile și valorile definite în mai multe dintre aceste module, noii selectori definiți în CSS3 și utilizarea pseudo-claselor și pseudoelementelor pentru a rafina acele selecții.
Lecții
Stilarea textului folosind CSS3
Stilarea elementelor bloc
Pseudo-clase și pseudo-elemente
Îmbunătățirea efectelor grafice prin utilizarea CSS3
Laborator: Stilarea elementelor de text și bloc prin utilizarea CSS3
Stilarea barei de navigare
Stilarea link-ului de înregistrare
Stilarea paginii despre
După finalizarea acestui modul, studenții vor putea:

Utilizați noile caracteristici ale CSS3 pentru stilul elementelor de text.
Utilizați noile caracteristici ale CSS3 pentru a stoca elemente de bloc.
Utilizați selectoare, pseudo-clase și pseudo-elemente CSS3 pentru a perfecționa stilul elementelor.
Îmbunătățiți paginile utilizând efecte grafice CSS3.

Modulul 7: Crearea de obiecte și metode prin utilizarea JavaScript

Reutilizarea codului și ușurința de întreținere sunt obiectivele cheie ale scrierii aplicațiilor bine structurate. Dacă puteți îndeplini aceste obiective, veți reduce costurile asociate cu scrierea și menținerea codului. Acest modul descrie cum să scrieți cod JavaScript bine structurat folosind funcții de limbaj precum spații de nume, obiecte, încapsulare și moștenire. Aceste concepte pot părea cunoscute dacă aveți experiență într-un limbaj, cum ar fi Java sau C #, dar abordarea JavaScript este destul de diferită și există multe subtilități pe care trebuie să le înțelegeți dacă doriți să scrieți un cod de întreținut.

Lecții
Scrierea codului JavaScript bine structurat
Crearea de obiecte personalizate
Extinderea obiectelor
Laborator: Cod de rafinare pentru întreținere și extensibilitate
Moștenirea obiectului
Refactorizarea codului JavaScript pentru a utiliza obiecte
După acest modul, elevii vor fi capabili să:

Scrieți cod JavaScript bine structurat.
Utilizați codul JavaScript pentru a crea obiecte personalizate.
Implementați tehnici orientate pe obiect utilizând idiomuri JavaScript.

Modulul 8: Crearea de pagini interactive prin utilizarea API-urilor HTML5

Interactivitatea este un aspect cheie al aplicațiilor web moderne, permițându-vă să construiți site-uri web convingătoare, care să poată răspunde rapid la acțiunile utilizatorului și, de asemenea, să se adapteze la locația utilizatorului. Acest modul descrie cum se pot crea aplicații web HTML5 interactive care pot accesa sistemul de fișiere local, permite utilizatorului să trage și să arunce date pe elemente dintr-o pagină web, să redea fișiere multimedia și să obțină informații de geolocalizare.
Lecții
Interacționând cu fișierele
Încorporarea multimedia
Reacționând la locația browserului și la context
Corectarea si configurarea unei aplicații web
Laborator: Crearea de pagini interactive cu API-uri HTML5
Glisând și fixând Imagini
Încorporarea videoclipului
Utilizarea API-ului de geolocalizare pentru a raporta locația curentă a utilizatorului
După finalizarea acestui modul, studenții vor putea:

Accesați sistemul de fișiere local și adăugați asistență drag-and-drop la paginile web.
Redați fișiere video și audio într-o pagină web, fără a fi nevoie de pluginuri.
Obțineți informații despre locația curentă a utilizatorului.
Utilizați Instrumentele pentru dezvoltatori F12 din Microsoft Edge pentru a depana și profila o aplicație web.

Modulul 9: Adăugarea de asistență offline la aplicațiile web

Aplicațiile web au o dependență de a se putea conecta la o rețea pentru a prelua pagini web și date. Cu toate acestea, în unele medii, o conexiune de rețea poate fi intermitentă. În aceste situații, ar putea fi utilă activarea aplicației pentru a continua să funcționeze folosind date memorate în cache pe dispozitivul utilizatorului. HTML5 oferă o gamă de opțiuni noi de stocare din partea clientului, inclusiv stocarea sesiunilor și stocarea locală și un mecanism de memorie în cache a resurselor numit „Cache pentru aplicații”. În acest modul, veți învăța cum să utilizați aceste tehnologii pentru a crea aplicații web robuste care pot continua să funcționeze chiar și atunci când o conexiune la rețea nu este disponibilă.
Lecții
Citirea și scrierea datelor la nivel local
Adăugarea de asistență offline folosind memoria cache a aplicației
Laborator: Adăugarea de asistență offline la aplicațiile web
Memorizarea în cache a datelor offline utilizând API-ul Cache pentru aplicații
Persistența datelor utilizatorului utilizând API-ul de stocare locală
După finalizarea acestui modul, studenții vor putea:

Salvați datele local pe dispozitivul utilizatorului și accesați aceste date dintr-o aplicație web.
Configurați o aplicație web pentru a susține operațiuni offline folosind aplicația Cache a aplicațiilor.

Modulul 10: Implementarea unei interfețe de utilizator adaptive

Una dintre cele mai durabile caracteristici ale web-ului este natura sa temporară. Pentru prima dată, monopolul tastaturii și al mouse-ului este pus în discuție, iar asta înseamnă să punem la îndoială modul în care sunt proiectate interfețele utilizatorului. Puteți dezvolta o aplicație web pe un computer cu un monitor mare, de înaltă rezoluție, un mouse și o tastatură, dar alți utilizatori ar putea vizualiza și interacționa cu aplicația dvs. pe un smartphone sau o tabletă fără mouse sau pot avea un monitor cu o rezoluție diferită. Utilizatorii pot dori, de asemenea, să imprime pagini ale aplicației dvs. În acest modul, veți învăța cum să construiți un site web care să adapteze aspectul și funcționalitatea paginilor sale la capacitățile și factorul de formă al dispozitivului pe care este vizualizat. Veți vedea cum să detectați tipul de dispozitiv utilizat pentru a vizualiza o pagină și veți învăța strategii pentru stabilirea conținutului care vizează eficient anumite dispozitive.
Lecții
Sprijinirea factorilor de formă multiplă
Crearea unei interfețe de utilizator adaptive
Laborator: Implementarea unei interfețe de utilizator adaptive
Crearea unei foi de stil prietenoase cu tipărirea
Adaptarea aspectului paginii pentru a se potrivi diferiților factori de formă
După finalizarea acestui modul, studenții vor putea:

Descrieți cerințele dintr-un site web pentru a răspunde diferiților factori de formă.
Creați pagini web care pot adapta aspectul acestora pentru a se potrivi cu factorul de formă al dispozitivului pe care sunt afișate.

Modulul 11: Crearea graficelor avansate

Grafica interactivă de înaltă rezoluție este o parte cheie a majorității aplicațiilor moderne. Graficele pot ajuta la îmbunătățirea experienței utilizatorului, oferind un aspect vizual conținutului, făcând un site web mai atractiv și mai ușor de utilizat. Interactivitatea permite elementelor grafice de pe un site web să se adapteze și să răspundă la intrarea utilizatorului sau la schimbările aduse mediului și este un alt element important în păstrarea atenției utilizatorului și a interesului acestora pentru conținut. Acest modul descrie modul de a crea grafică avansată în HTML5 folosind grafică vectorială scalabilă (SVG) și API-ul Microsoft Canvas. Veți învăța cum să utilizați elemente legate de SVG cum ar fi și să afișați conținut grafic pe o pagină web. Veți învăța, de asemenea, cum să permiteți utilizatorului să interacționeze cu elemente SVG prin utilizarea de evenimente, cum ar fi evenimente de tastatură și evenimente de mouse. API-ul Canvas este oarecum diferit de SVG. API-ul Canvas oferă un
Lecții
Crearea graficelor interactive prin utilizarea SVG
Desenarea graficelor prin utilizarea API-ului Canvas
Laborator: Creare grafică avansată
Crearea unei hărți interactive a locației prin utilizarea SVG
Crearea unui ecuson de difuzor prin utilizarea API-ului Canvas
După finalizarea acestui modul, studenții vor putea:

Utilizați SVG pentru a crea conținut grafic interactiv.
Utilizați API-ul Canvas pentru a genera conținut grafic în mod programatic.

Modulul 12: Animarea interfeței cu utilizatorul

Animațiile sunt un element cheie în menținerea interesului utilizatorului într-un site web. Implementate cu atenție, animațiile îmbunătățesc capacitatea de utilizare a unei pagini web și oferă feedback vizual util cu privire la acțiunile utilizatorilor. Acest modul descrie cum să îmbunătățiți paginile web folosind animații CSS. Veți învăța cum să aplicați tranzițiile la valorile proprietății. Tranzițiile vă permit să specificați calendarul modificărilor proprietății. De exemplu, puteți specifica faptul că un element ar trebui să-și schimbe lățimea și înălțimea pe o perioadă de cinci secunde atunci când indicatorul mouse-ului trece peste el. În continuare, veți învăța cum să aplicați transformări 2D și 3D la elemente. Transformările vă permit să scalați, să traduceți, să rotiți și să înclinați elemente. De asemenea, puteți aplica tranziții la transformări, astfel încât transformarea să fie aplicată treptat într-o perioadă de animație specificată. La sfârșitul acestui modul, veți învăța cum să aplicați animații de cadre cheie la elemente. Animațiile cu cadre cheie vă permit să definiți un set de valori de proprietate în anumite momente din timpul unei animații. De exemplu, puteți specifica culoarea și poziția unui element la 0 procente, 33 la sută, 66 la sută și 100 la sută din perioada de animație.

Lecții
Aplicarea tranzițiilor CSS
Elemente de transformare
Aplicarea animațiilor pentru cadrele cheie CSS
Laborator: animarea interfeței cu utilizatorul
Aplicarea tranzițiilor CSS
Aplicarea animațiilor cu cadre cheie
După finalizarea acestui modul, studenții vor putea:

Aplicați tranziții pentru a anima valorile proprietății elementelor HTML.
Aplicați transformări 2D și 3D elementelor HTML.
Aplicați animații de cadre cheie la elementele HTML.

Modulul 13: Implementarea comunicării în timp real prin utilizarea Web Sockets

Paginile web solicită date la cerere de la un server web prin trimiterea de solicitări HTTP. Acest model este ideal pentru construirea de aplicații interactive, unde funcționalitatea este condusă de acțiunile unui utilizator. Cu toate acestea, într-o aplicație care trebuie să afișeze informații în continuă schimbare, acest mecanism este mai puțin potrivit. De exemplu, o pagină de stocuri financiare nu are valoare dacă arată prețuri care sunt chiar câteva minute și nu vă puteți aștepta ca un utilizator să reîmprospăteze constant pagina afișată în browser. Aici sunt utile soclurile web. Web Sockets API oferă un mecanism pentru implementarea comunicării în două și două direcții în timp real între serverul web și browser. Acest modul introduce socket-uri web, descrie modul de funcționare și explică modul de creare a unei conexiuni de socket web care poate fi utilizată pentru a transmite date în timp real între o pagină web și un server web.
Lecții
Introducere în Web Sockets
Utilizarea API-ului WebSocket
Laborator: Efectuarea comunicării în timp real folosind prize Web
Primirea mesajelor de la un Web Socket
Trimiterea de mesaje către o priză Web
Manevrarea diferitelor tipuri de mesaje prin socket Web

După finalizarea acestui modul, studenții vor putea:

Descrieți modul în care utilizarea unor prize web ajută la activarea comunicațiilor în timp real între o pagină web și un server web.
Folosiți API-ul Web Sockets pentru a vă conecta la un server web de la o pagină web și pentru a schimba mesaje între pagina web și serverul web.

Modulul 14: Efectuarea procesării fundalului utilizând Web Workers

Codul JavaScript este un instrument puternic pentru implementarea funcționalității într-o pagină web, dar trebuie să rețineți că acest cod se execută fie atunci când o pagină web se încarcă, fie ca răspuns la acțiunile utilizatorului în timp ce pagina web este afișată. Codul este condus de browser și dacă codul efectuează operațiuni care necesită un timp semnificativ pentru finalizare, browserul poate deveni fără răspuns și degradează experiența utilizatorului. HTML5 introduce lucrători web, care vă permit să descărcați procesarea pentru a separa subiecte de fundal și, astfel, permite browserului să răspundă. Acest modul descrie modul în care operează lucrătorii web și cum le poți folosi în aplicațiile tale web.
Lecții
Înțelegerea lucrătorilor web
Efectuarea procesării asincrone folosind Web Workers
Laborator: Crearea unui proces Web Worker
Îmbunătățirea capacității de reacție prin utilizarea unui Web Worker
După finalizarea acestui modul, studenții vor putea:

Explicați modul în care lucrătorii web pot fi folosiți pentru a implementa multitreading și pentru a îmbunătăți receptivitatea unei aplicații web.
Efectuați procesarea folosind un lucrător web, comunicați cu un lucrător web și controlați un lucrător web.

Modulul 15: Ambalare JavaScript pentru implementarea producției

Utilizarea modelelor vă permite să construiți aplicații mari și complexe. Progresul limbii în versiunea ECMAScript6 permite aplicației de compilare cu simplificarea procesului de construcție a aplicației. Cu toate acestea, utilizarea modulelor ECMAScript6 și a altor funcții nu este încă acceptată în toate browserele. Instrumente precum Node.js, Webpack și Babel permit utilizarea de noi funcții de limbă, împreună cu suport pentru diferite browsere pentru a evita rănirea experienței utilizatorului. În acest modul vom introduce teoria din spatele acestor instrumente, când trebuie să le utilizăm și diferitele opțiuni de utilizare. La sfârșitul modulului vom vedea cum să folosiți aceste instrumente pentru a scrie codul ECMAScript6 acceptat în toate browserele.

Lecții
Înțelegerea pachetelor de distribuție și modul
Crearea de pachete separate pentru asistență de tip browser
Laborator: Configurarea pachetului Webpack pentru producție
Crearea și implementarea de pachete folosind WebPack

    Call Now Button