1

PROIECT PENTRU OBINEREA ATESTRII

COMPETENELOR PROFESI ONALE LA
INFORMATIC
TITLUL LUCRRII:











Profesor ndrumtor: Candidat:
OLTEAN TEFAN IFTIME ANCA-DUMITRIA
Clasa: a XII a C


Mai 2014, Botoani
2

Cuprins

1. Motivaia i Utilitatea
- Motivaia alegerii temei
- Utilitatea aplicaiei
2. Introducerea n internet, HTML i CSS
- Introducerea n internet
- Introducerea n HTML
- Introducerea n CSS
3. Structura aplicaiei
4. Detalii tehnice privind codul surs
5. Prezentarea vizual
6. Resurse hardware i software necesare
- Resurse hardware
- Resurse software
7. Bibliografie

3

1. Motivaia i utilitatea


Motivaia alegerii temei
Am ales aceast tem pentru a prezenta anime-ul meu favorit (i unul
dintre cele mai de succes din lume) prin intermediul paginii web. Anime
reprezint orice film de animaie produs n Japonia sau originar din aceasta. La
originea acestui gen stau benzile desenate japoneze numite manga. n realitate
este o form de art care include toate genurile (comedie, dram, ficiune etc.)
ntlnite n literatur i cinema. Seria este centrat pe aventurile lui Naruto
Uzumaki, adolescent imprevizibil i hiperactiv, care este ntr-o constant cutare
de cunoatere, visnd s devin Hokage, un ninja recunoscut ca cel mai puternic
dintre toi i liderul satului su, Konoha.


Utilitatea aplicaiei
Naruto a devenit foarte cunoscut att n Japonia i America ct i n restul
lumii, avnd priz la toate categoriile de vrst datorit tratrii unor teme foarte
variate, de la ambiie, justiie absolut, la moarte, iubire, familie, fraternitate,
prietenie, pace, ur, singurtate, dar i personajelor destul de imprevizibile (n
general nu i dai seama de la nceput dac un personaj este bun sau ru - cazul
lui Kabuto, Itachi etc.). Site-ul ofer informaii utile pentru cunosctorii anime-
ului, dar i pentru cei care vor s se aventureze n universul acestuia.


4

2. Introducere n internet, HTML i CSS

Introducerea n internet
Internet poate fi definit ca o imens reea de calculatoare, deoarece este o
colecie global de reele de mrimi diferite. Interesant este faptul c aceast
reea nu este n proprietatea nimnui. De asemenea nu a rezultat datorit
efortului susinut al unui grup de cercetare, ci a mai multor persoane care au
lucrat independent.
Aceast reea ofer o capabilitate de comunicare global, un mecanism
pentru rspndire, partajarea informaiei precum i un mediu de colaborare i
comunicare ntre persoane i calculatoarele lor indiferent de locaia lor
geografic.
Trebuie s reinei c atunci cnd cuvntul Internet este scris folosind
majuscula la prima litera, nseamn c se face referire la aceast reea global,
iar cnd este scris internet (fr majuscula) atunci este vorba de orice reea de
calculatoare n cadrul unei companii, universiti, adic o reea ce
interconecteaz mai multe reele mici i care aparin unei organizaii sau unui
grup de indivizi.


Introducerea n HTML
HTML (HyperText Markup Language) este un limbaj utilizat pentru
crearea paginilor web ce pot fi afiate ntr-un browser (sau navigator).
HTML este folosit pentru prezentarea unui coninut (text, imagine) ntr-o
pagin web, furnizeaz mijloacele prin care coninutul unui document poate fi
structurat i adnotat cu diverse tipuri de metadate si indicaii de redare i afiare.
Aceste indicaii pot varia de la decoraiuni minore ale textului, cum ar fi
culoarea sau sublinierea unui cuvnt ori introducerea unei imagini, pn la
adugarea de elemente sofisticate, tabele, hri de imagini, formulare i cod CSS
sau scripturi JavaScript.
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 eseniale care permit ca documentul s
poat fi legat de alte documente pentru a forma astfel hiperlink-uri.
HTML este un format text proiectat pentru a putea fi citit i editat utiliznd un
editor de text simplu, editarea i nelegerea paginilor n acest fel necesit
cunotine de HTML, pe care le putei obine studiind leciile din acest curs.
Exist i editoare grafice, de tip WYSIWYG (What You See Is What You
Get - "ceea ce vezi este ceea ce obii"), cum ar fi Macromedia Dreamweaver,
Adobe GoLive sau Microsoft FrontPage, care permit ca paginile web s fie
5

