COLEGIUL NAȚIONAL MIHAI EMINESCU PETROȘANI [303918]

COLEGIUL NAȚIONAL „MIHAI EMINESCU” [anonimizat] – ORAȘ EUROPEAN

Coordonator Elev

Profesor : Dojcsar Marilena Diaconu Andrei

Clasa a XII-a A

2019

Cuprins

1.Introducere……………………………………………………….…….3

2.Internet…………………………………………………………………4

3.Limbaje utilizate:………………………………………………………7

Html, Css, Javascript

Html

4.Realizarea paginii web:………………………………………….….….9

4.1 index.html…………………………………………………….12

4.2 asezare.html……………………………………………..…….15

4.3 galerie.html…………………………………………………….17

4.4 gastronomie.html………………………………………….….22

4.5 obiective.html…………………………………………………24

4.6 persinalitati………………………………………………………26

5.Concluzii..……………………………………………………………..29

6.Bibliografie……………………………………………………………………………….30

Introducere

În ultima perioadă accesul la internet a [anonimizat]. Dar în ziua de azi standardele pentru dezvoltarea paginilor web au progresat enorm de mult. Folosindu-ne de cele mai noi standard precum HTML5 (Hypertext Markup Language), CSS (Cascading Style Sheets) [anonimizat]. Astfel a apărut conceptual de “Web Apps” care sunt mai mult decât un mod de transmitere a informației, acestea pot fi utilizate pentru a face aproape orice.

Putem stoca fișiere pe internet prin intermediul serviciilor de stocare online precum: DropBox, [anonimizat]. [anonimizat]. Avem posibilitatea de a [anonimizat], Vimeo, și Grooveshark.

Posibilitățile sunt atât de mari încât Google a conceput sistemul de operare Chrome OS care este practic o [anonimizat].

Nici cei de la Mozilla nu s-[anonimizat]. [anonimizat], dar spre deosebire de sistemul de la Google este conceput pentru telefoane mobile.

[anonimizat]. Astfel aceste aplicații au aceleași funcționalități ca și cele native deși practic sunt niște pagini web scrise în HTML și CSS și renderizate de un browser .

[anonimizat] o importanță tot mai mare în viețile noastre și va trebui să avem tot timpul o conexiune la internet pentru a [anonimizat], vitezele sunt tot mai mari și datorită rețelelor 3g și 4g este disponibil și în zonele mai innaccesibile.

De asemenea compilatoarele de javascript primesc noi optimizări în fiecare nouă versiune a navigatoarelor, devenind astfel mult mai capabile să ruleze programe Javascript complexe fără a avea încetiniri sau alte probleme. Acest lucru împreună cu uriașa creștere a puterii de procesare disponibilă la un preț tot mai scăzut fac ca ultimele probleme în calea răspândiri internetului ca o platformă universală să fie încetul cu încetul eliminate.

Internetul

Internetul este o rețea globală de rețele de calculatoare interconectate care utilizează protocolul TCP/IP pentru a servi utilizatorii.

Potrivit unui studiu întocmit de firma de cercetare on-line Internet WorldStats, în noiembrie 2007 rata de penetrare a Internetului în România a atins nivelul de 31,4 % din totalul populației, estimată la 22,27 milioane de locuitori, iar numărul de conexiuni broadband era de 1.769.300 .

Între 2007 – 2011 numărul conexiunilor la Internet în gospodăriile românești a crescut de la 22 % la 47 %. Cifrele corespunzătoare la nivelul Uniunii Europene au fost 54 % și 73 %.

În ziua de astăzi Internetul este susținut și întreținut de o mulțime de firme comerciale. El se bazează pe specificații tehnice foarte detaliate, ca de exemplu pe așa-numitele „protocoale de comunicație”, care descriu toate regulile și protocoalele de transmitere a datelor în această rețea.

Protocoalele fundamentale ale Internetului, care asigură interoperabilitatea între orice două calculatoare sau aparate inteligente care le implementează, sunt Internet Protocol (IP), Transmission Control Protocol (TCP) și User Datagram Protocol (UDP).

