Atestat Informatica

Elev : Radu Razvan
Clasa: A-XII-a E
Profesor coordonator: Papacica Ionela
Introducere
Motivul alegerii temei :
Tema a fost aleas datorit pasiunii pentru automobile i un interes
puternic n brand-ul Porsche care m-a fcut s m gndesc la acest
proiect.
Ideea a fost de a creea o experien unic si de a ngloda utilizatorii n
timp ce particip la o cltorie prin istoria Porsche. ntreaga experient
este construit pe ritmurile muzicii deceniului respectiv i a
fotografiilor ce evidentiaz evolutia Porsche.
1.Structura aplicatiei:
Programul contine o forma principala alcatuita din trei butoane
precum :
-Categoria Acasa : contine mici detalii despre fiecare model de masina
din deceniul respectiv.
-Categoria Mai mult : contine informatii detaliate despre brand-ul
Porsche si mai multe poze.
-Categoria Contact : contine un formular de contact si localizarea
liceului pe Google Maps .
2.Mod de utilizare:
Utilizarea este foarte simpla . Printr-o simpla apasare al mouse-lui pe
textul 'START YOUR JOURNEY' prezentarea de pe pagina principala
porneste automat.
Butoanele din parte de sus a paginii va conduce catre pagina de
contact / pagina cu mai multe informatii.
Lansarea se realizeaza accesand fisierul index.html .
3.Programe folosite:
Site-ul a fost realizat cu ajutorul programului HTML, Adobe
Dreamweaver si Adobe Photoshop.
Despre HTML :
HyperText Markup Language (HTML) este un limbaj de marcare
utilizat pentru crearea paginilor web ce pot fi afiate ntr-un browser
(sau navigator). Scopul HTML este mai degrab prezentarea

informaiilor paragrafe, fonturi, tabele .a.m.d. dect descrierea
semanticii documentului.
Specificaiile HTML sunt dictate de World Wide Web Consortium
(W3C).
Introducere
HTML este o form de marcare orientat ctre prezentarea
documentelor text pe o singura pagin, utiliznd 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
coninutul unui document poate fi adnotat cu diverse tipuri de
metadate i indicaii de redare. Indicaiile de redare pot varia de la
decoraiuni minore ale textului, cum ar fi specificarea faptului c un
anumit cuvnt trebuie subliniat sau c o imagine trebuie introdus,
pn la scripturi sofisticate, hri de imagini i formulare.
Metadatele pot include informaii despre titlul i autorul
documentului, informaii structurale despre cum este mprit
documentul n diferite segmente, paragrafe, liste, titluri etc. i
informaii 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 utiliznd un editor de text simplu. Totui scrierea i modificarea
paginilor n acest fel solicit cunotine 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 asemntor cu documetele Word,
dar cu observaia c aceste programe genereaz un cod HTML care
este de multe ori de proast calitate.
HTML se poate genera direct utiliznd tehnologii de codare din partea
serverului cum ar fi PHP, JSP sau ASP. Multe aplicaii ca sistemele de
gestionare a coninutului, wiki-uri i forumuri web genereaz pagini
HTML.
HTML este de asemenea utilizat n email. Majoritatea aplicaiilor de
email folosesc un editor HTML ncorporat pentru compunerea emailurilor i un motor de prezentare a email-urilor de acest tip. Folosirea
email-urilor HTML este un subiect controversat i multe liste de mail le
blocheaz intenionat.
Elementele de marcare
Mai jos sunt tipurile de elemente de marcare n HTML:
Marcare structural. Descrie scopul unui text. De exemplu:

<h1>Fotbal</h1>
Direcioneaza browserul pentru a reda "Fotbal" ca pe cel mai
important titlu. Marcarea structural nu are un anumit stil
predefinit, dar cele mai multe browsere web au standardizat
modul n care acestea sunt afiate.
De exemplu, titlurile importante (h1, h2, etc.) sunt aldine i mai