tratate asemntor cu documentele Word i genereaz ele cod HTML pentru
coninutul paginii, dar aceste programe genereaz un cod HTML care este de
multe ori prea ncrcat i de proast calitate.
HTML este de asemenea utilizat n e-mail. Majoritatea aplicaiilor de e-
mail folosesc un editor HTML incorporat pentru compunerea e-mail-urilor i un
motor de prezentare a e-mail-urilor de acest tip.


Introducerea n CSS
Crearea paginilor HTML este un lucru relativ simplu, nvarea etichetelor
HTML i crearea unor imagini ducnd la realizarea de pagini web de o
complexitate medie. Odat cu dezvoltarea internetului, site-urile au devenit din
ce n ce mai complexe, cu un numr mai mare de pagini, cerinele privind
grafica i elementele din pagin au devenit mai pretenioase i astfel proiectarea
paginilor web a devenit o sarcin ceva mai dificil.
O problem important cnd avem un site cu multe pagini este atunci
cnd dorim s facem anumite schimbri n elementele paginii: fondul, grafica
sau fontul textelor din pagini.
Prin utilizarea CSS (Cascading Style Sheets), n traducere "foi de stil n
cascad", acest lucru nu mai este o problem, realizndu-se relativ uor, prin
schimbarea sau adugarea unor elemente n codul CSS, nefiind nevoie s lucrm
la fiecare pagin sau la fiecare element din pagin.
CSS se ocup n general cu aspectul i controlul grafic al elementelor din
pagin, cum ar fi: textul, imaginile, fondul, culorile i aezarea acestora n cadrul
ferestrei paginii.
CSS folosete stiluri, acestea nglobeaz, sub un anumit nume, atribute de
formatare care se aplic asupra unui element individual din pagin, asupra unui
grup de elemente sau la nivelul ntregului document.
CSS funcioneaz cu HTML, ns nu este HTML. El extinde
funcionalitile HTML, permind redefinirea etichetelor HTML existente.
Prin utilizarea CSS aspectul documentului pe ansamblu, sau a unui
element individual din interiorul su, poate fi controlat mult mai uor. Stilurile
pot fi aplicate asupra unui element, a unui document sau chiar asupra unui ntreg
site web.
Un dezavantaj ar fi c unele navigatoare nu sunt compatibile CSS, astfel
c documentele HTML sunt afiate ca i cum CSS n-ar exista, dar cele mai
cunoscute i utilizate browsere, cum ar fi: Mozilla Firefox, Internet Explorer,
Opera, i altele, sunt compatibile CSS.




6



3. Structura aplicaiei

Atestatul conine urmtoarele pagini n care se regsesc detalii despre
serialul anime japonez ,Naruto :


Home
Naruto
Naruto Shippden
Personaje
Lumea din Naruto - termeni
Galerie
Video
Contact









7




4. Detalii tehnice privind codul surs
Codul surs a fost prelucrat folosind Notepad++ i Adobe Dreamweaver
CS5.5.
Notepad++ este un program gratuit, editor de cod surs i nlocuirea Notepad
care accept mai multe limbi. Rularea n mediul MS Windows, utilizarea sa e
reglementat prin licena GPL.

Pe baza puternicei componente de editare Scintilla, Notepad++ este scris n
C++ i folosete Win32 API pur i STL, care asigur o vitez de execuie mai
mare i mrimea programului mai mic.

Adobe Dreamweaver CS5.5 este un editor de vrf n industria web i
software de editare, care ofer att vizual ct i codul la nivel de capaciti
pentru crearea de site-uri web bazate pe standarde, desene i modele pentru
desktop, smartphone-uri, tablete i alte dispozitive.

Pagina web a fost creat folosind elemente de: Html, Css i Flash8.








8

5. Prezentarea vizual
Prezentarea vizual a fost mai uor de creat deoarece Adobe Dreamweaver
ofer posibilitatea de a vedea rezultatele codului surs n timp real i de a face
modificri direct pe imagine. Elementele repetabile ale paginii sunt bara de
navigare. Prima pagin este index.html i prezint pe scurt subiectului
atestatului.


