LUCRARE PENTRU ATESTAREA COMPETENŢELOR

PROFESIONALE

Icarii lumii moderne

Coordonator:

Prof. Stângă Viorica Mirela Realizat de:

Elev Koszorus Oana Teodora

Clasa a XII-a MI2

2022
 Cuprins

Motivarea alegerii temei 3

Utilitatea 3

Structura 4

Bara de navigație 4

Pagina principală (Acasă) 4

Secțiuni 4

Limbaje folosite 5

Implementare tehnică 8

Concluzie 16

Bibliografie 16

3
 Motivarea alegerii temei

Lucrarea de față are ca temă realizarea unui site care prezintă câteva aspecte ale
săriturilor cu schiurile, sport de iarnă spectaculos, ai căror practicanți sunt numiți “icarii lumii
moderne”.

Aplicația a fost realizată în cea mai mare parte în limbajul HTML și CSS, prin programare
directă în editorul de texte Notepad++.

Am ales această temă deoarece îmi place acest sport. Este spectaculos, competitiv și
foarte “fair-play”. Sportivii din Cupa mondială FIS formează un mare grup de prieteni. Și cui
nu i-ar place să zboare, măcar pentru câteva secunde...

Utilitatea

Cel mai mare avantaj al site-ului este accesibilitatea, în special vizuală.

Site-ul este realizat în manieră modernă, simplistă, într-o singură pagină divizată in
secțiuni.

Această structură subliniază caracterul unitar al informației prezentate într-un stil

modern, actual.

La realizarea acestui site am încercat să folosesc diverse elemente ale limbajelor HTML,
CSS și JavaScript.

Structura

Bara de navigație

1
 Bara de navigație este afișată tot timpul în partea superioară a ecranului. Ea asigură
legăturile între secțiunile siteului.

Pagina principală (Acasă)

În partea superioară a paginii principale este o imagine a unui icar al lumii moderne în
zbor. Apoi este prezentată o scurtă introducere în sportul de iarnă săriturile cu schiurile.
Sunt menționate extrase din istoria și regulamentul acestui sport, câteva caracterisitici ale
trambulinelor, ale competițiilor și informații despre acest sport olimpic de iarnă.

Secțiuni

Secțiunile siteului au legături în bara de navigare. Ele descriu pe scurt câteva repere ale
acestui sport.

Turneul celor 4 trambuline este cea mai cunoscută și mai veche competiție de sărituri cu
schiurile. Secțiunea conține o scurtă descriere, imagini ale celor patru trambuline și
descrierea sistemului eliminatoriu specific acestei competiții.

Secțiunea Zbor cu schiurile cuprinde o scurtă descriere, prezentarea trambulinelor de

zbor cu schiurile și un scurt video cu săritura care a stabilit actualul record mondial.

Secțiunea Sportivi prezintă câțiva reprezentanți ai acestui sport. Sunt prezente linkuri
spre paginile wikipedia dedicate acestora.

Secțiunea Trambuline conține imagini ale celor mai cunoscute trambuline de sărituri cu
schiurile.

1
 Secțiunea Ski jumping în România conține informații despre singura trambulină din
România și câteva imagini ale acesteia.

Secțiunea Quiz are întrebări ale căror răspunsuri sunt prezente în secțiunile siteului.
Calculul și afișarea numărului corect de răspunsuri la acest quiz mi-a oferit ocazia de a folosi
un script Javascript simplu, demonstrând folosirea scripturilor în realizarea unui site.

Opțiunea Contact a barei de navigare exemplifică realizarea unui pop-up modal.

Un click pe iconița cu imaginea stilizată a unui săritor cu schiurile afișează un alt pop-up care
justifică alegerea titlului acestui site.

Limbaje folosite

HTML5

HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea
paginilor web ce pot fi afișate într-un browser (sau navigator). Scopul HTML este mai
degrabă prezentarea informațiilor – paragrafe, fonturi, tabele ș.a.m.d. – decât descrierea
semanticii documentului. În cadrul dezvoltării web de tip front-end, HTML este utilizat
împreună cu CSS și JavaScript.

Specificațiile HTML sunt dictate de World Wide Web Consortium (W3C), care
încurajează utilizarea CSS în locul HTML explicit pentru prezentare.

HTML este o formă de marcare orientată către prezentarea documentelor text pe o

singura pagină, utilizând un software de redare specializat, numit agent utilizator HTML, cel
mai bun exemplu de astfel de software fiind browserul web. HTML furnizează mijloacele prin
care conținutul unui document poate fi adnotat cu diverse tipuri de metadate și indicații de
redare. Indicațiile de redare pot varia de la decorațiuni minore ale textului, cum ar fi
specificarea faptului că un anumit cuvânt trebuie subliniat sau că o imagine trebuie
introdusă, până la scripturi sofisticate, hărți de imagini și formulare. Metadatele pot include
informații despre titlul și autorul documentului, informații structurale despre cum este

1
împărțit documentul în diferite segmente, paragrafe, liste, titluri etc. și informații cruciale
care permit ca documentul să poată fi legat de alte documente pentru a forma astfel
hiperlink-uri (sau web-ul).