mari dect restul textului.De notat c "h1" este folosit doar o
singur dat per pagin deoarece cu el este marcat titlul ei.
Marcare pentru prezentare. Descrie cum apare un text, indiferent
de funciile sale. De exemplu:
<b>ngroat</b>
Va afia textul "ngroat" cu litere groase, aldine.Not: Html a
inceput n ultimii ani s nceap s nu mai foloseasc acest gen
de tag-uri pentru c "b" nu d sens paginii, pe cnd tag-ul
"strong" (adic strong emphasis) d un neles paginii, i mai
important, asemenea tag-uri pentru prezentare doar ncarc o
pagin cu informaii i o fac astfel mai greu de ncrcat, iar apoi
dac ataezi un document CSS la pagin, o singur modificare la
CSS (de ex: de la "font-weight:italic" la "font-weight:bold" va
schimba tot textul selectat, i de exemplu, link-urile vor trece de
la text nclinat la text ngroat, plus c n CSS avem avantajul de
a putea preciza ct de mari sau mici s fie literele n pixeli px,
n puncte pt, etc.)avem acelai efect ca i cnd am avea de
schimbat toate tag-urile de "i" de pe pagin n tag-uri de "b",
munc care chiar i la un website mic este enorm, ce s mai
vorbim de unul de genul wikipedia. Aa c dac vrei s ncepei
o carier n html sau un hobby (i s avei succes) nu folosii
aceste taguri, nu degeaba s-a inventat CSS-ul.
Se vor prezenta si alti marcatori ; mai multe detalii
Marcare pentru hiperlink. Leag pri ale unui document cu alte
documente. De exemplu:
<a href="http://ro.wikipedia.org/">Wikipedia Romneasc</a>
Va reda Wikipedia romneasc ca hiperlink ctre un URL
specificat.
Elemente speciale (widget). Creeaz obiecte, cum ar fi butoanele
i listele.
Despre Adobe Dreamweaver:

Adobe Dreamweaver (cunoscut anterior ca Macromedia
Dreamweaver) este o aplicaie de dezvoltare web a companiei
americane Adobe Systems, disponibil att pentru MS Windows,
ct i pentru Apple Mac OS. Versiunile recente includ suport
pentru tehnologii web cum ar fi CSS, JavaScript, PHP, Cold Fusion,
ct i cadre ASP.
Dreamweaver s-a bucurat de un larg succes nc de la sfritul

anilor 1990 i momentan deine aproximativ 80 % din piaa
editoarelor HTML. Produsul poate fi rulat pe variate platforme
software: Mac OS, Windows, dar suport n acelai timp i
platforme UNIX cu ajutorul unor emulatoare software cum ar fi
Wine.
Ca orice alt editor WYSIWYG, Dreamweaver poate ascunde

detaliile de implementare a paginilor HTML, fcnd astfel posibil
crearea cu uurin a acestora i de ctre utilizatorii
neexperimentai.
Unii creatori de pagini web critic aceste tipuri de editoare

deoarece produc pagini de dimensiuni mult mai mari dect ar fi
necesar, ceea ce conduce la o funcionare neperformant a
browserelor web. Aceast afirmaie este n mare parte adevarat
deoarece paginile web produse folosesc designul pe baz de
tabel. n plus, produsul a mai fost criticat n trecut i pentru
producerea de coduri care adesea nu erau conform standardelor
W3C, dar acest aspect a fost mult mbuntit n versiunile
recente. Cu toate acestea, compania Macromedia a mbuntit
suportul pentru tehnologia CSS precum i alte modaliti de
design, fr a fi necesar folosirea designului pe baz de tabel.
Dreamweaver permite folosirea majoritii browserelor instalate

pe calculatorul utilizatorului, pentru a previzualiza situl web
creat. De asemenea conine i cteva utilitare pentru
administrarea siturilor, cum ar fi cele pentru a gsi i modifica un
paragraf sau o linie de cod, n ntregul sit, pe baza oricror

