Tutorial Web Pentru Studiul Tehnologiilor Internet

UNIVERSITATEA “TITU MAIORESCU” DIN BUCUREȘTI

FACULTATEA DE INFORMATICĂ

TUTORIAL WEB PENTRU STUDIUL TEHNOLOGIILOR INTERNET

Coordonator

Conf. Univ. Dr. Mironela Pirnau

Absolvent

Jojatu Vlad-Gabriel

București

2016

DECLARAȚIE PRIVIND ORIGINALITATEA LUCRĂRII

Prin prezenta declar că lucrarea de disertație cu titlul “Tutorial Web pentru studiul tehnologiilor Internet” este elaborată de mine și este rezultatul propriei mele activități de documentare și cercetare. Declar de asemenea ca ea nu a mai fost prezentata parțial sau integral la o altă facultate sau instituție de învățământ superior din țară sau străinătate.

De asemenea, declar că toate sursele utilizate, inclusiv cele preluate de pe Internet, sunt indicate în lucrare:

 toate fragmentele de text reproduse exact, chiar dacă sunt traduceri proprii din altă limbă, sunt scrise între ghilimele și dețin referința precisă a sursei;

 reformularea în cuvinte proprii a textelor scrise de către alți autori deține referința precisă la sursa ;

 codul sursă, imagini etc. preluate din proiecte open-source sau alte surse sunt utilizate cu respectarea drepturilor de autor și dețin referințe precise;

 rezumarea ideilor altor autori precizează referința precisă la textul original.

București, data

Absolvent,

Jojatu Vlad-Gabriel

Capitolul 1: Introducere

Încă din cele mai vechi timpuri, oamenii și-au dorit să aibă acces la cât mai multă și mai diversificată informație.

Dacă în trecut modalitățile de comunicare erau limitate, odată cu apariția internetului în viețile noastre totul s-a schimbat.

Apariția multor resurse, cum ar fi telegraful, telefonul, sau radioul au ridicat ștacheta și au setat un nou tempo în comunicare și transmiterea informației.

În 1958 este dezvoltat un prim model de modem capabil să transmită date binare printr-o linie telefonică.

Prima documentare scrisă despre posibilitatea interconectării prin intermediul rețelelor apare în anul 1962 și îi aparține lui Joseph Carl Robnett Licklider de la Massachusetts Institute of Technology (MIT).

Tot în același an începe și proiectul ARPA, ca în 1967 să aibă loc o primă conferința ARPANET.

Doi ani mai târziu, în 1969 sunt conectate extern patru calculatoare între universități din Statele Unite ale Americi.

Anul 1971 număra deja 23 de calculatoare interconectate dar și trimiterea primului mesaj de tip e-mail.

La 11 ani distanță, în anul 1981 este definit protocolul TCP/IP (Transmission Control Protocol/Internet Protocol), de către US Department of Defence. Pentru asigurarea funcționării chiar și în cazul î ncare unele linii erau întrerupte, acest protocol s-a împărțit în patru niveluri: nivelul Aplicație, nivelul Transport, nivelul Rețea și nivelul Acces.

La finele anilor 80 deja existau mai mult de 100 000 calculatoare interconectate.

Începutul anilor 90 marca dispariția ARPANET și introducerea oficială a World Wide Web, format folosit și astăzi.

În anul 1993 apare și primul browser grafic de internet, browserul Mosaic. La început rulat pe sisteme Unix, a fost introdus în același an și în variante pentru Windows și Macintosh datorită popularității pe care o dobândise.

Începutul anilor 2000 deja număra peste 350 milioane de calculatoare interconectate.

Primul miliard de deviceuri conectate la internet a fost atins în 2005, al 2-lea miliard în 2010 iar în 2014 se ajungea deja la 3 miliarde.

Graf 1.1

Tema proiectului

În tema propusă, “Tutorial WEB pentru studiul tehnologiilor Internet” se analizează realizarea unui site web care va simula un site de prezentare și de tutoriale a unei organizații de combatere a autismului.

Pe baza acestui site vom analiza și implementa tehnologiile folosite, printre care putem menționa HTML5, CSS3, JavaScript, PHP.

Siteul va avea la bază un homepage cu informații de tip text, poze informative, modalități de contact și de interacțiune cu asociația cât și un meniu care va face trimiterea către celelalte pagini ale siteului.

Vom avea de asemenea o pagină-blog unde vor fi postate articole despre problemele copiilor cu autism, diverse informații utile și modalități de ajutorare a copiilor cu probleme, acestea fiind posibile după logarea ca admin al siteului.

Cea de a 3-a pagină va fi pagina de contact care va conține un formular de contact ce va fi legat la o adresă de e-mail cât și date de contact ale asociației respective și integrarea unei hărți google cu pin la adresă sediului asociației.

A 4-a pagină va fi pagina de logare unde utilizatorii își pot face un cont care le va oferi accesul la câteva date personalizate, cum ar fi articolele-tutorial vizionate și le va permite postarea de comentarii pe pagină de blog.

A 5-a pagină va fi pagina de Informații utile, pagină ce va conține casete de text și videoclipuri cu tutoriale și discuții despre autism.

Voi folosi un template cu placeholdere pentru poze în cadrul ultimei pagini, cea de Galerie foto.

Ca temă pentru exemplificarea aplicației am ales un site din domeniul asociațiilor care luptă pentru ajutorarea copiilor cu autism.

Domeniul este unul destul de vast și intens discutat în prezent, cu numeroase firme și asociații care luptă împreună pentru a le oferi copiilor suferinzi de autism o viață mai bună.

Despre autism

“Definitie: Autismul este o boală caracterizată prin afectarea dezvoltării creierului. Autismul afectează grav abilitățile mentale, emoționale și comunicaționale ale unei persoane.”

-http://www.autism.ro/

Autism este denumirea data unei palete largi de tulburări de comportament.