În 1959 John McCarthy, profesor la Universitatea Stanford, al cărui nume va fi asociat cu inteligența artificială, găsește soluția de a conecta mai multe terminale la un singur calculator central: time-sharing (partajarea timpului). Aceasta este o modalitate de lucru în care mai multe aplicații (programe de calculator) solicită acces concurențial la o resursă (fizică sau logică), prin care fiecărei aplicații i se alocă un anumit timp pentru folosirea resursei solicitate. Apărând apoi primele calculatoare în marile universități se pune problema interconectării acestora. Cercetătorul Lawrence Roberts susține o soluție de interconectare prin comutare de pachete (packet switching) în modelul numit "client-server". Astfel, pentru a transmite informația, aceasta este mărunțită în porțiuni mici, denumite pachete. Ca și la poșta clasică, fiecare pachet conține informații referitore la destinatar, astfel încât el să poată fi corect dirijat pe rețea. La destinație întreaga informație este reasamblată. Deși această metodă întâmpină rezistență din partea specialiștilor, în 1969 începe să funcționeze rețeaua "ARPANET" între 4 noduri: University of California din Los Angeles (UCLA), University of California din Santa Ana, University of Utah și Stanford Research Institute (SRI). Toate acestea au fost codificate într-un protocol care reglementa transmisia de date. În forma sa finală, acesta era TCP/IP (Transmission Control Protocol / Internet Protocol), creat de Vint Cerf și Robert Kahn în 1970 și care este și acum baza Internetului. TCP/IP face posibil ca modele diferite de calculatoare, de exemplu cele compatibile cu IBM sau și Mac, folosind sisteme diferite de operare, cum ar fi UNIX, Windows, MacOS etc. să se "înțeleagă" unele cu altele. În acest fel, Internetul urma să devină cu adevărat independent de platforma harware utilizată. Prima conexiune ARPANET a fost realizată în 29 octombrie 1969, ora 22:30 între University of California din Los Angeles și Institutul de Cercetare Stanford și a decurs astfel: cei de la un capat al rețelei au tastat un “L” și apoi, prin telefon, au cerut confirmarea funcționării transferului de date de la cei de la celalalt capat al conexiunii. Dialogul a fost urmatorul:

„ -Vedeți L-ul?

-Da, vedem L-ul!

Apoi au tastat un O și au întrebat din nou:

-Vedeți O-ul?

-Da, vedem O-ul, a venit raspunsul.

Apoi au tastat un G și conexiunea a picat. Totuși începuse o nouă revoluție în domeniul comunicațiilor.”

ARPANET s-a dezvoltat uluitor de repede, la el conectându-se din ce în ce mai multe calculatoare. În 1979 ARPA decide să separe rețeaua în două, una pentru lumea comercială și universitară, și una militară. Cele două rețele puteau comunica în continuare, construindu-se practic o inter-rețea (internet) denumită inițial DARPA Internet și consacrată ulterior sub denumirea Internet. Numeroși cercetători din domeniul academic și militar si-au concentrat eforturile în scopul dezvoltării unor programe de comunicare în rețea. Astfel în 1980 o serie de programe de comunicare (bazate pe protocoale binedefinite), care sunt utilizate și astăzi, erau deja finalizate. În 1983, TCP/IP devine unicul protocol oficial al Internetului, și ca urmare, tot mai multe calculatoare din întreaga lume au fost conectate la ARPANET. Creșterea numărului de calculatoare conectate la Internet a devenit exponențială, astfel încât în 1990 Internetul cuprindea 3.000 de rețele și 300.000 de calculatoare. În 1992 era deja conectat calculatorul cu numărul 1.000.000. Apoi mărimea Internetului s-a dublat cam la fiecare an.

Dezvoltarea rapidă a Internetului s-a datorat faptului că accesul la documentația protocoalelor obligatorii a fost și este liber și gratuit. În 1969 S. Crocker a inițiat o serie de „note de cercetare” denumite RFC (Request for Comments), numerotate cronologic și devenite cu timpul accesibile gratuit on-line (în Internet). Marea schimbare a început în 1989, când Tim Berners Lee de la Centrul European pentru Fizica Nucleară din Geneva (CERN) a pus bazele dezvoltării primului prototip al World Wide Web (WWW sau web).

O altă schimbare radicală s-a produs când, în 1993, National Center for Supercomputing Applications (NCSA) din SUA a pus la dispoziție browserul "Mosaic", care era bazat pe o interfață grafică (Windows). Enorma creștere a webului a început aproape dintr-o dată: în iunie 1993 erau înregistrate 130 servere web, iar în 1994 erau deja peste 11.500 de servere.

HTML, CSS, Javascript

La început limbajul HTML fost conceput pentru a facilita transmiterea de documente prin intermediul unui browser web dar după crearea limbajelor CSS și Javascript aceste documnete au început să devină mult mai complexe și în cele din urmă la paginile web complexe din ziua de azi.

Ultimele versiuni ale limbajelor HTML și CSS sunt HTML5 si CSS3, cele din urmă fiind încă în procesul de dezvoltare. Prin intermediul acestor noi versiuni putem concepe pagini foarte complexe cu un aspect incredibil. În 2013 majoritatea browserelor sunt compatibile cu noile standarde și pot reda fără proble documnetele scrise cu aceste limbaje.

HTML

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 î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 documetele 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.

HTML este de asemenea utilizat în e-mail. Majoritatea aplicațiilor de e-mail folosesc un editor HTML încorporat pentru compunerea e-mail-urilor și un motor de prezentare a e-mail-urilor de acest tip. Folosirea e-mail-urilor HTML este un subiect controversat și multe liste de mail le blochează intenționat.

Realizarea paginii web

În acest capitol voi prezenta modul în care a fost realizată pagina împreună cu programele software utilizate pentru crearea acesteia.

Proiectul este compus din mai multe pagini fiecare cu un conținut diferit , dar cu o structură asemănătoare, iar elementele HTML sunt definite prin intermediul fișierelor CSS externe și Javascript.