HTML este un format text proiectat pentru a putea fi citit și editat de oameni utilizând
un editor de text simplu. Totuși scrierea și modificarea paginilor în acest fel solicită
cunoștințe solide de HTML și este consumatoare de timp. Editoarele grafice (de tip
WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage
permit ca paginile web sa fie tratate asemănător cu documentele Word, dar cu observația că
aceste programe generează un cod HTML care este de multe ori de proastă calitate.

HTML se poate genera direct utilizând tehnologii de codare din partea serverului cum ar
fi PHP, JSP sau ASP. Multe aplicații ca sistemele de gestionare a conținutului, wiki-uri și
forumuri web generează pagini HTML.

CSS

CSS sau 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 una dintre
tehnologiile de bază utilizate în procesul de dezvoltare web, împreună cu HTML și JavaScript.

CSS permite separarea și prezentarea vizuală a conținutului unei pagini web, inclusiv
culorile și fonturile disponibile. Separarea elementelor unei pagini îmbunătățește
accesibilitatea paginii și permite o mai bună flexibilitate și un control în specificațiile
caracteristicilor de prezentare.

CSS3 reprezintă un upgrade ce aduce câteva atribute noi și ajută la dezvoltarea noilor
concepte in webdesign.

Unele dintre cele mai importante segmente (module) noi adăugate acestui standard
pentru formatarea elementelor HTML aduc un plus considerabil în dezvoltarea activități
webdesign.

1
 Mai jos sunt prezente in listă cele mai importante module adăugate in CSS3:

Selectors

Box Model

Backgrounds and Borders

Image Values and Replaced Content

Text Effects

2D/3D Transformations

Animations

Multiple Column Layout

User Interface

Deși au apărut unele deficiențe de compatibilitate între browsere, majoritatea

proprietăților CSS3 au fost implementate cu succes in variantele browserelor noi.

JavaScript

JavaScript (JS) este un limbaj de programare orientat obiect bazat pe conceptul

prototipurilor. 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 siteurilor web, dar este folosit și pentru accesul la obiecte
încapsulate (embedded objects) în alte aplicații.

Cea mai des întâlnită utilizare a JavaScript este în scripturile 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.

Implementare tehnică

Siteul conține:

1
  Icarii-lumii-moderne.html

 CSS/w3.css

 files/Stefan_Kraft_World_Record.mp4

 Directorul images cu imagini în format jpg.

Partea de HTML este cea mai voluminoasă. Împreună cu partea de CSS ea stă la baza
tuturor elementelor de structură.

Pentru partea de CSS am folosit W3.CSS - un framework CSS dezvoltat de

w3schools.com.

W3.CSS ajută la crearea de siteuri web mai rapide și mai frumoase. Este bazat în
întregime pe CSS standard, este inspirat de Google Material Design, este simplu și gratuit.

Am folosit W3.CSS prin instalare locală: am descărcat fișierul W3.CSS disponibil la

https://www.w3schools.com/w3css/4/w3.css în CSS/w3.css și l-am folosit in codul HTML.

Pentru personalizare am adăugat în w3.css următoarele elemente:

h1 {
color: green;
margin-top: 24px!important;
margin-bottom: 24px!important;
}
h2 {
color: indigo;
margin-top: 16px!important;
}
h1, h2 {
text-align: center;
font-family: sans-serif;
font-weight: bold;
}

h3 {
color: indigo;
text-align: center;
font-family: sans-serif;
}

1
 .img-center {
float: center;
height: 400px;
object-fit: contain;
}

Pentru afișarea în permanență a barei de navigație am introdus definiția de stil CSS în

fișierul html:

<style>

body {margin:0;}

.navbar {

overflow: hidden;

position: fixed;

top: 0;

width: 100%;

/* Navbar elements */

.navbar a {

float: left;

display: block;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

/* Main content */

1
 .main {

padding: 30px;

margin-top: 10px;

height: auto;

</style>

Folosirea W3.CSS simplifică definirea stilurilor în fișierul html.

De exemplu, bara de navigație este realizată astfel:

<header class="w3-center w3-light-blue navbar">

<div class="w3-bar w3-small w3-center w3-text-indigo">

<a href="#modal-jump"

onclick="document.getElementById('modal-jump').style.display='block'"

class="w3-bar-item w3-button w3-mobile w3-hover-blue">

<img src="images/ski_jumping_LOGO.jpg" class="w3-image" style="height:20px">

</a>

<a href="#sectiune-acasa" class="w3-bar-item w3-button w3-mobile w3-hover-

blue">Acasă</a>

<a href="#sectiune-turneu4" class="w3-bar-item w3-button w3-mobile w3-hover-

blue">Turneul celor 4 trambuline</a>

<a href="#sectiune-zbor" class="w3-bar-item w3-button w3-mobile w3-hover-

blue">Zbor cu schiurile</a>

<a href="#sectiune-sportivi" class="w3-bar-item w3-button w3-mobile w3-hover-

blue">Sportivi</a>

<a href="#sectiune-trambuline" class="w3-bar-item w3-button w3-mobile w3-

hover-blue">Trambuline</a>

<a href="#sectiune-ski" class="w3-bar-item w3-button w3-mobile w3-hover-

blue">Ski jumping în România</a>

1
 <a href="#sectiune-quiz" class="w3-bar-item w3-button w3-mobile w3-hover-
blue">Quiz</a>

<a href="#modal-contact"

onclick="document.getElementById('modal-contact').style.display='block'"

class="w3-bar-item w3-button w3-mobile w3-hover-blue">Contact

</a>

</div>

</header>

Un alt exemplu este footerul:

<footer >
<div class="w3-center w3-cell-row">
<div class="w3-container w3-cell w3-third w3-yellow w3-cell-middle">
<p>KOSZORUS OANA TEODORA</p>
</div>
<div class="w3-container w3-cell w3-third w3-green w3-cell-middle">
<p><img src="images/mail.jpg" class="w3-image" style="height:20px">
oanak2003@gmail.com</p>
</div>
<div class="w3-container w3-cell w3-third w3-blue w3-cell-middle">
<p><img src="images/phone.jpg" class="w3-image"
style="height:20px"> 0749889360</p>
</div>
</div>
</footer>

În realizarea acestui site am folosit două scripturi JavaScript.

Primul script este apelat la afișarea imaginilor în secțiunea “Trambuline”.

1
Toate imaginile afișate aici sunt în containere HTML de clasă mySlides. Colecția HTML a
acestor elemente este citită în variabila x cu metoda getElementsByClassName:

var x = document.getElementsByClassName("mySlides");

Imaginea de afișat este accesibilă prin indexul acestei colecții. Indexul este actualizat în
funcția plusDivs(n).

La apăsarea unuia dintre butoanele “<” sau “>” este apelată funcția plusDivs cu parametrul -
1 respectiv 1, realizând astfel afișarea imaginii precedente sau următoare imaginii curente:

<button class="w3-button w3-left w3-yellow" onclick="plusDivs(-1)">&#10094;</button>

<button class="w3-button w3-right w3-yellow" onclick="plusDivs(1)">&#10095;</button>

Funcția showDivs(n) actualizează indexul colecției pentru valorile minimă și maximă ale
acestuia și determină afișarea imaginii prin setarea proprietății display:
x[slideIndex-1].style.display = "block";

<script>

var slideIndex = 1;

showDivs(slideIndex);

function plusDivs(n) {

1
 showDivs(slideIndex += n);

function showDivs(n) {

var i;

var x = document.getElementsByClassName("mySlides");

if (n > x.length)

{slideIndex = 1;}

if (n < 1)

{slideIndex = x.length;}

for (i = 0; i < x.length; i++) {

x[i].style.display = "none";

x[slideIndex-1].style.display = "block";

</script>

Al doilea script JavaScript este folosit pentru calculul și afișarea numărului de răspunsuri
corecte la “Quiz”.

1
 El este apelat la apăsarea butonului “Verifică”.
<button id="myBtn" class="w3-button w3-aqua w3-margin">Verfică</button>
Apăsarea acestui buton este detectată de metoda addEventListener, care apelează funcția
Calcul(). Verificarea selectării butoanelor radio corespunzătoare răspunsurilor corecte se
face folosind proprietatea “checked” a acestora. Butoanele sunt identificate prin id-ul lor:

<script>

const element = document.getElementById("myBtn");

element.addEventListener("click", Calcul);

function Calcul() {

let result;

result = 0;

if (document.getElementById('kraft').checked)

{ result++; }

if (document.getElementById('rasnov').checked)

{ result++; }

if (document.getElementById('ryoyu').checked)

{ result++; }

1
 if (document.getElementById('lillehammer').checked)

{ result++; }

document.getElementById("punctaj").innerHTML = " Punctaj: " + result;

return false;

</script>

Concluzie

Realizarea acestui site a permis fixarea și aprofundarea cunoștințelor în acest domeniu

al informaticii.

Cunoștințele acumulate pe parcursul realizării proiectului de atestat ne vor servi drept

suport pentru studiu mai departe în carieră. Această lucrare constituie doar un început în
tainele realizării unui site folosind câteva din uneltele de bază existente astăzi, HTML, CSS și
Java Script.

Având în vedere realizarea acestui proiect doar în ultimul an de liceu consider că

obiectivul fundamental îl constituie motivația de a acumula mai multe cunoștințe.

Bibliografie

https://www.w3schools.com/html

https://www.w3schools.com/css/default.asp

https://www.w3schools.com/w3css/default.asp

https://www.w3schools.com/jsref/dom_obj_document.asp

1
https://www.vierschanzentournee.com/en

https://www.fis-ski.com/en/ski-jumping

https://en.wikipedia.org/wiki

https://ro.wikipedia.org/wiki

Programare web. Aplicatii in HTML, CSS, JavaScript - Angelica Bacivarov, Costel Ciuchi,
Gabriel Petrica