Ce definește o persoană cu autism este dificultatea de a interacționa cu alți oameni, de a comunica și de a empatiza. Acest lucru se extinde atât la cunoștințe cât și la familia apropiată, ceea ce în multe cazuri duce la o luptă aprigă a părinților pentru creșterea copilului.

Vârstă la care se observă autismul în general este de 2-3 ani, dar se poate observa și mai devreme.

În urma studiilor se poate observa o tendință mai mare de autism în rândul băieților, statistic autismul fiind prezent la 1 din 42 băieți, față de 1 din 189 fețe.

În ultimii ani s-au descoperit și câteva cauze ale apariției acestei boli, printre care putem menționa mutațiile genetice și schimbări în structura genelor. Pe lângă acești factori genetici există și factori externi care pot influența boala, cum ar fi stresul, vârsta înaintată a părinților în momentul concepției, boli ale mamei în timpul sarcinei sau probleme la naștere, în special cele legate de deprivarea de oxigen.

De notat este faptul că aceste elemente externe, singure, nu pot provoca autismul., reacționând doar ca un catalizator.

Fiecare indivit cu autism este unic în felul său, comportamentul fiind oarecum asemănător dar niciodată identic între doi sau mai mulți pacienți.

Foarte mulți copii care sunt încadrați în spectrul autismului arată încă de la vârste fragede abilități remarcabile în anumite domenii cum ar fi muzica, învățare, științe exacte, pictura, memorie vizuală. Aproximativ 40% dintre copii cu autism prezintă abilități intelectuale în jurul mediei mondiale sau chiar peste medie.

Există și cazuri în care copilul are dizabilități severe și nu poate trăi pe cont propriu.

Aproximativ o treime dintre copii cu autism nu pot vorbi dar pot învață în timp să comunice prin alte modalitati.

În special pentru cazurile acestea intervin și sunt absolut necesare cursurile, exercițiile și ședințele de terapie profesionistă încă de la vârste fragede.

În anii începutului de viață este chiar mai important ca părinții să fie cei informați și activi pentru a înțelege și a se educa din start în problemele copiilor cu autism.

Un tratament adecvat și timpuriu poate schimba radical și în bine viitorul copilului cu autism și îl poate ajuta chiar să ducă o viață 100% autonomă și normală.

Există și foarte mule exemple de oameni importanți în istorie care au fost încadrați în spectrul autismului, printre care îi putem menționa pe Hand Christian Andersen, Lewis Carroll sau Mozart.

Capitolul 2: Studiu aplicații existente în domeniu – Studiu de caz

În urma researchului efectuat am putut găsi mai multe variante de siteuri din domeniu. Voi încerca în următoarele rânduri exemplificarea acestora punând în evidență câteva caracteristici pentru fiecare în parte.

Researchul este primul pas în realizarea unei aplicații, de aceea trebuie acordată o atenție aparte la detaliile siteurilor din domeniu.

Voi analiza câteva particularități ale fiecărui site în parte, printre care designul, tehnologiile folosite, dacă este responsive sau nu și voi încerca să stabilesc anul în care au fost realizate pentru a evidenția, mai târziu în cadrul lucrării, tendințele de design și de inovație aduse de-a lungul anilor.

http://www.autism-society.org/

Fig 1.1

Putem observa în Fig 1.1 că acest site conține 2 meniuri, cel principal, pe orizontală în partea de sus a paginii, imediat sub logoul asociației, unde au fost amplasate butoanele de Home, About (sub denumirea de About Autism), Informații (sub denumirea de Living with Autism), Call to action (Get involved), Research, Blog (sub denumirea de News), About us, cât și un buton de traducere a paginii într-o altă limbă, En Espanol dar si un buton de donare “Donate now”.

Cel de-al doilea meniu, vertical pe partea stângă, conține butoane esențiale pentru atragerea de noi membri în comunitatea siteului, cum ar fi cel de informații pentru afiliere, aflarea locațiilor fizice apropiate sau conectarea la newsletter.

În body putem observa un carusel cu imagini în partea superioară cu poze reprezentative pentru asociația respectivă cât și butoane de Call to Action, contact pentru locații fizice și secțiune de noutăți.