parametri specificai de ctre utilizator. Cu ajutorul panourilor de
stare se poate crea cod JavaScript fr a avea cunotine de
programare.
Odat cu apariia versiunii MX, Macromedia a ncorporat utilitare

de generare dinamic a coninutului. De asemenea este oferit
suport pentru conectarea la baze de date (cum ar fi cele de tip
MySQL i Microsoft Access) pentru a filtra i afia coninutul
folosind scripturi de genul PHP, ColdFusion, Active Server Pages
(ASP) i ASP.NET, fr a avea nevoie de o prealabil experien n
programare.
Un aspect foarte ludat al Dreamweaver-ului l reprezint

arhitectura sa extensibil. Extensiile sunt mici programe pe care
orice dezvoltator le poate scrie (de obicei n HTML i JavaScript)
i pe care oricine le poate descrca i instala, acestea aducnd
un spor de performan i funcionalitate mbuntit
programului. Exist o comunitate de dezvoltatori care produc
aceste extensii i le public (att comercial ct i gratuit) pentru
probleme de dezvoltare web, de la simple efecte rollover pn la
soluii complete de vnzare online, n Internet.
Adobe Photoshop :
Adobe Photoshop este un software folosit pentru editarea imaginilor
digitale pe calculator, program produs i distribuit de compania
american Adobe Systems i care se se adreseaz n special
profesionitilor domeniului.
Adobe Photoshop, aa cum este cunoscut astzi, este vrful de lance al
gamei de produse software pentru editare de imagini digitale,
fotografii, grafic pentru tipar, video i Web de pe pia. Photoshop
este un program cu o interfa intuitiv i care permite o multitudine
extraordinar de modificri necesare n mod curent profesionitilor i
nu numai: editri de luminozitate i contrast, culoare, focalizare,
aplicare de efecte pe imagine sau pe zone (selecii), retuare de
imagini degradate, numr arbitrar de canale de culoare, suport de
canale de culoare pe 8, 16 sau 32 bii, efecte third-party etc. Exist
situaii specifice pentru un profesionist n domeniu cnd alte pachete
duc la rezultate mai rapide, ns pentru prelucrri generale de imagine,
ntruct furnizeaz instrumente solide, la standard industrial,
Photoshop este efectiv indispensabil.
Alturi de aplicaia Photoshop (ajuns la versiunea CC, succesorul

versiunii CS6[1]), este inclus i aplicaia ImageReady, cu un
impresionant set de instrumente Web pentru optimizarea i
previzualizarea imaginilor (dinamice sau statice), prelucrarea
pachetelor de imagini cu ajutorul sistemului droplets-uri (miniprograme de tip drag and drop) i realizarea imaginilor rollover
(imagini ce i schimb aspectul la trecerea cu mouse-ul peste),
precum i pentru realizarea de GIF-uri animate.
4.Resurse de hard necesare

Resurse minime :
1) Hardware :
2)
Procesor (CPU) : 500 MHz +

Memorie (RAM): 64 MB
Spaiu liber pe hard-disk : 100 MB
Monitor :1280*720
Un browser oarecare: Google Chrome
Software :
- Sistem de operare : Windows Vista / XP