Pentru a facilita crearea pagini web am utilizat libraria Jquery care conține multe funcții predefinite cu ajutorul cărora se pot realiza cele mai complexe efecte imaginabile în interiorul unei pagini web. De asemenea se pot crea multe elemente cu care utilizatorul poate interacționa.

Am utilizat de asemenea framework-ul open-source creat de cei de la Twitter și anume Bootstrap. Acesta include stiluri CSS predefinite, dar care pot fi suprascrise în cazul în care vrem să schimbăm ceva la regulile predefinite și cateva funcții Javascript pentru a ajuta la implementare mai ușoară a unor anumite elemente și efecte.

Programe utilizate:

Jetbrains PHPStorm, un program creat de cei de la Jetbrains și care oferă suport pentru numeroase limbaje declarative precum Html și CSS, dar și pentru numeroase limbaje de programare cum ar fi PHP , Javascript, Coffescript, Microsoft Typescript și Google Dart, cele din urma se compilează în javascript, deoarece nu toate browserele au suport pentru ele, dar oferă beneficiile programării orientate pe obiect.

Notepad++, asemenea programului Notepad care vine preinstalat pe Microsoft Windows dar oferă mult mai multe funcții de recunoaștere și aranjare a codului.

XAMPP, o distribuție de Apache, PHP, SQL care poate fi utilizată pentru a crea un server online sau unul local așa cum este utilizat în acest proiect. Prin intermediul acestui server local avem accesul la limbajul PHP și baze de date SQL fără a fi nevoie de un server conectat la internet.

Web browserul Google Chorme care datorită uneltelor pentru dezvoltatori de care dispune este foarte util în crearea de pagini web.

Structura proiectului

Documente html: Fisiere CSS:

index.html – bootstrap.min.css

asezare.html – style.css

emil.html

galerie.html

gastronomie.html Fisiere Javascript:

hermann.html – bootstrap.mini.js

nicolaus.html – jquery-2.0.3.min.js

obiective.html – main_interface.js

personalitati.html

samuel.html

În continuare este prezentat fișierul index.html care este și pagina principală a proiectului.

După cum se poate vedea mai jos în secțiunea head a fișierului sunt incluse fișierele css externe care sunt utilizate, ultimele două dintre aceste fișiere face parte din framework-ul bootstrap creat de cei de la Twitter.

Apoi cu ajutorul elementului meta este declarată codarea textului în format UTF-8 necesar pentru ca diacriticele să fie afișate corespunzător.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="styles/style.css">

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-theme.min.css">

<meta charset="utf-8">

<title></title>

</head>

<body>

<div class="head_fixed">

<div style="background-color: cornflowerblue;" class="title"><h1>Sibiu:<br> Oras European</h1></div>

Elementul nav utilizat mai jos este folosit pentru a declara bara de meniu a pagini folosind elemente din framework-ul bootstrap, precum clasele nav-bar și button.

</div>

<nav class="navbar navbar-default navbar-inverse" style="border-radius: 0px;">

<div class="btn-group" style="margin-left: 5%;" >

<button style="border-top-right-radius: 0; border-bottom-right-radius: 0;" class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">

<a href="#">Personalitati</a><span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li class="divider"></li>

<li><a href="samuel.html">Samuel von Brukenthal</a></li>

<li><a href="emil.html">Emil Cioran</a></li>

<li><a href="hermann.html">Hermann Oberth</a></li>

<li><a href="nicolaus.html">Nicolaus Olahus</a></li>

</ul>

<button type="button" class="btn btn-default btn-lg"><a href="index.html">Despre</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="asezare.html">Asezare geografica</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="obiective.html">Obiective turistice si monumente istorice</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="gastronomie.html">Gastronomie</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="galerie.html">Galerie</a></button>

</div>

</nav>

</div>

În secțiunea de mai jos este introdus conținutul paginii folosind elementele p pentru paragrafe și elemente de tip h pentru titluri.

De asemenea se poate observa utilizarea sistemului de așezare a framework-ului bootstrap care așează conținutul pe rânduri și coloane.

<div class="sub_body_1">

<div class="row">

<div class="col-lg-7" style="padding-left: 30px;">

<h1>Introducere</h1>

<p style="font-size: 18px; color: #841a1e;">La rascruce de drumuri, in inima Romaniei, se afla orasul Sibiu…</p>

<p style="font-size: 18px; color: #841a1e;">Sibiu ( Hermannstatd) este resendita jud. Sibiu. Sibiul este un important centru cultural și economic din sudul Transilvaniei. Municipiul Sibiu a reprezentat și reprezintă unul dintre cele mai importante și înfloritoare orașe din Transilvania, fiind unul dintre principalele centre ale coloniștilor sași stabiliți în zonă. Orașul a fost capitală a Transilvaniei între anii 1692-1791 și 1849-1865. A cunoscut în ultimii ani o renaștere economică și culturală semnificativă. Sibiul este în prezent unul dintre orașele cu cel mai mare nivel de investiții străine din România. În anul 2007 a fost Capitala Culturală Europeană, împreună cu orașul Luxemburg. De asemenea orasul Sibiu gazduieste cea mai de seama rezervatie de arhitectura nationala.</p>

