Programul de studiu: [309723]

Licență

Programul de studiu: [309723]

Byadmin ianuarie 1, 2024

Universitatea TRANSILVANIA din Brașov

Facultatea de Matematică și Informatică

Programul de studiu:

Lucrare de absolvire

Coordonator științific: Autor:

Lect. univ. dr. Vlad Monescu Molnar Zsolt

Brașov, 2020

Universitatea TRANSILVANIA din Brașov

Facultatea de Matematică și Informatică

Programul de studiu:

Crearea si publicarea pagini web al Școlii Gimnazială ”Balasko Nandor” Sălacea, pe internet

Coordonator științific: Autor:

Lect. univ. dr. Vlad Monescu Molnar Zsolt

Brașov, 2020

Cuprins

Întroducere

În secolul XXI unitatea de învățământ trebuie să fie pregătită pentru a face față provocării noi din partea societății contemporane. Internetul, privit cu reticență inițial, a [anonimizat] o școala își poate construi o imagine.
[anonimizat] o putem promova. [anonimizat] a adapta programul educațional la nevoile în schimbare ale societății.

Pentru a reuși, o instituție educațională are nevoie să se adapteze corespunzător mediului complex și în continuă schimbare. Toate activitățile instituției au loc și sunt dependente de mediul exterior.

Astfel, [anonimizat], [anonimizat] a promova imaginea pozitivă a școlii, de a obține feedback din partea societății. [anonimizat] o importanță deosebit de mare are și situl web al instituției. [anonimizat], [anonimizat], [anonimizat], [anonimizat]-ul web poate fi accesat 24/7 din orice colț al Lumii.

Contextul actual de pandemia de COVID-19 a generat o situație excepționala si pentru sistemul de învățământ. Aproape de pe o [anonimizat] a [anonimizat].

În aceste condiții s-a prezentat o nevoie urgentă de a crea situlul web al Școlii Gimnazială “Balaskó Nándor” Sălacea, precum și înrolarea acestuia pe platforma e-learning G-[anonimizat].

Tema actuală își propune următoarele obiective:

1. [anonimizat]5, css, javascript, Bootstrap;

2. [anonimizat];

II. Tehnologii web

II.1 Limbajul de markup HTML5

” Un limbaj de marcare (în engleză: markup language) este o metodă de formatare a unui text de pe o [anonimizat]. Informațiile suplimentare (de exemplu despre structura sau prezentarea textului) sunt exprimate utilizând așa numiți marcatori (sau instrucțiuni de marcare).

O trăsătură comună a multor limbaje de marcare este amestecarea textului cu instrucțiunile de marcare ([anonimizat]) în același fișier.

Exemple: [anonimizat], XHTML și altele.”

” HTML , [anonimizat]. El oferă posibilitatea de a [anonimizat] – [anonimizat], titluri, paragrafe, liste, etc. – și de a oferi textelor interactivitate , imagini , și alte obiecte.”

Scurtă prezentare istorică a limbajului markup HTML:

Limbajul HTML a fost proiectată în așa fel ca să poate folosi funcționalitățile multimedia oferit de world wide web.

Părintele HTML-lui a apărut în 1986, sub numele Standard Generalized Markup Language, devenind standard ISO. În 1990 apare HTML 1.0, 1993 HTML+, 1994 HTML 2.0, iar în prezent dezvoltarea limbajului a ajuns la versiunea 5, HTML5.

”Începând cu 1996, specificațiile HTML au fost administrate, pe baza reacțiilor vânzătorilor de software comercial, de către World Wide Web Consortium (W3C). În 2000, HTML a devenit un standard internațional (ISO/IEC 15445:2000). Ultima specificație HTML publicată de W3C este Recomandarea HTML 4.01, publicată spre finalul anului 1999. Ultima ediție cu corecțiile erorilor prin erate a fost publicată în 2001.”

La nivelul sintaxei, acest limbaj este caracterizat de tag-uri și liste atribuit acestora.

Câteva elemente prezente și în pagina web din limbajul, sunt următoarele:

”<html>

<body>

conținutul pagini

</body>

</html>

Primul tag se numește <html> și este cel care îi spune browser-ului că a început un cod în HTML. Cel de-al doilea tag, <body>, spune browser-ului că aici începe partea vizibilă sau conținutul paginii HTML.

Tag-urile </body> și </html> sunt tag-uri de închidere. </body>, dă de știre browser-ului, că s-a încheiat conținutul pagini, iar </html> că s-a încheiat documentul HTML.

Slesh "/" este pus înaintea numelui tag-ului și spune browserului că ar dori să încheie respectiva funcție. Deci <tag> este folosit pentru a începe o funcție, iar </tag> pentru a o încheia.

Ordinea deschiderii și a închiderii tag-urilor este foarte importantă. Dacă un tag este deschis într-un altul, de exemplu body este deschis în html atunci acel tag (body) este cel care trebuie închis înaintea celui de-al doilea tag (html). Am închis mai întâi body pentru că a fost cel care s-a deschis cel mai recent. Această regulă și anume deschiderea și închiderea tag-urilor se aplică la toate celelalte taguri ale documentelor HTML.

<head>

Acest tag urmează imediat după <html> și este folosit pentru a indica browser-ului, informații utile precum: titlul pagini, conținutul (folosit de motoarele de căutare vechi) și multe altele

<title>

Se pune între <head> și </head>. Acest tag este cel care dă numele pagini. Numele va fi afișat în browser, de obicei în partea stângă sus.

<h2>

Acesta este titlul care apare în pagină, înainte de conținut și va fi mai mare decât litera de conținut. <h2> înseamnă că e cea de-a doua mărime a literei între cele șase care există. <h1> este cea mai mare iar <h6> va fi cea mai mică.

<p>

Este tag-ul care marchează deschiderea și încheierea unui paragraf. Așa că atunci când vei începe un paragraf asigură-te că ai pus <p> la început și </p> la sfârșit.”

BGCOLOR = culoare – Culoarea de fond a paginii

TEXT=culoare – Culoarea textului pe pagină

LINK=culoare – Culoarea legăturilor nevizitate din pagină

VLINK=culoare – Culoarea legăturilor vizitate din pagină

ALINK=culoare – Culoarea legăturilor pe durata clicului executat de utilizator

BACKGROUND = url – Imaginea de fond pentru pagină

<FONT> </FONT> – Specifică atribute ale textului încadrat

SIZE=n – Dimensiunea textului este 1-7

FACE="a,b" – Specifică fontul: a, dacă este disponibil, sau b

COLOR=s – Culoarea textului: fie un nume de culoare, fie o valoare RGB

<BR> – Linie nouă

</BR> –

<PRE> </PRE> – Informație pre formatată

<!– –> – Comenatriu HTML

<CENTER> </CENTER> – Centrează materialul în pagină

<A> </A> – Marcaj de tip ancoră

HREF=url – Referință hipertext

HREF=#nume – Referință către o ancoră internă

Name=nume – Definiția unei ancore interne

Marcaje pentru liste folosite:

<LI> – Element de listă

<OL> – Listă ordonată (numerotată)

<UL> – Listă neordonată (marcată)

TYPE=formă – Forma marcajului. Valori posibile: circle, square, disc.

Adăugarea imaginii:

<IMG > – Marcajul de introducere a imaginilor

SRC=url – Sursa fișierului grafic

ALT=text – Textul alternativ de afișat, dacă este necesar

ALIGN=aliniere – Alinierea imaginii în pagină. Valori posibile: top (sus), middle (în mijloc), bottom (jos), left (în stânga), right (la dreapta)

HEIGHT=x – Înălțimea imaginii (în pixeli)

WIDTH=x – Lățimea imaginii

BORDER=x – Chenarul din jurul imaginii, atunci când aceasta este utilizată ca hiperlegătură

II.2. CSS – Cascading Style Sheets

”CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe sau în cadrul documentului, prin elementul <style> și/sau atributul style. CSS se poate utiliza și pentru formatarea elementelor XHTML, XML și SVGL.”

” CSS este destinat în primul rând să permită separarea conținutului documentului (scris în HTML sau un limbaj de marcare similar) de prezentarea documentului, inclusiv elemente precum culori, fonturi, și înpaginare. Această separare poate îmbunătăți accesibilitatea conținutului, poate oferi mai multă flexibilitate și control în specificarea caracteristicilor de prezentare, permite partajarea formatării pentru multiple pagini, și reduce complexitatea și repetiția în conținutul structural (precum posibilitatea designului web fără tabele). CSS poate de asemenea să permită unei aceleiași pagini de marcare să fie prezentată în diferite stiluri pentru diferite metode de transmitere, precum pe ecran, imprimare, voce (când se citește cu ajutorul unui browser pe bază de voce sau cu cititor de ecran) și Braille, dispozitive tactile. În timp ce autorul unui document leagă de obicei acel document de un șablon de stil CSS, cititorii pot folosi un șablon de stil diferit, posibil chiar pe propriul calculator, pentru a suprascrie pe cel specificat de autor.”

Așadar este un limbaj folosit doar pentru a schimba modul in care este prezentat conținutul, ceea ce este foarte important, se editează într-un fișier de text, salvat apoi cu extensia .css.

Câteva proprietăți și valori folosite în site:

color – stabilește culoarea textului

background – stilizează fundalul elementului.

margin – setează distanța față de conturul elementului.

border – stilizarea bordurii elementului.

padding – determină mărimea spațiului dintre conținut și bordură.

display – stabilește felul în care un element este afișat în pagină.

position – stabilește felul în care un element este poziționat pe pagină.

float – setează afișarea conținutului în partea stângă sau dreaptă a paginii.

text-decoration – stabilește decorațiile aduse textului (bold, underline, overline, etc.).

line-height – spațierea rândurilor

# – folosirea atributul id a unui element HTML pentru a comunica cu el

class – ne putem adresa mai multor element in același timp

Un fișier CSS "extern", poate fi asociat cu un document HTML utilizând următoarea sintaxă:

Există biblioteci pre-create, numite șabloane CSS, care ajută la stilizare și standardizare a paginilor web.

Lista șabloanelor CSS:

960 grid system

Blueprint

Bluesky Grid system

Bootstrap

Cardinal

Cascade Framework

Cascade Framework Light

Chopstick

Columnal

Dismantle

Emastic

Floatz

Fluidable

Foundation

Gumby Framework

Ink

Jaidee Framework

Jeet Framework

KNACSS

Kube

Kule CSS Lazy

Malo

Pure

Responsive Grid System

RÖCSSTI

Schema UI / Built with LESS

Semantic UI

Skeleton

StackLayout

uikit

Unsemantic … etc

II.3. Javascript

” JavaScript (JS) este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor.[5] Este folosit mai ales pentru introducerea unor funcționalități în paginile web, codul JavaScript din aceste pagini fiind rulat de către browser. Limbajul este binecunoscut pentru folosirea sa în construirea siturilor web, dar este folosit și pentru accesul la obiecte încapsulate (embedded objects) în alte aplicații. A fost dezvoltat inițial de către Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, și denumit în final JavaScript.

În ciuda numelui și a unor similarități în sintaxă, între JavaScript și limbajul Java nu există nicio legătură. Ca și Java, JavaScript are o sintaxă apropiată de cea a limbajului C, dar are mai multe în comun cu limbajul Self decât cu Java.

Cea mai des întâlnită utilizare a JavaScript este în scriptarea paginilor web. Programatorii web pot îngloba în paginile HTML script-uri pentru diverse activități cum ar fi verificarea datelor introduse de utilizatori sau crearea de meniuri și alte efecte animate.”

Un exemplu de script folosit în proiect:

”<script>

var modal = document.getElementById('id01');

window.onclick = function(event) {

if (event.target == modal) {

modal.style.display = "none";

}

} </script>”