Resurse recomandate:
1) Hardware :
Procesor (CPU) : 1000 MHz +
Memorie (RAM): 128 MB
Spaiu liber pe hard-disk : 150 MB
Monitor : VGA 32-bit color (1280x720)
- Un browser oarecare: Google Chrome
2) Software :
- Sistem de operare : Windows 7
5.Codul sursa:
Codul sursa al primei pagini , index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Masini de epoca - PORSCHEvolution</title>
<meta content="width=device-width, initial-scale=1.0, maximumscale=1.0, user-scalable=no" name="viewport">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="Atestat Informatica Radu Razvan
Marian. Team : Masini de epoca - PORSCHEvolution" />
<meta name="author" content="Radu Razvan Marian">
<link href="images/favicon.ico" rel="shortcut icon" />
<link rel="stylesheet" type="text/css" href="css/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="css/font/Eurosti.css" rel="stylesheet" media="screen">
<link href='http://fonts.googleapis.com/css?
family=Gentium+Book+Basic:400,400italic,700' rel='stylesheet'
type='text/css'>
<link href='http://fonts.googleapis.com/css?
family=Lobster+Two:400,400italic,700' rel='stylesheet' type='text/css'>
</head>
<body class="noscroll">
<div id="topbar">
<a href="galerie.html" title="Galerie">
<div id="logo-left"><img id="topbar-logo" src="images/galerie.png"
alt="Galerie"></div>
</a>
<a href="#" title="PORSCHE"">
<div id="logo"><img id="topbar-logo" src="images/logo.png"
alt="PORSCHE"></div>
</a>
<a href="contact.html" title="Contact">
<div id="logo-right"><img id="topbar-logo"
src="images/contact.png" alt="Contact"></div>
</a>
</div>
<ul class="navigation">
<li data-slide="0" class="noborder"><img src="images/porsche.png"
width="45" class="menulogo" alt="Porsche"></li>
<li data-slide="1">Intro</li>
<li data-slide="2">1930<span>s</span></li>
<li data-slide="11" class="nb">2020<span>s</span></li>
<li data-slide="12" class="noborder"></li>
</ul>
<div id="mute"><div></div></div>
<div class="slide" id="slide0" data-slide="0" >

<div class="wrapper">
<div class="landingpage">
<img src="images/home.png" class="launchscreen" alt="Masini de

epoca - PORSCHEvolution">
<div class="landingpage-interaction">
<a class="button0" data-slide="1" title="Start">
<span class="clickon"><span class="arrow
left">⤵</span> Click below or Press SPACE <span
class="arrow">⤵</span></span><br>
<input id="round" class="blink" type="submit" value="START
YOUR JOURNEY" />
</a>
</div>
<span class="volume">Asigura-te ca ai volumul pornit.</span>
</div>
<audio id="start" class="active">
<source src="sounds/start.ogg" type="audio/ogg">
<source src="sounds/start.mp3" type="audio/mpeg">
</audio>
</div>
</div>
<section class="slide" id="slide1" data-slide="1">
<div class="wrapper">
<div class="intro">
<div class="name">Ferdinand Porsche</div>
<div class="intro-desc">
<p>Istoria Porsche ncepe din 1875 - anul naterii lui Ferdinand
Porsche.</p><p> El este cel care a pus bazele pentru o companie unic, cu
idealuri puternice.</p>
</div>
</div>
</div>
<audio id="1920s" >
<source src="sounds/1920.ogg" type="audio/ogg">
<source src="sounds/1920.mp3" type="audio/mpeg">
</audio>
<a class="button" data-slide="2" title=""></a>
</section>
<section class="slide" id="slide2" data-slide="2" >
<div class="year">
<div class="year-inner">1930<span>s</span></div>
<div class="year-desc">
<span>64 Racing Coup</span> <br>
Construit pentru concursurile de distane lungi "Berlin-Rom-Wagen".
Considerat strmoul tuturor mainilor Porsche sport ulterioare.
</div>
</div>
<audio id="1930s" >
</audio>
</section>
<div class="year">
<span>356 Speedster</span> <br>
Producia primului automobil Porsche a nceput n Gmnd, n
Austria, n cazul n care s-au construit doar 49 modele Porsche din aluminiu.
</div>
</div>
<audio id="1940s" >
</audio>
</section>
<div class="year">
<div class="year-inner dark">1950<span>s</span></div>
<div class="year-desc dark">
<span>356 Carrera Cabriolet</span> <br>
Cu puin nainte de a srbtori a 10-a aniversare a modelului 356
Carrera Cabriolet, 356 s-a dezvoltat ntr-una dintre cele mai respectate maini
sport din lume.
</div>
</div>
<audio id="1950s" >
</audio>
</section>
<div class="year year-shadow">
<span>901</span> <br>
Succesor al Porsche 356. ntre 14 septembrie i 16 noiembrie 1964,
s-au construit 82 de maini. Datorit Peugeot a fost redenumit 911.
</div>
</div>
<audio id="1960s" >
</audio>
</section>
<div class="year">
<span>911 Turbo</span> <br>
La Paris Auto Show Porsche prezint 911 Turbo - prima main sport
de producie din lume, cu turbocompresor de eapament i regulator de
presiune.
</div>
</div>
<audio id="1970s" >
</audio>
</section>