<p style="font-size: 18px; color: #841a1e;">Pe plan cultural deosebim o serie de evenimente în premieră în lume sau doar în România..</p>

<p style="font-size: 18px; color: #841a1e;">1292: A fost atestat primul spital de pe teritoriul actual al Romaniei;</p>

<p style="font-size: 18px; color: #841a1e;">1350: Se infiinteaza prima monetarie din Transilvania;</p>

<p style="font-size: 18px; color: #841a1e;">1494: Primul orologiu de pe teritoriul actual al Romaniei;</p>

<p style="font-size: 18px; color: #841a1e;">1551: Conraad Hass experimentează prima rachetă in trepte din lume;</p>

<p style="font-size: 18px; color: #841a1e;">1859: Podul Mincinoșilor este primul pod din fontă construit in România;</p>

<p style="font-size: 18px; color: #841a1e;">1904: Sibiul este al 2-lea oraș din Europa care introduce tramvaiul electric;</p>

<p style="font-size: 18px; color: #841a1e;">2007: Sibiul este capitala culturală;</p>

Elementul video de pe pagina Youtube este introdus folosind link-ul de embed furnizat atunci când accesam un filmuleț pe Youtube.

<object width="640" height="360"><param name="movie" value="//www.youtube.com/v/_rCw-dOFxdo?version=3&amp;hl=ro_RO"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/_rCw-dOFxdo?version=3&amp;hl=ro_RO" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed></object>

</div>

Imaginile sunt introduse cu ajutorul elementului img pentru care furnizăm sursa imagini care dorim să apară, de asemena este aplicată clasa img-thumbnail din framework-ul bootstrap care afișează o margine cu aspect plăcut în jurul imaginilor.

<div class="col-lg-5">

<img src="imagini/Sibiu.jpg" class="img-thumbnail">

<img src="imagini/sibiu2.jpg" class="img-thumbnail">

</div>

</div>

</div>

În această parte a fișierului sunt introduse fișierele javascript. Prima dată este inclusă librăria jquery care trebuie inclusă prima, deoarece restul operațiilor în cod javascript se bazează pe aceasta.

Apoi urmează fișierul javascript al framework-ului bootstrap, acest fiind important pentru multe funcții vitale ale paginii cum ar fi de exemplu galerie.

În final fișierul main_interface.js conține câteva funcții javascript necesare ca pagina să funcționeze corect.

<script src="scripts/jquery-2.0.3.min.js"></script>

<script src="dist/js/bootstrap.min.js"></script>

<script src="scripts/main_interface.js"></script>

</body>

</html>

În continuare este prezentat fișierul așeare.html al proiectului care include informații despre așezarea geografică a Sibiului , dar și o hartă interactivă bazată pe Google Maps.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="styles/style.css">

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-theme.min.css">

<meta charset="utf-8">

Următorul script este unic pentru acest fișier, deoarece încarcă Api-ul pentru hărți a celor de la Google care ne permite să declarăm mai jos harta și să îi fixăm poziția de start.

<script type="text/javascript"

src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBy0iDBxBNr0YjInX7JlxqJWIcW3sSlsq0&sensor=false">

</script>

<title></title>

</head>

<body>

<div class="head_fixed">

<div class="title"><h1>Sibiu:<br> Oras European</h1></div>

</div>

<nav class="navbar navbar-default navbar-inverse" style="border-radius: 0px;">

<div class="btn-group" style="margin-left: 5%;" >

<button style="border-top-right-radius: 0; border-bottom-right-radius: 0;" class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">

<a href="#">Personalitati</a><span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li class="divider"></li>

<li><a href="samuel.html">Samuel von Brukenthal</a></li>

<li><a href="emil.html">Emil Cioran</a></li>

<li><a href="hermann.html">Hermann Oberth</a></li>

<li><a href="nicolaus.html">Nicolaus Olahus</a></li>

</ul>

<button type="button" class="btn btn-default btn-lg"><a href="index.html">Despre</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="asezare.html">Asezare geografica</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="obiective.html">Obiective turistice si monumente istorice</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="gastronomie.html">Gastronomie</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="galerie.html">Galerie</a></button>

</div>

</nav>

</div>

<div class="sub_body_1">

<div class="row">

<div class="col-lg-7" style="padding-left: 30px;">

<h1>Localizare</h1>