Home


9

<!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>Naruto</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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

<style>

ul#nav {margin: 0 0 0 0px;}

ul.drop a { display:block; color: #fff; font-family: Verdana; font-size: 14px;
text-decoration: none;}

ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; border:
1px solid #fff; background: #555; color: #fff;}

ul.drop { position: relative; float: left; }

ul.drop li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1;
padding: 5px 10px; }

ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor:
default; background: #1e7c9a; }

ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index:
598; width: 195px; background: #555; border: 1px solid #fff; }

ul.drop ul li { float: none; }

ul.drop ul ul { top: -2px; left: 100%; }

ul.drop li:hover > ul { visibility: visible }

</style>

</head>

<body>

<div align="center">

<div id="container">

<div id="banner"></div>

<ul id="nav" class="drop">

<li><a href="index.html">Home</a></li>

<li><a href="#">Naruto</a>

<ul>

<li><a href="ns1.html">Sezonul 1</a></li>

<li><a href="ns2.html">Sezonul 2</a></li>

<li><a href="ns3.html">Sezonul 3</a></li>
10


<li><a href="ns4.html">Sezonul 4</a></li>

<li><a href="ns5.html">Sezonul 5</a></li>

</ul>

</li>

<li><a href="#">Naruto Shippden</a>

<ul>

<li><a href="s1.html">Sezonul 1</a></li>

<li><a href="s2.html">Sezonul 2</a></li>

<li><a href="s3.html">Sezonul 3</a></li>

<li><a href="s4.html">Sezonul 4</a></li>

<li><a href="s5.html">Sezonul 5</a></li>

<li><a href="s6.html">Sezonul 6</a></li>

<li><a href="s7.html">Sezonul 7</a></li>

<li><a href="s8.html">Sezonul 8</a></li>

<li><a href="s9.html">Sezonul 9</a></li>

<li><a href="s10.html">Sezonul 10</a></li>

<li><a href="s11.html">Sezonul 11</a></li>

<li><a href="s12.html">Sezonul 12</a></li>

</ul>

</li>

<li><a href="#">Personaje</a>

<ul>

<li><a href="#">Echipa 7</a>

<ul>

<li><a href="hatake.html">Hatake Kakashi</a></li>

<li><a href="naruto.html">Naruto Uzumaki</a></li>

<li><a href="sakura.html">Sakura Haruno</a></li>

<li><a href="sasuke.html">Sasuke Uchiha</a>

</ul>

</li>

<li><a href="#.html">Hokage</a>

<ul>

<li><a href="minato.html">Minato Namikaze</a></li>

<li><a href="tsunade.html">Tsunade</a></li>

</ul>

</li>
11


<li><a href="akatsuki.html">Akatsuki</a></li>

</ul>

</li>

<li><a href="#">Lumea din Naruto-termeni</a>

<ul>

<li><a href="#">Grande Ninja</a>

<ul>

<li><a href="student.html">Student Academie</a></li>

<li><a href="genin.html">Genin</a></li>

<li><a href="chunin.html">Chunin</a></li>

<li><a href="jounin.html">Jounin</a>

<li><a href="sannin.html">Sannin</a></li>

<li><a href="kage.html">Kage</a>

</ul>

</li>

<li><a href="#.html">Alte titluri ninja</a>

<ul>

<li><a href="ANBU.html">ANBU</a></li>

<li><a href="ninja.html">Ninja-medic</a></li>

</ul>

<li><a href="#.html">Bijuu sau bestii cu cozi</a>

<ul>

<li><a href="ichibi.html">Shukaku/Ichibi </a></li>

<li><a href="nibi.html">Matatabi/Nibi</a></li>

<li><a href="sanbi.html">Isobu/Sanbi</a></li>

<li><a href="yonbi.html">Son Goku/Yonbi</a>

<li><a href="gobi.html">Kokuo/Gobi</a></li>

<li><a href="rokubi.html">Saiken/Rokubi</a>

<li><a href="nanabi.html">Chomei/Nanabi</a></li>

<li><a href="kyuubi.html">Gyuki/Hachibi i Kurama/Kyuubi </a></li>