Designul este unul oarecum minimalist optând pentru culori vii (#9ACBE2 – albastru și #E3202D – roșu, aceste două culori fiind predominante).

Siteul este făcut pe platforma WordPress iar ca tehnologii putem preciza HTML5, CSS3 și Javascript. Este un site non-responsive, nu se adaptează în funcție de displayul pe care este vizionat.

https://www.autismspeaks.org/

Fig 1.2

Acest site conține un singur meniu cu 5 butoane: Home (reprezentat printr-un elementr grafic ce reprezintă o casă) și 4 butoane cu drop down: Families & Adults, Research, Advocate, Get Involved.

În coloana din dreapta paginii putem observa un table ce conține articole din categoria de blog/news a siteului.

Bodyul conține un articol care este updatat odată cu evenimentele importante în care asociația respectivă este implicată.

De asemenea în partea de sus a paginii, lângă Logo-ul asocitatiei se mai află 3 butoane puse în evidența, deoarece acestea fac trimiterea și către motorul asociației, și anume donațiile și magazinul online.

Putem observa că această pagină este strict de prezentare și de accea lipsește elementul de logare, acesta fiind păstrat pentru shop.

Ca design se optează tot pentru minimalism, fiind un site monocromatic cu o culoare vie, albastru (#2B649B).

Și aici găsim de asemenea HTML5, CSS3 și Javascript iar siteul este non-responsive.

https://www.myautism.org/

Fig 1.3

În acest site se poate observa în partea de header a siteului un meniu primar cu drop down, sigla în partea stângă simetric așezată fără de un buton de Donate. De asemenea conține un meniu secundar, lipit în partea de sus a siteului care conține câteva butoane importante pentru asociația respectivă, și anume un hotline pentru situații de urgență, un buton de shop, blog și unul de contact cât și butoanele de social media de Facebook, Twitter, Instagram, Pinterest și Google+.

Se insita pe butonul de donate și în poza din header cu un buton de aceeași culoare cu cel din partea de sus a paginii, dar puțin scos din evidență prin transparența acestuia.(Fig 1.3)

În meniul principal găsim o parte de informații despre asociație, “Who we are”, o parte de activități desfășurate de asociația respectivă, prin butonul “What we do”, informații generale și amănunțite despre autism, butonul “All about autism”, și butonul de call to action, numit aici “Take Action”. În partea din stânga găsim butonul de search flancat de o iconograma a unei lupe.

În josul paginii se află o secțiune dedicată implicării, prin trei butoane așezate în linie și scoase în evidență de culoare de fundal, culoare roșie. Aici se dau opțiunile de donare, voluntariat sau chiar sponsorizare din partea companiilor.

Imediat sub această secțiune se află o altă culoare aprinsă, verde, ce scoate în evidența un buton ce trimite către harta sediilor asociației cu un îndemn la a primi ajutor din apropiere.(Fig 1.4)

S-a optat de asemenea și pentru o galerie foto de o dimensiune medie, pentru a evidenția acțiunile asociației, un buton de abonare la newsletter cât și o parte de statistică ilustrată despre autism. Această parte ilustrată conține efectul de Paralax, un trend de design destul de nou adăugat în dezvoltarea siteurilor.

Fig 1.4

Este singurul site din cele 3 analizate care este realizat sub forma unui one-page, o singură pagină cu informații care apar la scroll și sunt centrate pe elemente esențiale pentru a stârni interesul vizitatorului.

Sunt elminate din start bannerele și informațiile inutile, siteul fiind foarte curat și ordonat iar paleta de culori este diversificată și aleasă special axat pe problemele de autism, toate culorile folosite fiind culori liniștitoare și știute prin studii ca fiind în beneficiul copiilor cu autism.

Putem observa cu ușurință folosirea HTML5, CSS3, JavaScript, cât și PHP, de exemplu pentru butonul de search. Este integrat un serviciu de newsletter cât și o hartă Google Maps cu pinuri pe locațiile în care asociația respectivă funcționează.

Siteul este nou, realizat în 2016, și respectă tendințele moderne de design și user experience.

Luând ca exemplu cele 3 siteuri putem observa câteva elemente esențiale. Vom observa că din graficul următor tendințele de design și de existentă a butoanelor, în funcție de necesitatea lor.

În urma acestor exemple putem observa și concluziona că cele mai frecvente tehnologii WEB folosite în crearea siteurilor web sunt HTML5, CSS3, Javascript și PHP, tehnologii pe care le vom explica și exemplifica în capitolele următoare.

De asemenea se poate observa faptul ca tendința de realizare a siteurilor până de curând a fost aceea de a opta pentru siteuri fixe, care nu se adaptează în funcție de displayul de pe care sunt vizionate, această fiind o particularitate nou introdusă și ușor accesibilă în HTML5, cât și stabilirea mai multor meniuri în detrimentul unuia singur, sau chiar a lipsei acestuia. În cazul siteurilor fără meniu, navigarea se face prin intermediul unor butoane amplasate în interiorul paginii web. Acest lucru poate da un plus de dinamism aplicației.

Capitolul 3: Analiza si proiectarea unei aplicatii WEB

“Poate o parte la fel de importantă ca dezvoltarea propriu zisă a unui website este aceea de analiză a cerințelor și proiectare a aplicației. Acest pas necesită cunoștințe atât de user experience, design, planificare cât și codare și testare.”-wikipedia.

3.1 User Experience – UX

User experience este procesul de amplificare și satisfacere a nevoilor, a ultilitatii și acesibilitatii websiteurilor pentru o navigare și o experiență cât mai plăcută pentru ultilizatorul final.

User experience-ul are la bază interacțiunea om-computer (HCI) și o dezvoltă punând procesul de creație în perspectivă utilizatorului.

Procesul de UX are la bază designul conceptual și este fondat pe teoria factorilor umani și ergonomici (HF&E), o teorie care pune accent pe designul confortabil, funcțional și sistemic. Acest tip de abordare se folosește în principal în designul de produs pentru a oferi o experiență cât mai plăcută și memorabilă între utilizator și produsul final respectiv.

Conceptul împrumută elemente atat din psihologie, inginerie cât și din design industrial

3.2 View Heat Map

Atenția oamenilor este adesea de scurtă durată și ușor de distras. Statistica spune că în medie un utilizator imparțial navighează pe un anume site aproximativ 15 secunde, un articol este citit în maxim 30-45 secunde iar o pagină de social media este verificată undeva la 1 minut.

De aceea contentul trebuie foarte bine stabilit, așezat și pus în evidență cu ajutorul elementelor de design.

În principiu elementele esențiale siteului trebuie să fie în partea de sus, în prima porțiune de site, cea care se vede în totalitate la deschiderea acestuia în browser. Acolo punem, de exemplu, butonul de donație, dacă organizația care va beneficia de site depinde de această sursă financiară, vom pune butoanele de call to action, informațiile relevante, poze reprezentative, numele companiei sau sigla acesteia.

În timp s-au făcut studii amănunțite pe partea de gestionare a conținutului într-un site și au fost realizate chiar și softuri de analiză pentru timpul petrecut pe site cât și pentru conținutul cel mai vizionat la o accesare. S-a dovedit că ochii omului stau mai mult pe anumite zone ale unui site.

Aces procedeu este numit “viewer heat map” și evidențiază pe paginile unui site unde a fost cel mai mult privirea fixată, ce content a fost citit primul sau cu mai mult interes și ne evidențiază principalele poziții în care trebuie să așezam elementele care ne interesează cel mai mult.

Grafica este realizată la fel că la aparatele ce măsoară temperatura într-un anumit mediu, de aici și denumirea de heat map.

Putem observa din exemplul următor că principala zonă de vizionare a websitului este aceea centrală, unde se află și primul buton de selecție, cât și prima casetă de text. Mai vizionate au fost și zonele cu poze, sigla, în timp ce informațiile laterale, printre care bannerele sau textul de tip reclamă au fost ignorate.

Fig 2.1

http://provim.net/wp-content/uploads/2013/01/heat-map.png

3.3 Wireframeuri, mockup si prototip

În realizarea designului unui site, la fel ca în dezvoltarea de produse, există câteva etape de urmat și finalizat pentru a putea duce la capăt eficient munca de dezvoltare.

Nu se poate porni realizarea unui website eficient fără un prototip realizat în prealabil și care va servi că și ghid pe tot parcursul dezvoltării.

Primul pas în acest sens este acela de realizare a wireframeului.

Wireframeul este schița proiectului. Ne putem gândi la el că la planșa unui arhitect.

Acesta se realizează la început, este primul pas în realizarea designului viitorului site și i se atribuie timp limitat, punându-se accentul în special pe generalizarea ideilor, fără detalii. Detaliile vor fi adăugate ulterior, destinația wireframeului fiind aceea de a stabili spatierea, poziționarea și dimensiunea aproximativă a viitoarelor obiecte.

Acestea au avantajul că pot fi vizionate și de restul echipei de dezvoltare, acolo unde este cazul, sau chiar și discutate cu clientul în stadiile de început ale proiectului, rezultând de aici și eficientizarea procesului de lucru și limitându-se modificările majore după terminarea dezvoltării aplicației.

Acestea pot fi realizate atât pe foaie, de mână, cât și cu softuri, de la cele specializate pentru schițare și mockupuri, software de prezentare, cum ar fi Microsoft Office Powerpoint până la UXPin, Axure sau Adobe Photoshop.

Fig 2.2

Dacă pentru partea de structură folosim wireframeurile, pentru partea vizuală introducem mockupurile.

Mockupul este transpunerea vizuală a wireframeului. Este o dispunere statică a cum va arată produsul final, oferind mai multe detalii și lăsând posibilitatea unor modificări majore atât în poziționare cât și în paletă de culori folosită, dimensiuni sau funcții necesare ce nu au fost incluse în proiectul inițial. Tot acum se stabilește și fontul ce urmează a fi folosit, stilul folosit pentru elemente, și îți oferă posibilitatea de a experimenta în vederea stabilirii direcției finale.

Mockupurile pot fi realizate atât cu softuri special proiectate în acest scop, cum ar fi Axure, UXPIN sau Moqups, cât și cu softwareuri de design grafic, cum ar fi Invision sau Marvel.

Totuși cea mai bună metodă de realizare a mockupului este aceea de codare mockup. Mockupul va fi realizat direct prin codare pentru a evita eventualele probleme legate de design și limitări pe care programele de design nu le iau în calcul.

Fig 2.3

– http://chrisad.com/wp-content/uploads/2015/09/full-service-mockup.jpg

Prototipul este prima variantă funcțională a siteului. Are funcții limitate dar active, este într-o variantă aproape finalizată a designului și așteaptă ultimele modificări pentru a intra în ultima etapă a dezvoltării.

În unele situații în dezvoltarea aplicațiilor WEB, partea de wireframeuri și mockupuri este sărită. Același lucru nu se poate totuși spune și despre prototip. Dezoltarea nu poate fi terminată fără această variantă preliminară a produsului final. Este momentul în care se fac ultimele verificări în funcționalitate și în design, se adaugă ultimele elemente mari și se modifică cele existente.

Fără această etapă există posibilitatea că dorințele clientului să nu fie îndeplinite și să se piardă timp de lucru pentru refacerea proiectului.

Fig 2.4

http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2015/05/15/jargon5.jpg

3.4 Design

În general procesul de web design este relativ asemănător de la site la site. Etapele rămân în mare aceleași și sunt bine delimitate în timp.

Primul pas este acela de planificare. Acesta conține partea de analiză a cerințelor, pas în care este analizat publicul țintă, cerințele aplicației, motivele pentru care este siteul făcut cât și rezultatele căutate de către cel care dorește websiteul.

Ca etapă următoare se pun toate informațiile cap la cap și se realizează un brieful complet al siteului.

Imediat ca pas următor trebuie realizată diagrama Gantt a proiectului și planificarea în timp a procesului de dezvoltare.

Se începe lucrul la site prin realizarea hărții siteului. Se iau în calcul nevoile și se găsesc funcțiile necesare pentru o dezvoltare eficientă și rapidă.

Al 2-lea pas este cel de design. Aici se începe cu pașii menționați mai sus, cei de wireframe, mockup, prototip și ședințe de întrebări-răspunsuri cu beneficiarul siteului.

Se realizează designul siteului urmărind toți pașii de mai sus.

Următorul pas este cel de codare efectivă a siteului. Acest pas include pe lângă stabilirea frameworkului și realizarea de templateuri pentru fiecare pagină în parte testarea funcțiilor necesare cât și implementarea și îmbinarea acestora pentru a realiza produsul final.

Pasul următor este acela de completare a contentului. Acest pas necesită o atenție sportia la detalii întrucât elementele își pot modifică dimensiunea sau locul și vor trebui revizuite înainte de lansare.

Ca un ultim pas foarte important menționăm partea de testare, unde se verifică fiecare parte de cod și se stabilește dacă este funcțional. În caz contrar se trece la etapă de debugging și apoi cea de retestare.

Etapa de dezvoltare este cea care începe procesul efectiv de codare.

Capitolul 4: Metode, tehnici și instrumente utilizate în realizarea aplicației

4.1 HTML

Primul pas în realizarea unui site web este realizarea documentului HTML (Hypertext Markup Language). Acest lucru înseamnă pe scurt un text cu linkuri atașate.

Acesta este principalul lmbaj de marcare utilizat și totodată și cel recomandat de către World Wide Web Consortium (W3C).

În prezent varianta folosită de HTML este HTML5, acesta aducând elemente noi față de predecesorul său, HTML4.

HTML5 își propune să integreze tehnologii care până acum erau folosite printr-o combinație de HTML4, XHTML 1.1, DOM2HTML(JavaScript).

Dacă în HTML1 codul conținea atât elementele cât și partea de aspect, prin design stabilindu-se culoarea textului, a fundalului, fontul, etc., în HTML4 și HTML5 acestea sunt modificate prin intermeidul fișierelor CSS.

HTML5 este dovadă unui parteneriat între World Wide Web Consortium (W3C) și Web Hypertext Application Technology Working Group (WHATWG).

Putem privi HTMLul unei pagini precum scheletul unui organism, cel care susține întregul.

Cel mai rudimentar document de HTML va arată în felul următor:

Totuși acesta nu va afișa nimic la deschiderea lui.

Browsere precum Apple Safari, Google Chrome, Mozilla Firefox, Opera sau Internet Explorer 9.0 cât și browserele standard din dispozitivele ce rulează iOS și Android au suport pentru HTML5 și pot citi elementele noi.

Elemente noi aduse de către HTML5 sunt:

-taguri ce țin de sintaxa, cum ar fi <header>, <footer>

-atribute noi pentru tagul <input> pentru forumulare

-websocket

– canvas: tablouri bidimensionale ce permit desenarea lor cu ajutorul JavaScript

– taguri <audio> si <video> pentru a embedui videoclipuri fara ajutorul altor pluginuri.

– geolocalizare: permite sharuirea de catre vizitatori a locației fizice si permite targetarea

continutului in functie de locatia ultilizatorilor

– drag and drop: posibilitatea de a trage elemente din aceeasi pagina si a le muta

HTML5 este in cea mai mare parte compatibil cu web browserele mai vechi.

4.1.1 Sintaxa

Sintaxa de HTML5 este realizată în așa fel încât să fie compatibilă cu HTML4.

Spre deosebire de XHTML unde era nevoie de taguri scrise cu literă mică, punerea atributelor între ghilimele, atribuirea obligatorie a unei valori și închiderea elementelor, în HTML5 tagurile se pot scrie și cu majuscule, se pot omite ghilimelele la atribute iar atributele pot fi lăsate necompletate, fiind interpretate că o valoarea de bază.

Fiecare fișier trebuie să conțină tagul <!DOCTYPE html> la începutul sau. Acest îi dictează browserului ce limbaj interpretează.

Codificarea caracterelor se poate face de asemenea în partea de <head> a websiteului prin tagul <meta charset=” “>.

Fisierul de script nu mai trebuie apelat si cu partea de text/javasctipt, putand fii direct scris ca <script src=”scriptfile.js”></sript>. La fel se intampla si in cazul tagului <link> pentru fisierul CSS. Din sintaxa dispare “type=”text/css”” si ramanem cu sintaxa simplificata de <link rel=”stylesheet” href=”stylefiles.css”>

Atributele pot fi definite global și pot fi folosite pe orice element, dar și local, pentru a modifica doar un singur element. Atributele au un nume și o valoare atribuită, spre exemplu <div class=”titlu”>Titlu</div>.

Una dintre noile funcții ale HTML5 este aceea de canvas.

Această funcție este una ce oferă o posibilitate simplă și rapidă de a desena elemente cu JavaScript. Această funcție poate fi folosită pentru realizarea de grafice, poze și animații.

Tabloul trebuie să conțină minim 2 atribute, cel de înălțime și cel de latime lățime, ca în exemplul următor:

<canvas id=”canvas” width=”100” height=”100”></canvas>.

Elementul poate fi gasit prin functia getElementById(): var canvas = document.getElementById(“canvas”);

Inițial tabloul este gol și are nevoie funcția getContext pentru a obține conținut de randare. Această funcție are nevoie de definirea tipului de context, și anume 2d (2 dimensiuni).

4.2 CSS

Cascading Style Sheets, abreviat ca CSS, este standardul de formatare a elementelor din documentele HTML.

Specificațiile CSS-ului sunt actualizate și dezvoltate de către World Wide Web Consortium. Tot aceștia asigură și serviciul de validare pentru documentele CSS.

Prima apariție a formatului CSS a fost în data de 17 Decembrie 1996, fiind pentru prima data propus în anul 1994 de către Hakon Wium Lie.

Pe lângă funcția de stilizare a elementelor unei pagini web HTML, acesta poate fi aplicat atât pe documentele SVG cât și XUL.

Înainte de apariția CSS-ului toate atributele elementelor din pagina de HTML, cum ar fi alinierea, culoarea, fontul, erau introduse direct în tagurile din documentul HTML.

Odată cu apariția CSS-ului, în special varianta a 3-a, taguri precum <font> au ieșit din uz

Un exemplu de cod dintr-un document CSS poate arată așa:

Pentru a remarca utilitatea CSS-ului putem observa diferenta intre o pagina care contine doar HTML si una care contine si CSS:

Fara CSS

Cu CSS

Primul lucru si cel mai important in folosirea CSS-ului este înțelegerea tagurilor <div> si <span>.

Tagul <div> este un bloc și conține din start un rând liber atât în susul sau cât și in partea de jos iar <span> apare în interiorul unor paragrafe. Acestea sunt singurele elemente vizuale pe care le au inițial cele doua taguri. Pentru modificări mai importante se va folosi CSS-ul.

Documentul CSS este apelat în documentul HTML prin sintaxa <link href=”cale/undefined.css” rel=”stylesheet”>.

4.2.1 Sintaxa CSS

Sintaxa folosită în CSS este una simplă, folosind cuvinte în limbă engleză pentru a defini diferite stiluri cât și proprietățile lor.

Selectorii sunt folosiți pentru a arată ce parte a tagului HTML va fi modificat.

Aceștia se pot referi generic la un anumit element important, cum ar fi tagul <p> care va modifica toate paragrafele din website.

Se pot specifica și atribute pentru elemente particulare prin folosirea funcțiilor id și class. Dacă primul va face referire la un singur element din document, acesta primind o denumire unică ce nu va putea fi atribuită și unui alt element, cel de-al doile va modifică multiple elemente și poate fi atribuit același nume mai multor elemente. Aceste două notari, class și id sunt case-sensitive.

Pseudo-clasele sunt folosite pentru funcționalități care nu apar în structura HTML a websiteului, cum ar fi :hover. Această pseudo-clasă va modifica textul doar în momentul în care pointerul este pus deasupra lui. Pseudo-clasa :visited modifică atributul color al unei clase :link.

Proprietățile sunt trecute în CSS în interiorul ghilimelelor și conțin sintaxa de formă “:valoare” și sunt despărțite între ele prin ;.

Valorile pot fi de tip text, cum ar fi “left”, pot avea valori numerice, precum procente-50% (va amplasa elementrul pe 50% din suprafața căsuței) sau 50px, dimensiunea în pixeli.

Pentru selectarea culorilor dorite se poate declara ca valoare text numele culorii, de exemplu “green”, în format hexadecimal, #FFFFFF (sau prescurtat #FFF) sau sub formatul RGB cu valori de la 0 la 250. Atributul rgb conține 3 valori în paranteză, care definesc atât culoarea cât și opacitatea acestuia.

Spre exemplu folosirea tagului <font> in cadrul unul tag <h2> a disparut si in schimb se poate folosi tagul <h1 style=”color:green;”>Exemplu 1<h2>.

Pentru a seta prioritatea elementelor există anumite reguli ce trebuie respectate:

• Browser default: acesta are prioritatea cea mai mică și se bazează pe valorile inițiale setate de către W3C

• Definirea de elemente CSS în documentul HTML: acest stil modifică valoarea din browser.

• Moștenire: dacă un element nu are specificate proprietăți va luă valorile elementului părinte al acestuia

• Ordinea executării regulilor: ultima regulă menționată are prioritate mărită

• Selector: un selector contextual va modifica definirea generală a atributelor

• Declarat de către user: atributele declarate de către utilizator vor avea prioritate mai mare decât cele inițiale

• Tipul media: definirea proprietăților se va aplica asupra tuturor datelor de tip media, dacă nu există definit specific în CSS un alt atribut pentru aceasta.

• Atributul “style” în cadrul liniei de HTML va avea prioritate sporită față de celelalte moduri anterioare

• !Important: acasta notație va scrie prioritar față de orice alt tip de prioritate anterioară

Specificitatea elementelor determină importanța regulilor definite pentru elemente. Arată ce stiluri se vor aplica în detrimentul altora. De exemplu un selector h1 va avea specificitatea 1.

• h1{color: white;} are specificitatea 1

• P-EM{color:red;} specificitate 2

• .class are specificitatea 1,0

• ID are specificitatea 1,0,0

• Definirea în linia de HTML a stilului prin “style=” “ “ are specificitate 1,0,0,0

Această specificitate nu este notată în sistem decimal deci poate fi notat folosint virgulă pentru despărțirea valorilor

CSS-ul este sub regula moștenirii. Dacă un element definit cu un anumit atribut, subcategoriile lui vor luă automat acelesi atribute dacă nu sunt atribuite alte atribute specific lor.

Este foarte importantă această regulă deoarece reduce numărul de declarări de atribute necesar într-un document CSS, eliminând nevoia de a declara atribute pentru fiecare sub-element.

Poziționarea elementelor este de 3 tipuri: normal flow, float și absolute.

Normal flow: elementele sunt așezate unul după celălalt, umplând tot spațiul liber în ordine apoi se trece pe o linie următoare.

Float: elementele sunt așezate într-o anumită poziție( stânga, dreapta) până la maximul spațiului disponibil.

Absolute: elementelor le este atribuit un spațiu exact din care nu pot ieși și se comportă independent de celelalte elemente.

4.2.2 Tipurile de CSS

CSS 1: a fost prima variantă adoptată de CSS și putea modifica proprietățile fontului, culoarea textelor, a fundalului și a altor elemente. Putea alinia textul, seta distanța între cuvinte, marimile, paddingul și poziționarea elementelor.

CSS 2: în 1998 apare a 2-a variantă de CSS și sunt introduse atribute ca absolute, relative și introduce conecptul de media, cât și o nouă proprietate pentru text, cea de umbre.

CSS 2.1: a venit că un update pt CSS 2 și a rezolvat unele buguri și erori întâlnite în CSS 2 și adaugă extensiile de browsere. Este oficial implementat în anul 2004.

CSS 3: primele schițe de CSS 3 au apărut în anul 1999 dar a fost implementat mulți ani mai târziu. A introdus noțiunea de module față de versiunile anterioare.

CSS 4: chiar dacă oficial acesta va fi implementat după ce se va definitivă CSS 3 existe unele module de nivel 4 care se pot încadra deja în CSS 4.

4.3 Bootstrap

Bootstrap este un framework open-source pentru dezvoltarea și desenarea de websiteuri și de aplicații web.

Se ocupă exclusiv de dezvoltarea front-end.

Numele original al Bootstrap a fost Twitter Blueprint, fiind dezvoltat de către 2 angajați ai Twitter.

Este în continuare susținut de către inițiatorii săi și se bazează pe contribuția comunității care il folosește.

Este un framework compatibil cu ultimele versiuni de browsere și, odată cu apariția variantei Bootstrap 2, în 2012, permite și realizarea de websiteuri responsive.

În 2013 este lansată versiunea Bootstrap 3, cea care va introduce termenul de mobile-first. Acest trend îndeamnă la realziarea websiteurilor pentru versiunea de mobil, pentru o bună funcționare într-o lume cât mai dinamică și rapidă.

Structura Bootstrap este modulară și se bazează pe stylesheets unde sunt implementate componentele, iar modificările sunt realizate printr-un fișier de bază care poate modifica tot designul websiteului.

Pentru o mai ușoară realizare a aplicațiilor, pe lângă structura originală de HTML, Bootstrap oferă funcții deja implementate pentru elemente des folosite, cum ar fi butoanele cu drop-down, mesaje de avertizare sau grafice.

Este implementat sub formă de clase ce trebuie adăugate elementelor din documentul de bază HTML.

4.4 JavaScript

JavaScript este un limbaj de programare folosit în principal în dezvoltarea de aplicații WEB.

A fost dezvoltat inițial de către Netscape din dorința de a adaugă conținut interactiv paginilor web.

Contrat numelui, sintaxa JavaScript este mai apropiată de sintaxa din C decât de cea din Java. Cu toate astea sunt evidente și influențele limbajului Java.

Limbajul de programare este bazat pe ECMAScript, un limbaj de scriptare dezvoltat de către Sun Microsystems.

JavaScript este înregistrat sub Oracle Corporation și este folosit sub licență pentru tehnologii de către Netscape Communications.

Este un limbaj de nivel înalt și dinamic.

Acest limbaj este client-side. Acest lucru înseamnă că procesatorul codului sursă este web browserul clientului, nu serverul web. Acest lucru da posibilitatea rulării unor procese înainte de trimiterea lor pe serverul web, cum ar fi apariția mesajelor în browser sau verificarea unui formular înainte că acesta să fie trimis.

JavaScriptul poate fi făcut atât în pagina de HTML cât și într-un fișier separat notat cu extensia .js.

Într-o pagină html codul de JavaScript va arăta în felul următor:

Intr-un fisier .js separat codul de JavaScript poate arăta in felul următor:

Împrumută structuri de la limbajul C, cum ar fi funcțiile if, while, switch, do while, dar comparativ cu limbajul C permite omiterea “ ; “ la final de instrucțiune prin adăugarea automată a acesteia unde este cazul.

4.4.1 Sintaxa

“Sintaxa JavaScript conține elemente ca Value, Operators, Expression, Keywords și Comments.

Sunt definite 2 tipuri de date: date fixer și date variabile.

Numerele se pot scrie atât cu zecimale cât și fără iar șirurile de caractere, cuvintele, pot fi adăugate atât între apostrof cât și între ghilimele.

Funcția var declară variabilele, în timp ce cu ajutorul semnului “ = “ variabilei i se atribuie o valoarea.

De asemenea sunt folosiți și operatori aritmetici precum +, -. / pentru calcule.

O expresie este o combinație de variabile, valori și operatori care împreună rezultă într-o valoare. Acest proces este numit evaluare.

Comentariile sunt notate cu // sau /* */ iar codul scris în interiorul acestora nu va fi compilat.

Identificatorii sunt elemente prin care JavaScriptul face distincția între identificatori și numere. Aceștia sunt folosiți pentru a denumi variabile. De aceea tot timpul primul caracter trebuie să fie o literă, underscore ( _ ) sau $.

Aceștia sunt case sensitive, variabilele Prenume și prenume fiind variabile diferite.

JavaScript folosește setul de caractere Unicode, care cuprinde majoritatea literelor și semnelor de punctuație din lume. “ – w3schools.com

4.5 jQuery

“jQuery este o librărie rapidă, mică și cu multe opțiuni de JavaScript. Transformă documente HTML în documente manipulabile, animate, ușor de folosit. Face chiar și functia Ajax mai simpla datorită unui API ușor de folosit și funcțional în intermediul mai multor browsere.

Cu o varietate elemente, versatilitate și extendabilitate, jQuery a schimbat modul în care milioane de oameni scriu JavaScriptul,

Exemplu Ajax:

.” – jquery.com

4.6 PHP

PHP-ul este un limbaj de scriptare open-source. Acesta este un limbaj server-side, adică este citit de către serverul WEB și nu de către browser.

A fost inițiat de către Rasmus Lerdorf în anul 1994 iar denumirea sa, inițial, însemna Personal Home Page (Pagina de “Acasa” personală).

În prezent limbajul este susținut de către The PHP Group iar denumirea sa reprezintă acronimul recursiv PHP: Hypertext Preprocessor.

Codul de PHP poate fi introdus în fisireul HTML, poate fi folosit în cadrul mai multor templateuri de sisteme web și frameworkuri web.

PHP-ul este procesat de către un modul de interpretare al PHP aflat în serverul web sau ca un un executabil CGI (Common Gateway Interface).

O altă utilitate a PHP-ului este aceea de implementare a unor aplicații grafice standalone. În acest caz PHP-ul este executat de către un CLI (Command-line interface).

http://edilerre.com/old/index.php-example-i9.png

4.6.1 Sintaxa

Orice document PHP trebuie să conțină tagul <?php…>.

În pagina de HTML trebuie menționat tipul de scriptare PHP prin intermediul tagului <script language=”PHP”>…</script>

Comentariile sunt trecute după semnul #. Dacă un comentariu se întinde pe mai multe rânduri, la trecerea pe rândul următor se va pune din nou #. Se poate opta de asemenea pentru punerea comentariilor între /* și */. În acest caz Comentariul poate fi pus pe mai multe linii iar în momentul în care se va citi elementul */ compilatorul va știi că acolo se termină comentariul.

Spațiile și liniile goale nu sunt citite de către PHP. În schimb sintaxa acestuia este case sensitive, în cazul în care avem declarat $capital și îi atribuim o valoare, dacă la print scriem Capital, acesta nu va afișa valoarea respectivă, ci va lasă un spațiu alb.

Spre deosebire de JavaScript, în PHP fiecare expresie trebuie terminată prin semnul “ ; “. Altfel compilatorul nu va știi unde se termină funcția respectivă.

Capitolul 5: Prezentarea aplicatiei

5.1 Homepage

Fig

Aceasta este pagină de Home. În ea sunt prezentate cele mai importante informații și este gândită cât să oferer un design atractiv. Sunt implementate Butoane de contact, place holdere pentru poze și descrieri de tip text.

Siteul este responsive, la zoom elementele rearanjandu-se pentru a încăpea în pagina fără probleme de design.

Meniu

Acesta este meniul aplicației. Conține 5 butoane care trimit de la o pagină la alta la click, cât și o casetă de tip Search, ce va găsi conținut în site și va face trimiterea către el.

Logo

Acesta este logoul websiteului. Reprezintă un ochi cu percepții diferite, ceea ce este o metaforă pentru cum funcționează mintea unui copil cu autism, tema aplicației. La fel ca un Mozaic, informațiile sunt multiple dar trebuie să creeze o imagine de ansamblu armonioasă.

Header

Acesta este headerul paginii web. Conține o clasă de tip jumbotron (Bootstrap) care încapsulează atât logoul cât și o casetă de text și un buton de contact.

Articole si galerie foto

Aceasta este o secțiune de informare de tip article ce înglobează atât casete de text cât și poze pentru exemplificarea activitatiilor.

Descriere si butoane

Această secțiune conține casete text și butoane ce vor face trimitere la articole din cadrul paginii “Informatii”.

Footer

În partea de footer avem un buton ce face trimiterea către pagina de “Contact” cât și copyrightul aplicației web. Pe viitor se pot adaugă butoane ce vor face trimiterea în diferite pagini ale websiteului, cum ar fi cea de logare.

5.2 Blog

Titlu si header

Pagina de blog prezintă în partea ei superioară titlul paginii – Blog apoi autorul acestuia si titlul articolului.

Se poate modifica ulterior cât să arate numele autorului pentru fiecare autor al articolelor, dacă este cazul, sau să rămână în headerul paginii în cazul unui singur autor.

Mai jos este un place holder pentru o poză sugestivă articolului cât și elementul de text al blogului respectiv.

Postare comentarii

Aceasta este casetă de text pentru comentarii. Este un form cu o casetă de text de 4 rânduri și un buton de Postaza.

Comentariile urcate aici vor fi stocate în baza de date și vor fi urcate într-o parte ulterior dezvoltată a paginii, cea de comentarii.

5.3 Informatii

Header

Această pagină este cea de informații. Am preferat să o las simplă, printr-o poză în partea de sus a ei și casete text, pentru a lasă focusarea pe partea de text.

Video

Pentru informații mai coerente am adăugat videoclipuri Youtube alături de textul explicativ al acestora.

5.4 Contact

Header

În partea de header am poziționat titlul, un paragraf de text și o listă de 3 rânduri, aliniată la stânga în care am adăugat adresa de contact.

Integrare Google Map

entru a ușura traseul până la sediu am adăugat o harda google maps cu Pin pe locația mai sus menționată.

Formular

Formular cu un mesaj de camp necompletat

În partea de jos, pentru a facilita o comunicare eficientă și directă între utilizatori și asociație am adăugat un form de contact. Acesta poate fi legat atât la o adresa de e-mail cât și la o bază de date în care să se stocheze mesajul.

5.5 Cont – pagina in lucru

Pagina de logare este simpla si contine pe langa titlu 2 casete, una de tip user si una de tip password. Prima afiseaza textul introdus de la tastatura in timp ce a 2-a ascunde textul.

5.6 Galerie Foto

Capitolul 6: Concluzii si dezvoltari ulterioare

6.1 Concluzii

Aplicația a avut încă de la început un scop bine definit. În urma analizei subiectului și prin aplicarea metodelor și tehnicilor de design am realizat un website funcțional și ușor de folosit, precum și cu un design modern.

Putem preciza în mod special ca avantaje:

1.Realizarea unui design minimalist dar în același timp modern.

2. Alegerea unor elemente necesare pentru facilitatea interacțiunii ultilizatorului cu websiteul.

3. Integrarea elementelor de contact, cum ar fi harta Google Maps sau formularul de contact, lucru ce ușurează interacțiunea dintre asociație și publicul țintă

4. Informarea rapidă și succintă a utilizatorilor printr-o așezare curată și organizată a informațiilor

5. Eliminarea nevoii canalelor de comunicare rudimentare (telefon, fax) și facilitarea unei comunicări rapide și moderne.

6. Informarea eficientă prin intermediul textului și a videoclipurilor, îmbinate într-un mod plăcut și ușor de parcurs

Chiar dacă informațiile necesare sunt afișate în acest tip de website, în continuare se pot face modificări și aduce elemente noi.

6.2 Dezvoltari ulterioare

În perioada următoare voi încerca introducerea un website a unor noi elemente. Voi încerca adăugarea unui buton de donație și legarea acestuia la un cont de plată Paypal, realizarea unui carusel pentru pagini.

De asemenea voi încerca realizarea unor efecte de paralax pe elemente și adăugarea de animații la scroll, ce vor da un dinamism mai accentuat websiteului.

De asemenea voi încerca să implementez un sistem de postare a comentariilor pe pagină de blog, comentarii care vor apărea în ordine cronologică în partea de jos a paginii.

Cea mai importantă îmbunătățire a websiteului va fi realizarea secțiunii de Log in. Momentan pagina este creată minimalist și nu conține decât front endul, dar în perioadă următoare voi adaugă bază de date folosind tehnologia SQL și vor crea un header personalizat post-logare.

De asemenea voi crea pagina de admin prin care se vor atribui funcții de organizare a siteului. Din ea se vor putea vedea date statistice, se vor putea șterge sau posta comentarii și se va putea urca sau scoate content din pagină.

Bibliografie

Carti:

“Simply Easy Learning” de Tutorials Point.

“HTML5 Canvas” de Steve Fulton si Jeff Fulton

“CSS3 the missing manual” de David Sawyer McFarland

“PHP 4” de Bill McCarty

“Crearea paginilor web cu HTML 4” de Dave Taylor, traducerea de Adriana Popescu si Gheorghe Musca

Websiteuri:

http://www.w3schools.com/

https://www.w3.org/

https://www.wikipedia.org/

http://www.tutorialspoint.com/

https://www.javascript.com

jQuery

http://www.creativebloq.com/web-design/jargon-wireframes-mockups-prototypes-51514898/2

Anexe cod sursa

HTML Homepage:

HTML Informatii

HTML Blog

HTML Cont

HTML Contact

HTML Galerie Foto

CSS custom.css