<p style="font-size: 18px; color: #841a1e;">Municipiul Sibiu este unul din cele mai importante orașe din Transilvania cu un remarcabil potențial de dezvoltare economică, avantajat și de poziționarea sa pe Coridorul IV Paneuropean și beneficiind de un modern Aeroport Internațional. Localitatea se situează la 45°47' latitudine nordică și 24°05' longitudine estică. Altitudinea fața de nivelul mării variază între 415 m în Orașul de Jos și 431 m în Orașul de Sus. Orașul se află în zona temperat-continentală, cu influențe termice datorate zonei depresionare și a munților care îl înconjoară la sud și sud-vest. Media anuală a precipitațiilor este de 662 mm cu valori minime în luna februarie (26,7 mm) și maxime în iunie (113 mm). Temperatura medie anuală este de 8,9 grade Celsius. Cu cei 147,245. de locuitori permanenți (2011) și 30,000 de locuitori temporari, în special studenți, Sibiul este cel mai mare oraș din județ. Comunitatea locală este alcătuită din grupuri etnice diverse. Marea majoritate a populației este reprezentată de români (94%) care conviețuiesc cu germanii, descendenți ai coloniștilor saxoni care au emigrat în secolul al XII-lea din zona Luxemburg, Lorena, Alsacia. Lor li se alătură unguri, rromi și o foarte puțin numeroasă comunitate evreiască, cu toții contribuind prin influențe culturale specifice la viața orașului. Aceeași diversitate caracterizează și viața religioasă. Alături de ortodocși, la Sibiu își practică liber credința reformați, romano-catolici, greco-catolici și evanghelici-lutherani. Structura socială a orașului este bazată pe o experiența de viața istorică și multiculturală, diversitatea locuitorilor săi, aparținand diferitelor grupuri etnice, generații și stiluri de viață, dând orașului o aură specială.</p>

Acest script este cel care inițializează harta și face ca aceasta să fie afișată. Proprietatea center din variabila mapOptions este cea care ne permită să centrăm harta pe orașul Sibiu folosind coordonatele geografice ale orașului.

<script>

function initialize() {

var mapOptions = {

zoom: 12,

center: new google.maps.LatLng( 45.8, 24.15)

};

var map = new google.maps.Map(document.getElementById('map-canvas'),

mapOptions);

}

function loadScript() {

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +

'callback=initialize';

document.body.appendChild(script);

}

window.onload = loadScript;

</script>

<div style="padding-bottom: 50px; height: 600px; width: 100%" id="map-canvas"></div>

<div style="height: 50px; width: 100%;"></div>

</div>

<div class="col-lg-5">

<img src="imagini/Sibiu.jpg" class="img-thumbnail">

<img src="imagini/sibiu2.jpg" class="img-thumbnail">

</div>

</div>

</div>

<script src="scripts/jquery-2.0.3.min.js"></script>

<script src="dist/js/bootstrap.min.js"></script>

<script src="scripts/main_interface.js"></script>

</body>

</html>

Urmează fișierul galerie.html care conține o galerie de tip slide-show cu imagini și o descriere acolo unde este cazul.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="styles/style.css">

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-theme.min.css">

<meta charset="utf-8">

<title></title>

</head>

<body>

<div class="head_fixed">

<div class="title"><h1>Sibiu:<br> Oras European</h1></div>

</div>

<nav class="navbar navbar-default navbar-inverse" style="border-radius: 0px;">

<div class="btn-group" style="margin-left: 5%;" >

<button style="border-top-right-radius: 0; border-bottom-right-radius: 0;" class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">

<a href="#">Personalitati</a><span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li class="divider"></li>

<li><a href="samuel.html">Samuel von Brukenthal</a></li>

<li><a href="emil.html">Emil Cioran</a></li>

<li><a href="hermann.html">Hermann Oberth</a></li>

<li><a href="nicolaus.html">Nicolaus Olahus</a></li>

</ul>

<button type="button" class="btn btn-default btn-lg"><a href="index.html">Despre</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="asezare.html">Asezare geografica</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="obiective.html">Obiective turistice si monumente istorice</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="gastronomie.html">Gastronomie</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="galerie.html">Galerie</a></button>

</div>

</nav>

</div>

<div class="sub_body_1">

<div class="row">

<div class="col-lg-2">

</div>

<div class="col-lg-8">

Framework-ul bootstrap ne permite să utilizăm elementul de carousel-example generic. Folosind acest element putem crea un slideshow interactiv ale cărui elemente sunt reprezentate de clasa item după cum se poate observa mai în jos. În interiorul acestuia avem un element de imagine dar și o clasă pentru capțiune care ne permite să atașăm comentari imaginilor din slide-show.

<div id="carousel-example-generic" style="height: 550px" class="carousel slide" data-ride="carousel">

<!– Indicators –>

<!– Wrapper for slides –>

<div class="carousel-inner">

<div class="item active">

<img src="atestatpoze/315_26353_21.jpg" alt="…">

<div class="carousel-caption">

<h3>Al doilea ceas din Romania ca vechime in Turnul Sfatului

</h3>

</div>

</div>

<div class="item">

<img src="atestatpoze/5199501.jpg" alt="…">

<div class="carousel-caption">

<h3>Sibiu seara</h3>

</div>

</div>

<div class="item">

<img src="atestatpoze\_DSC5828.jpg" alt="…">

<div class="carousel-caption">

<h3 style="color: black; background-color: white;">Sibiu centru</h3>

</div>

</div>

<div class="item">

<img src="atestatpoze\mori-de-vant-Sibiu.jpg" alt="…">

<div class="carousel-caption">

<h3>Moara de vant</h3>

</div>

</div>

<div class="item">

<img src="atestatpoze\Picture 057.jpg" alt="…">