<li><a href="juubi.html">Juubi sau 10 cozi</a></li>

</ul>

</li>

<li><a href="#.html">Tehnici Jutsu</a>

<ul>

<li><a href="genjutsu.html">Genjutsu</a></li>
12


<li><a href="ninjutsu.html">Ninjutsu</a></li>

<li><a href="tajitsu.html">Tajijutsu</a></li>

</ul>

</li>

<li><a href="#.html">Subcategorii</a>

<ul>

<li><a href="doujutsu.html">Doujutsu</a></li>

<li><a href="hijutsu.html">Hijutsu</a></li>

<li><a href="kinjutsu.html">Kinjutsu</a></li>

<li><a href="kuchiyose.html">Kuchiyose no Jutsu</a></li>

<li><a href="fuuinjutsu.html">Fuuinjutsu </a></li>

<li><a href="senjutsu.html">Senjutsu sau modul sage</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="galerie.html">Galerie</a></li>

<li><a href="video.html">Video</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

<div id="continut">

<div style="padding:20px 30px 40px 30px;">

<h1>&nbsp;</h1>

<h1><center><img src="galerie/untitled.jpg" width="605" height="483"
/></center></h1>

<p>&nbsp;</p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Naruto este o
serie manga japonez scris i ilustrat de Masashi Kishimoto, avnd i o
adaptare anime. Personajul principal, Naruto Uzumaki, este un ninja adolescent,
imprevizibil i hiperactiv, care este ntr-o constant cutare de cunoatere,
visnd s devin Hokage, un ninja recunoscut ca cel mai puternic dintre toi i
liderul satului.</p>

<p><audio controls>

<source src="1.mp3" type="audio/mpeg">

</audio></p>

<p><br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Naruto: Shippden
13

(lit. Naruto: Hurricane Chronicles) este continuarea anime-ului Naruto. Dup ce
se antreneaz doi ani jumtate cu Jiraya, Naruto se ntoarce n Konoha, unde
rentlnete prietenii lsai n urm, i reface Echipa 7, acum numit Echipa
Kakashi, cu Sai nlocuindu-l pe Sasuke. Toi colegii lui Naruto s-au maturizat i
au crescut n rang, unii mai mult dect alii. Spre deosebire de seria original
unde juca un rol minor, organizaia Akatsuki devine principalul antagonist al
seriei.</p>

<p><audio controls>

<source src="2.mp3" type="audio/mpeg">

</audio></p>


Personaje


<div style="padding:20px 30px 40px 30px;">
<h1>&nbsp;</h1>
<h1><center></center></h1>
<p><img src="galerie/minato.jpg" width="605" height="225" /></p>
14

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Minato
Namikaze, cel de-al patrulea Hokage, a fost tatl lui Naruto Uzumaki. Dei
Naruto i Minato au un numr similar de trsturi, relaia lor familial nu este
dezvluit dect n partea a II-a a seriei cnd se dezvluie faptul c i-a dat viaa
alturi de soia lui, Kushina Uzumaki, pentru a sigila vulpea cu nou cozi n
corpul lui Naruto, salvnd Konoha de la distrugere i dndu-i lui Naruto acces la
o putere imens. Este recunoscut ca fiind elevul lui Jiraiya i profesorul lui
Kakashi. Minato este o raritate printre ninja deoarece era capabil s se mite
destul de repede pentru a nimici plutoanele inamice ct ai clipi din ochi, primind
titlul de &quot;Fulgerul galben al Konohi&quot;. Legtura familial puternic
este tratat mai pe larg n &quot;Naruto filmul 6: Drumul unui ninja&quot;.</p>
<p><audio controls>
<source src="7.mp3" type="audio/mpeg">
</audio></p></div>

Lumea din Naruto - termeni

<div style="padding:20px 30px 40px 30px;">
<h1>&nbsp;</h1>
<h1><center></center></h1>
15

<p><img src="galerie/yanbi.jpg" width="605" height="248" /></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Acest bijuu este
specific Satului Ascuns n Pietre. Demonul este o maimu cu patru cozi ce are
puteri bazate pe lav. Yonbi este nchis ntr-un btrn numit Roshi. A fost
capturat de Akatsuki.</p>
</div>
</div>

Galerie