<div class="year dark">
<span>911 Carrera Speedster</span> <br>
n 1984, 911 a srbtorit a 20-a aniversare. Avea un parbriz mai mic
i plat i un acoperi manual simplu, care se retrgea sub un capac din fibr
de sticl.
</div>
</div>
<audio id="1980s" >
</audio>
</section>
<div class="year">
Are trsturi clasice, dei este actualizat cu bare de protecie din
plastic, cu tehnologie modern, cum ar fi 4x4 ABS i nclzire electronic.
</div>
</div>
<audio id="1990s" >
</audio>
</section>
<div class="year">
A asea generaie a seriei 911, noul 911 Turbo cu 353 kW (480 PS),
transmisie manual cu ase trepte necesit 3.9 secunde s ating viteza de
100 km / h.
</div>
</div>
<audio id="2000s" >
</audio>
</section>
<div class="year">
<span>911 Carrera 4S Coupe</span> <br>
Masina Porsche 911 sport srbtorete a 50-a aniversare n 2013. n
ziua de azi 911 nc are multe povesti de spus. Victorii eroice, design iconic,
visele din copilrie. i o idee de atemporal.
</div>
</div>
<audio id="2010s" >

</audio>
</section>
<div class="year">
<span>The 911.</span> <br>
Tradiia viitorului.<br> Din 1963.<br> <br>
</div>
</div>
<audio id="2020s" >
</audio>
</section>
<script type="text/javascript" src="js/jquery.min.js"></script>

<script src="js/jpreloader.min.js"></script>
<script type="text/javascript" src="js/mobile.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/evolution.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').jpreLoader();
});
</script>
</body>
</html>
6.Bibliografie
http://ro.wikipedia.org/wiki/Adobe_Dreamweaver
http://en.wikipedia.org/wiki/Adobe_Photoshop
Cuprins:
Introducere pag. 1
Structura aplicatiei pag. 2
Mod de utilizare pag. 2
Programe folosite pag. 2-7
Resurse hardware necesare pag. 7
Codul sursa pag. 7-17

Bibliografie pag. 17

Atestat Informatica

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Atestat Informatica

Transféré par

Droits d'auteur :

Formats disponibles

Elev : Radu Razvan

fotografiilor ce evidentiaz evolutia Porsche.

(sau navigator). Scopul HTML este mai degrab prezentarea

Marcare structural. Descrie scopul unui text. De exemplu:

De exemplu, titlurile importante (h1, h2, etc.) sunt aldine i mai

Despre Adobe Dreamweaver:

Dreamweaver s-a bucurat de un larg succes nc de la sfritul

Ca orice alt editor WYSIWYG, Dreamweaver poate ascunde

Unii creatori de pagini web critic aceste tipuri de editoare

Dreamweaver permite folosirea majoritii browserelor instalate

paragraf sau o linie de cod, n ntregul sit, pe baza oricror

Odat cu apariia versiunii MX, Macromedia a ncorporat utilitare

Un aspect foarte ludat al Dreamweaver-ului l reprezint

Alturi de aplicaia Photoshop (ajuns la versiunea CC, succesorul

4.Resurse de hard necesare

Procesor (CPU) : 500 MHz +

- Sistem de operare : Windows Vista / XP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<div class="slide" id="slide0" data-slide="0" >

<img src="images/home.png" class="launchscreen" alt="Masini de

<section class="slide" id="slide7" data-slide="7" >

<audio id="2010s" >

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

Codul sursa pag. 7-17

Vous aimerez peut-être aussi