<div class="carousel-caption">

</div>

</div>

<div class="item">

<img src="atestatpoze\podul-mincinosilor-jos.jpg" alt="…">

<div class="carousel-caption">

<h3>Podul mincinosilor</h3>

</div>

</div>

<div class="item">

<img src="atestatpoze\poza-patinoarul-din-piata-mare-1229824252.jpg" alt="…">

<div class="carousel-caption">

<h3>Patinoarul din piata mare</h3>

</div>

</div>

<div class="item">

<img src="atestatpoze\sibiu-singurul-oras-romanesc-cotat-cu-trei-stele-in-ghidul-verde-michelin-97500.jpg" alt="…">

<div class="carousel-caption">

</div>

</div>

<div class="item">

<img src="atestatpoze\sibiu_35.jpg" alt="…">

<div class="carousel-caption">

</div>

</div>

<div class="item">

<img src="atestatpoze\sibiu_piata_mare_55094600.jpg" alt="…">

<div class="carousel-caption">

<h3>Piata mare</h3>

</div>

</div>

<div class="item">

<img src="atestatpoze\SibiulLargit01.jpg" alt="…">

<div class="carousel-caption">

</div>

</div>

<div class="item">

<img src="atestatpoze\subarin.jpg" alt="…">

<div class="carousel-caption">

</div>

</div>

<div class="item">

<img src="atestatpoze\Targul-de-Craciun-de-la-Sibiu-Sursa-poza-targuldecraciun.ro_.jpg" alt="…">

<div class="carousel-caption">

<h3>Targul de craciun de la Sibiu</h3>

</div>

</div>

<div class="item">

<img src="atestatpoze\tramvai-anii-10.jpg" alt="…">

<div class="carousel-caption">

</div>

</div>

</div>

<!– Controls –>

<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span>

</a>

<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

</a>

</div>

</div>

<div class="col-lg-2">

</div>

</div>

</div>

<script src="scripts/jquery-2.0.3.min.js"></script>

<script src="dist/js/bootstrap.min.js"></script>

<script src="scripts/main_interface.js"></script>

</body>

</html>

Fișierul gastronomie include informați despre tradițile culinare ale orașului, acesta are un format pe coloane creat utilizând framework-ul bootstrap.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="styles/style.css">

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-theme.min.css">

<meta charset="utf-8">

<title></title>

</head>

<body>

<div class="head_fixed">

<div class="title"><h1>Sibiu:<br> Oras European</h1></div>

</div>

<nav class="navbar navbar-default navbar-inverse" style="border-radius: 0px;">

<div class="btn-group" style="margin-left: 5%;" >

<button style="border-top-right-radius: 0; border-bottom-right-radius: 0;" class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">

<a href="#">Personalitati</a><span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li class="divider"></li>

<li><a href="samuel.html">Samuel von Brukenthal</a></li>

<li><a href="emil.html">Emil Cioran</a></li>

<li><a href="hermann.html">Hermann Oberth</a></li>

<li><a href="nicolaus.html">Nicolaus Olahus</a></li>

</ul>

<button type="button" class="btn btn-default btn-lg"><a href="index.html">Despre</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="asezare.html">Asezare geografica</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="obiective.html">Obiective turistice si monumente istorice</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="gastronomie.html">Gastronomie</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="galerie.html">Galerie</a></button>

</div>

</nav>

</div>

<div class="sub_body_1">

<div class="row">

<div class="col-lg-7" style="padding-left: 30px;">

<h1>Gastronomie</h1>

<p style="font-size: 18px; color: #841a1e;">Sibiul este cunoscut drept patria brânzeturilor și a mezelurilor. Telemeaua de Mărginime și tot felul de mezeluri presărate cu mirodenii, hencleșul săsesc sau cozonacul unguresc cu mac reflectă diversitatea culturală a zonei.

Inainte de introducerea porumbului, locuitorii din Marginime consumau in primul rand produse facute din grau, orz, ovaz si mei. Dupa secolul al XVII-lea, mamaliga a devenit alimentul lor de baza.

Pe langa mamaliga, in alimentatia lor de baza erau si cartoful si – mai rar -, painea, considerata pe atunci ca o delicatesa. Marginenii faceau ciorbe din plante culese din natura (urzici, laptuca, stevie, bureti si ciuperci).

Mai rar, cu ocazia sarbatorilor, se consuma si carne de porc, de vita, de miel sau de gaina. Legumele si fructele sa mancau mai rar, datorita configuratiei zonei caracterizate de putine livezi si gradini. Astfel, fructele erau pastrate mai ales pentru umplutura placintelor si erau conservate sub forma de dulceturi si gemuri.

</p>

<div class="row">

<div class="col-lg-5">

<img src="imagini/11.jpg" class="img-thumbnail">

</div>

<div class="col-lg-7">

<img src="imagini/9.jpg" class="img-thumbnail">

</div>

</div>

</div>

<div class="col-lg-4">

<img src="imagini/download.jpg" class="img-thumbnail">

<img src="imagini/cozonac-unguresc-cu-mac.jpg" class="img-thumbnail">