<li><a href="video.html">Video</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="continut">
<div style="padding:20px 30px 40px 30px;">
<h1>&nbsp;</h1>
<h1><center></center></h1>
<table align="center" style="padding-top:20px;">
16




<tr>
<td style=" width:150px;"><a rel="lightbox[roadtrip]"
href="galerie/2.jpg"><img src="galerie/2.jpg" width="140" height="100"
border="0" /></a></td>
<td style=" width:150px;"><a rel="lightbox[roadtrip]"
href="galerie/3.jpg"><img src="galerie/3.jpg" width="140" height="100"
border="0" /></a></td>
<td style=" width:150px;"><a rel="lightbox[roadtrip]"
href="galerie/5.jpg"><img src="galerie/5.jpg" width="140" height="100"
border="0" /></a></td>
</tr>
<tr>
<td style=" width:150px;"><a rel="lightbox[roadtrip]"
href="galerie/1.jpg"><img src="galerie/1.jpg" width="140" height="100"
border="0" /></a></td>
<td style=" width:150px;"><a rel="lightbox[roadtrip]"
href="galerie/4.jpg"><img src="galerie/4.jpg" width="140" height="100"
border="0" /></a></td>
<td style=" width:150px;"><a rel="lightbox[roadtrip]"
href="galerie/6.jpg"><img src="galerie/6.jpg" width="140" height="100"
border="0" /></a></td>
</tr>
<tr>
<td style=" width:150px;"><a rel="lightbox[roadtrip]"
href="galerie/7.jpg"><img src="galerie/7.jpg" width="140" height="100"
border="0" /></a></td>
<td style=" width:150px;"><a rel="lightbox[roadtrip]"
href="galerie/8.jpg"><img src="galerie/8.jpg" width="140" height="100"
border="0" /></a></td>
<td style=" width:150px;"><a rel="lightbox[roadtrip]"
href="galerie/9.jpg"><img src="galerie/9.jpg" width="140" height="100"
border="0" /></a></td>





17




Video

18





<div style="padding:20px 30px 40px 30px;">
<h1>&nbsp;</h1>
<h1><center></center></h1>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Episoadele
subtitrate n limba romn din Naruto i Naruto Shippuden pot fi urmrite
integral pe:<strong></strong></p>
<ul>
<li><a href="http://rosub-anime-kage.info/"><strong>http://rosub-anime-
kage.info/</strong></a><strong> </strong></li>
<li><a
href="http://www.animekage.com/"><strong>http://www.animekage.com/</stro
ng></a><strong> </strong></li>
<li><a
href="http://www.deseneanime.ro/"><strong>http://www.deseneanime.ro/</stro
ng></a><strong> </strong></li>
<li><a
href="http://www.trilulilu.ro/"><strong>http://www.trilulilu.ro/</strong></a><s
trong> </strong></li>
</ul>
<p><video controls>
<source src="1.mp4" type="video/mp4">
</video></p>
<p><video controls>
<source src="2.mp4" type="video/mp4">
</video></p>







19



6. Resurse hardware i software necesare
Fiind realizat in HTML, funcionarea corecta depinde de foarte putini factori
la nivel hardware.
Configuraia minim necesar :

Procesor (CPU): 1 GbHz
Memorie (RAM): de la min. 256 MB (de preferat cel puin 512 MB)
o plac video care s suporte mai mult de 256 de culori (opional pentru o
afiare corect a detaliilor)

Resurse software
Browser: Google Chrome (este necesara o versiune a browser-ului care sa
permit recunoaterea tuturor comenzilor i de asemenea este obligatoriu un
flash player sau un patch pentru flash). De asemenea este necesar un
browser care susine HTML5 (de preferat ultimele versiuni Chrome sau
Firefox)

Condiii de testare: proiectul a fost fcut i testat pe un PC Intel
Core2duo 2GbHz, la 2 MB DDR2, sistem de operare Windows 7.





20


7. Bibliografie
http://ro.wikipedia.org/wiki/Adobe_Dreamweaver

http://ro.wikipedia.org/wiki/Adobe_Flash

http://ro.wikipedia.org/

http://youtube.com/

http://ro.wikipedia.org/wiki/Naruto

http://anime-kage-ro.info/anime/naruto-shippuden/info.php