II.4. Bootstrap

Bootstrap este un framework CSS gratuit și opend-source, direcționat către dezvoltarea web front-end receptivă și mobilă. A fost creat de foști angajați al Twitter, Mark Otto si Jacob Thornton. Este bazat pe tabele. Se poate descărca gratuit de pe adresa:

https://getbootstrap.com/docs/4.5/getting-started/download/

Este in totalitate responsive. Folosit pentru aplicații si site-uri care au in codul sursa HTML, CSS si JavaScript.

Funcționalități:

– design-uri moderne;

– folosește rânduri si coloane;

– este responsive;

– stilizează coloane;

– folosește câmpul de căutare;

– stilizează formulare;

– creează popup-uri;

– creează taburi;

– creează slidere;

– folosești carusele;

– folosești paginație cu butoane;

Componentele Bootstrap pot fi accesate în scopul utilizării lor într-un document HTML în două moduri: descărcându-l de pe site-ul oficial http://getbootstrap.com/getting-started/ sau inclus în documentul HTML prin tag-ul:

href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

III. Descrierea site-ului web

În această lucrare mi-am propus să realizez un site de prezentare a Școlii Gimnazială Sălacea, care va avea conținut dinamic si cu ajutorul căruia școala se poate înrola în sistemul educațional G-Suit for Education.

La baza sitului stă un free tamplete care se poate descărca de pe adresa:

http://freehtml5templates.com. Această fiind personalizată, îmbunătățită respectând cele 5 elemente cheie în dezvoltare unui site web, pentru promovarea imaginea școlii, și anume:

– utilitate;

– designe receptiv;

– respectarea cerințelor privind accesibilitatea siturilor web;

– navigație bine organizată;

– pagini populare optimizate;

Pagina web este structurată în următorul fel:

Header – antet, în partea de sus;

Bară de navigație, care conține 7 sub meniu;

Bară de știri;

Linkuri utile, geo locație și accesarea rețelelor de socializare – în partea de stângă;

Conținutul sub meniurilor – partea centrală;

Subsolul pagini – parte de jos;

III.1. Header – antetul pagini

Partea de sus găsim antetul paginii care este format din numele școlii, dintr-o poză despre clădirea principală și o poză despre Balaskó Nándor – un arhitect născut în satul Sălacea, numitorul școlii, iar în parte de dreaptă sunt 4 butoane: facebook, limbile română și maghiară și un login button.

Butonașul facebook accesează un site extern, pagina de facebook al școlii, având următorul cod html:

și cod css:

.fa {

padding: 10px;

font-size: 30px;

width: 35px;

text-align: center;

text-decoration: none;

border-radius: 50%;

position: relative;

color: #FFFFFF !important;

}

.fa:hover {

opacity: 0.5;

}

.fa-facebook {

background: #3B5998;

color: #FFFFFF;

}

Login button: prin apăsare butonului login, apară o fereastră nouă de logara în aplicația G-Suite for education (în curs de dezvolare). Pentru configurarea a fost folosit și cod javascript.

<button type="button" class="btn btn-success mr-3"

onclick="document.getElementById('id01').style.display='block'">Login</button> – reprezint codul html.

codul javascript fiind următorul:

window.onclick = function(event) {

if (event.target == modal)

{

modal.style.display = "none";

}

function login() {

window.open('https://mail.google.com', '_blank');

}

mybutton = document.getElementById("myBtn");

window.onscroll = function() {scrollFunction()};</script>

III. 2. Bară de navigație:

Bară de navigație conține 7 sub meniu:

– Home – sub forma unui icon, reprezintă pagina de pornire a site-ului, cu cele mai importante actualități despre viața școlii

– Despre noi – cuprinde o scrută descriere despre localizare, misiunea școlii;

Documente – sunt încărcate documente școlare, conform legislației în vigoare. De exemplu: declarații de avere, organigrama anului școlar 2019-2020;

Oferta educațională – încărcată sub forma unui pdf, integrat în pagina, având următorul cod html:

</embed >

Învățăm altfel – cuprinde activitățile extracuriculare și extrașcolare, sub forma unor documente pdf;

Galerie – reprezintă o modalitate vizuală frumoasă de a menține părinții actualizați la evenimente școlare importante și noi.

La crearea galeriei de imagini am folosit tehnologia bootstrap, având următoarele coduri:

href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

href="https://rawgit.com/LeshikJanz/libraries/master/Bootstrap/baguetteBox.min.css">

integrate în head.

</a>

</div>

Contact – sunt afișate datele de contact al instituției

III.3. Bara orizontale de tip web tricker

Sub navigație găsim o bară orizontală cu cele mai noi știri și actualități. Aceasta este de tip web tricker.

Unele informații au legături către site-uri externe. Având următoarele cod:

<div class="ticker_item">15 iunie, Limba și literatura Română.</div>

.ticker-wrap {

left: 0;

width: 100%;

overflow: hidden;

height: 2.2rem;

background-color: #C7C1A7;

box-sizing: content-box;

}

.ticker-wrap .ticker {

display: inline-block;

height: 2.3rem;

line-height: 2rem;

white-space: nowrap;

padding-right: 100%;

box-sizing: content-box;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

-webkit-animation-name: ticker;

animation-name: ticker;

-webkit-animation-duration: 30s;

animation-duration: 55s;

}

.ticker-wrap .ticker__item {

display: inline-block;

padding: 0 2rem;

font-size: 1rem;

color: white;

}

III.4. Linkuri utile, geo-locație și accesarea rețelelor de socializare

În partea de stânga a site-ului găsim o listă cu linkuri utile, o listă cu rețelele de socializare fiecare cu legături externe, de exemplu: Ministerul Educației și Cercetări, etc.

Geo-locația a fost realizat cu ajutorul google maps. Harta devenind astfel dinamică, permite vizualizarea atât topografică cât și satelit view. Având următorul cod:

</iframe>

IV. Publicarea site-ului online

Pentru publicarea orice site pe internet este nevoie de un nume de domeniu, care reprezintă o înșiruire unica de caractere, atribuita unei adrese IP a unui server permanent conectat la Internet. Numele de domeniu este unic. Conform legislației în vigoare, pentru achiziționarea unui nume de domeniu, trebuie aplat la o firmă de înregistrarea de domenii. De exemplu – ionos.ro. Primul pas este verificarea disponibilitatea domeniului, după care începe procesul de înregistrarea numelui solicitat – scoalasalacea.ro. După achiziționarea domeniului mai este nevoie și de un web server, aceasta este ”serverul care stochează (găzduiește) pagini web și le pune la dispoziția solicitanților prin protocolul HTTP.”

În acest caz domeniul și web serverul este oferit de aceeași firmă. După autentificare în panul de control al web serverului, trebuie atribuit numele de domeniul la web server respectiv.

Atribuirea poate dura mai multe ore.

Web serverul folosește protocolul de ftp pentru încărcare fișierelor. Se poate accesa pintr-un client webftp, sau cu ajutorul unor programe (TotlaCommander, Filezilla, etc)

Fișierele site-ului web trebuie copiat în folderul public_html.

După acest pas, site-ul web al școlii devine activ, publicat pe internet, putând fi accesat din orice colț al Lumii, pe adresa www.scoalasalacea.ro

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: Programul de studiu: [309723] (ID: 309723)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

Programul de studiu: [309723]

Copyright Notice

EFQSFTTJPO BOYJFUZBOEBMDPIPMSFMBUFEEJTPSEFST .VTJTJ .PMMJDB8FJTT [600326]

Riscurile bancare și modalități de gestionare [614341]

Gliga Catalin 01.07.2019 [615694]

Studiu cu privire la construcția și funcționarea sistemelor de distribuție variabilă [310439]

Pterigionul intern este un proces degenerativ al conjunctivei bulbare, localizat [625465]

Ce as fi eu fara statul social al parintilor mei [616292]

Copyright Notice

Similar Posts