</div>

</div>

</div>

<script src="scripts/jquery-2.0.3.min.js"></script>

<script src="dist/js/bootstrap.min.js"></script>

<script src="scripts/main_interface.js"></script>

</body>

</html>

Fișierul obiective.html redă informații despre obiectivele turistice din orașul sibiu precum și o scurtă prezentare a acestora, dar și imagini cu acestea.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="styles/style.css">

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-theme.min.css">

<meta charset="utf-8">

<title></title>

</head>

<body>

<div class="head_fixed">

<div class="title"><h1>Sibiu:<br> Oras European</h1></div>

</div>

<nav class="navbar navbar-default navbar-inverse" style="border-radius: 0px;">

<div class="btn-group" style="margin-left: 5%;" >

<button style="border-top-right-radius: 0; border-bottom-right-radius: 0;" class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">

<a href="#">Personalitati</a><span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li class="divider"></li>

<li><a href="samuel.html">Samuel von Brukenthal</a></li>

<li><a href="emil.html">Emil Cioran</a></li>

<li><a href="hermann.html">Hermann Oberth</a></li>

<li><a href="nicolaus.html">Nicolaus Olahus</a></li>

</ul>

<button type="button" class="btn btn-default btn-lg"><a href="index.html">Despre</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="asezare.html">Asezare geografica</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="obiective.html">Obiective turistice si monumente istorice</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="gastronomie.html">Gastronomie</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="galerie.html">Galerie</a></button>

</div>

</nav>

</div>

<div class="sub_body_1">

<div class="row">

<div class="col-lg-3">

<img src="imagini\obj\Brukenthalpalais_Hermannstadt.jpg" class="img-thumbnail">

<img src="imagini/obj/ceas.jpg" class="img-thumbnail">

<img src="imagini/obj/arini.jpg" class="img-thumbnail">

</div>

<div class="col-lg-6" style="padding-left: 30px;">

<h1>Monumente istorice</h1>

<p style="font-size: 18px; color: #841a1e;">Muzeul Brukenthal a fost înființat de către Samuel von Brukenthal în anul 1817.Cuprinde colecția de pictură europeană,galeria de artă românească și artă decorativă,cabinetul de stampe si biblioteca Brukenthal.</p>

<p style="font-size: 18px; color: #841a1e;">Turnul cu ceas este unul dintre cele mai cunoscute monumente ale Sibiului. Accesul în interior este posibil printr-o ușă de mici dimensiuni, de unde, prin intermediul unei scări spiralate, se ajunge la etajele superioare. La penultimul etaj se poate observa mecanismul ceasului, iar ultimul etaj prezintă un punct de observație peste întregul oraș.</p>

<p style="font-size: 18px; color: #841a1e;">Turnul gros este o construcție masivă de plan semicircular,în formă de U, cu ziduri de cărămida și o platformă pe care erau amplasate tunurile.Primul teatru din Sibiu a funcționat în acest turn în anul 1778.</p>

<p style="font-size: 18px; color: #841a1e;">Parcul sub arini este unul dintre cele mai vechi parcuri din România fiind înființat în 1856. În prezent parcul are 22 de hectare pe care cresc peste 68 specii lemnoase, dintre care 30 exotice .

Unele sunt originale din Japonia, China,America de nord,America centrala,zona Alpilor. În acest decor își găsesc adăpostul aproximativ 95 specii de păsări.</p>

<p style="font-size: 18px; color: #841a1e;">Gradina zoologica si parcul Dumbrava. În cadrul parcului Dumbrava s-a deschis prima gradină zoologică din România în 1928, care găzduieste in prezent 187 de animale si pasari .Acolo se intâlneste cel mai lung crocodil din Romania de 2 m lungime ,iar la intrarea in grădina zoologică se află un stejar vechi de peste 600 de ani.</p>

</div>

<div class="col-lg-3">

<img src="imagini/obj/turnul-gros.jpg" class="img-thumbnail">

<img src="imagini/obj/download.jpg" class="img-thumbnail">

<img src="imagini/obj/ceas.jpg" class="img-thumbnail">

</div>

</div>

</div>

<script src="scripts/jquery-2.0.3.min.js"></script>

<script src="dist/js/bootstrap.min.js"></script>

<script src="scripts/main_interface.js"></script>

</body>

</html>

În continuare este prezentat fișierul samuel.html, care include informații despre Samuel von Brukenthal. Celelalte pagini despre personalități nu vor fi prezentate deoarece au aceași structură și doar conținutul este diferit.

Pagina folosește o așezare pe coloane, într-una din coloane fiind introdus textul, iar în cealaltă o imagine a personajului prezentat care este afișată doar la apăsarea unui buton, acest efect este implemetat folosind librăria javascript jquery.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-theme.min.css">

<link rel="stylesheet" type="text/css" href="styles/style.css">

<meta charset="utf-8">

<title></title>

</head>

<body>

<div class="head_fixed">

<div class="title"><h1>Sibiu:<br> Oras European</h1></div>

</div>

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-theme.min.css">

<link rel="stylesheet" type="text/css" href="styles/style.css">

<meta charset="utf-8">

<title></title>

</head>

<body>

<div class="head_fixed">

<div class="title"><h1>Sibiu:<br> Oras European</h1></div>

</div>

<nav class="navbar navbar-default navbar-inverse" style="border-radius: 0px;">

<div class="btn-group" style="margin-left: 5%;" >

<button style="border-top-right-radius: 0; border-bottom-right-radius: 0;" class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">

<a href="#">Personalitati</a><span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li class="divider"></li>

<li><a href="samuel.html">Samuel von Brukenthal</a></li>

<li><a href="emil.html">Emil Cioran</a></li>

<li><a href="hermann.html">Hermann Oberth</a></li>

<li><a href="nicolaus.html">Nicolaus Olahus</a></li>

</ul>

<button type="button" class="btn btn-default btn-lg"><a href="index.html">Despre</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="asezare.html">Asezare geografica</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="obiective.html">Obiective turistice si monumente istorice</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="gastronomie.html">Gastronomie</a></button>

<button type="button" class="btn btn-default btn-lg"><a href="galerie.html">Galerie</a></button>

</div>

</nav>

</div>

<div class="sub_body_1">

<div class="row">

<div class="col-lg-7" style="padding-left: 30px;">

<h1>Personalitati</h1>

<h2>Samuel von Brukenthal (1721-1803), guvernator al Transilvaniei</h2>

<p style="font-size: 18px; color: #841a1e;">S-a născut la Nocrich, lângă Sibiu într-o familie patriciană din scaunul Nocrichului. După studii devine cancelar provincial la Viena. Revenit la Sibiu, în 1745, acesta a intrat în Cancelaria Administrației locale, cea mai înaltă funcție ocupată fiind cea de vicenotar al Sibiului. Câțiva ani mai târziu ajunge consilier personal al Împărătesei Maria Tereza și șeful Cancelariei Curții Imperiale (1765).

Începând cu anul 1777 a fost numit în funcția de guvernator al Transilvaniei. În această perioadă a devenit cunoscut în Imperiul Habsburgic pentru colecțiile sale de artă și palatul construit în Piața Mare din Sibiu.

</div>

<div class="col-lg-4" class="img-pers">

<button type="button" class="btn btn-default btn-lg show-image">Arata imagine</button>

<img style="height: 350px; display: none;" src="imagini/pers/Samuel_von_Brukenthal.jpg" class="img-thumbnail">

</div>

<div class="col-lg-1"></div>

</div>

</div>

<script src="scripts/jquery-2.0.3.min.js"></script>

<script src="dist/js/bootstrap.min.js"></script>

<script src="scripts/main_interface.js"></script>

</body>

</html>

Concluzii

Am vizitat de nenumarăte ori acest oras și de fiecare dată îmi transmite o stare de bine, determinându-mă să revin cu aceeasi plăcere. Parcul sub arini, dumbrava Sibiului, turnul cu ceas, dar mai ales străzile pavate si stilul arhitectural deosebit, toate acestea m-au convins să aleg această temă: Sibiu- oraș eropean. Este o localitate care îmbină tradiționalul cu modernul, mediul pitoresc si cel urban, împreună creează o ambianța placută, unică si memorabilă.

Situat în inima României, la răscruce de drumuri, orașul Sibiu este, de departe, unul dintre cele mai bogate orașe din țară, bogat atât din punct de vedere economic, cât și cultural. Pe lângă orașul vechi, încărcat de istorie și artă, în Sibiu vom întâlni mereu localnici amabili, calmi, mereu cu zâmbetul întipărit pe buze.

Orașul european Sibiu, un oraș civilizat, este destinația preferată a multor români, chiar și a străinilor, dornici sa viziteze, sa se cultive spiritual si sa admire frumusețile naturii. Sibiul este locul unde nimeni nu se plictisește, mereu va mai fi ceva nou de vizitat, de descoperit; există activități pentru toate categoriile de vizitatori: tineri dornici de adrenalină, dar si oameni care vor doar sa se relaxeze, toți se pot bucura de timpul petrecut în Sibiu.

Sibiul a fost, este și va fi mereu orașul meu de suflet din Transilvania. Îl recomand cu încredere tuturor, Sibiu e oraș european în adevăratul sens al cuvântului.

Bibliografie

Pluralsight http://www.pluralsight.com/training

Mozilla Developer Network https://developer.mozilla.org/ro/

Bootstrap http://twitter.github.io/bootstrap/

Jquery http://jquery.com/

Designmodo http://designmodo.com/

Subtle patterns http://subtlepatterns.com/

Stack overflow http://stackoverflow.com/

Wikipedia http://ro.wikipedia.org/wiki/Pagina_principal%C4%83

Web Platform http://www.webplatform.org/

Web.appstorm http://web.appstorm.net/

Appcelerator http://www.appcelerator.com/

Notepad++ http://notepad-plus-plus.org/

XAMPP http://www.apachefriends.org/en/xampp.html

Distrowatch http://distrowatch.com/

Similar Posts