2014

Realizator : Maicaneanu Luiza Maria Profesor Coordonator : Sugu Ecaterina

[ATESTAT INFORMATICA]

Cuprins

Justificarea alegerii .................................................................................................................................... 3 Generalitati despre limbajul HTML ............................................................................................................... 4 Cerinte hardware si software .................................................................................................................. 12 Scurta prezentare a aplicatiei .................................................................................................................. 13 Prezentarea Codului HTML a paginii index .......................................................................................... 14 Programele compatibile .......................................................................................................................... 19 Print Screen ............................................................................................................................................. 20 Bibliografie .............................................................................................................................................. 25

Justificarea alegerii
Am ales ca tema de atestat filmele de dragoste pentru ca internet-ul este plin de filme de actiune si science-fiction , specifice barbatilor , iar noi , fetele , nu gasim un site care sa cuprinda doar filme pe care putem sa le vedem noi .

Generalitati despre limbajul HTML

Pana in anul 1990 accesarea informatiilor de pe INTERNET era foarte dificila si reteaua nu era folosita decat de un numar restrans de persoane, in general oameni de stiinta. Fizicianul Tim Berners-Lee a devenit celebru deoarece a inventat link-urile hypertext.Aceasta idee a dus la dezvoltarea unui limbaj simplu care s-a impus pe piata mondiala.Acest limbaj a fost numit Hypertext Markup Language, prescurtat, HTML. Dar ce este de fapt limbajul HTML ? HTML-ul este un set de conventii pentru marcarea portiunilor de document astfel incat fiecare portiune sa apara cu format distinct atunci cand documentul este accesat de un program de analiza sintactica (parser). HTML este limbajul de marcare ce stabileste aspectul documentelor WWW, iar prin intermediul browserelor se poate vedea documentul gata formatat. HTML este de fapt un subset al standardului SGML (Standard Generalized Markup Language) si include capacitati care permit autorilor sa insereze hiperlegaturi care afiseaza alte documente HTML cand se executa clic pe ele. Notiunea de hypertext inseamna text pastrat in format electronic cu link-uri intre pagini. Pana in 1993, in jur de 100 de calculatoare erau echipate pentru a gazdui pagini HTML;aceste pagini interconectate au fost denumite <WORLD WIDE WEB> Nu mult dupa aceea au inceput sa fie scrise primele browsere Web cu ajutorul carora puteau fi vizualizate pagini web care contineau text si imagini. In functie de versiunea HTML folosita, paginile WEB sunt grupate in trei generatii: - paginile din prima generatie, care foloseau versiunea 1.0, in care se edita text si 1-2 imagini. - paginile din a doua generatie, proiectate cu HTML 2.0, care puteau contine si un fundal, permiteau aranjarea datelor in tabele si posibilitatea de a comanda un produs prin intermediul Internetului.

- paginile din a treia generatie care pot contine culori diferite, secvente animate, sunete, etc. In prezent a aparut a patra versiune a limbajului HTML. Documentele HTML sunt exclusiv de tip text (ASCII); ele pot fi editate direct, prin comenzi specifice sistemului de operare folosit. In WINDOWS, se poate utiliza NOTEPAD,WORDPAD sau orice alt editor de texte. Vizualizarea acestor documente se face cu ajutorul unor aplicatii speciale, numite BROWSER-e, care nu depind de tipul sistemului de calcul folosit, ceea ce permite independenta fisierelor de tip HTML fata de platforma de lucru. Pentru descrierea documentelor WEB se utilizeaza anumite etichete (tag-uri) specifice pentru fiecare element descris; acestea stabilesc structura si aspectul documentului final. Tag-urile sunt recunoscute de browser-e care stabilesc apoi modul de formatare a documentului. Pentru delimitarea (separarea ) tag-urilor se folosesc delimitatorii < si > care incadreaza fiecare eticheta. Forma generala: <tag> pentru a marca inceputul unui tag si </tag> pentru a marca sfarsitul unui tag. In HTML nu se face distinctie intre majuscule si minuscule; Unele elemente HTML admit atribute care specifica informatii suplimentare despre continutul elementului. Atributele elementului se precizeaza in cadrul etichetei de inceput si se aplica doar elementului curent. Ex. Daca se doreste includerea unei imagini in document, se va specifica drept atribut adresa fisierului care contine imaginea si eventual alte informatii despre felul in care se va face includerea. Avantajul major al unui browser este acela ca poate suporta si alte limbaje, ca Java sau Basic, ce completeaza utilitatea limbajului HTML. Macromedia Dreamweaver este o unealt destinat creatorilor de pagini web. Dreamweaver a fost creat de Macromedia (acum Adobe Systems) i momentan a ajuns la versiunea 9. Primele versiuni ale produsului serveau doar ca simple editoare HTML de tipul WYSIWYG dar n versiunile recente

au fost implementate funcii de editare avansate i support pentru alte tehnologii web cum ar fi CSS, JavaScript etc. Dreamweaver s-a bucurat de un larg succes nc de la sfritul anilor '90 i momentan deine aproximativ 80% din piaa editoarelor HTML. Produsul poate fi rulat pe variate platforme software: Mac, 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 paginilor web 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 design-ul 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, Macromedia a crescut suportul pentru tehnologia CSS precum i alte modaliti de design fr a fi necesar folosirea design-ului pe baz de tabel. Dreamweaver permite folosirea majoritii browserelor instalate pe calculatorul utilizatorului, pentru a previzualiza website-ul creat. De asemenea conine i cteva utilitare pentru administrarea site-urilor, cum ar fi cele pentru a gsi i modifica un paragraf sau o linie de cod, n ntregul web site, 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 MySQL i Microsoft Access) pentru a filtra i afia coninutul folosind script-uri 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, aa cum sunt ele cunoscute, sunt mici programe, pe care orice dezvoltator le poate scrie (de obicei n HTML i JavaScript) i pe care oricine le poate descarca 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.

Macromedia Flash sau mai pe scurt Flash este o aplicaie utilizat pentru dezvoltarea obiectelor-aplet de tip Flash disponibile n cadrul unor pagini WEB. Prin intermediul obiectelor flash, vei putea crete dinamismul unei pagini precum i facilita interaciunea cu utilizatorul. Iniial dezvoltat de Macromedia, aplicaia Flash a fost preluat de ctre Adobe odat cu achiziionarea companiei sus amintite.

Avantajele folosirii Flash-ului pe web: Elemente grafice vectoriale: dimensiuni mici i scalabil: Pentru a memora imaginile un calculator poate recurge la dou metode: prima este reinerea pixel cu pixel a imaginii, cea de-a doua este memorarea unor puncte critice cu ajutorul crora imaginea poate fi refcut. Astfel pentru a afia un cerc, acesta poate fi memorat ntr-o imagine de tip raster (cum ar fi formatul BitMap sau Jpeg) dac avem un cerc cu o raz destul de mare vor fi memorai nu numai pixelii de pe circumferina cercului ci i cei din interiorul acestuia sau care sunt n jurul su. Spre deosebire, n cadrul formatelor vectoriale (SVG - Scalable Vector Graphics, SWF - ShockWave Flash) sunt reinute doar centrul i raza cercului, calculatorul gsind imediat metoda de afiare a tuturor punctelor ce vor alctui cercul. Este evident faptul c dimensiunea unui fiier n format rasterizat (jpg, bmp, gif) este mai mare dect cea a unui fiier n format vectorial (din cauza numrului de informaii ce vor fi reinute). Atunci cnd mrim o imagine de tip vectorial nu facem dect s redesenm o parte a sa, calculatorul putnd reda cercul cu aceeai claritate se cunoate forma geometric reprezentat i mrirea imaginii nu reprezint dect trasarea (la scar) a fostei imagini vectoriale. Atunci cnd mrim o imagine de tip raster calculatorul nu cunoate despre ce este vorba i operaia va consta doar n suprademensionarea pixelilor (un pixel al cercului va fi afiat n mai multe puncte de pe ecran). Independena de platform (browser/sistem de operare): Imaginile vectoriale, dei mai utile, necesit o aplicaie care s genereze imaginea (pentru formatul SVG de exemplu exist Adobe SVG Player iar pentru SWF avem Playerul de Flash). Independena de platform apare din cauz c acest program ce tie s afieze imaginile a fost construit pentru o gam larg de hardware i sisteme de operare: Astfel dac vom vizualiza obiectul Flash n Windows se va folosi automat Playerul de Flash versiunea Windows, dac utilizm un telefon mobil (SmartPhone), se va folosi playerul disponibil pentru telefoane (Flash Player Lite

1.0), sau dac vom folosi MacOS exist un player separat (evident toate playerele vor afia aceeai imagine final). Animaii de lung durat uor de realizat: animaiile sunt punctul forte al Flash-ului, interfaa aplicaiei d posibilitatea de a sincroniza (n funcie de timp) diversele obiecte, poziii sau forme ale acestora. Flash-ul nu numai c realizeaz aceast sincronizare, dar poate i interpola poziia (sau forma) unui obiect pentru a uura munca utilizatorului. Se pot aduga interfeei elemente multimedia: n interiorul obiectelor Flash putei importa i manipula (nainte, inapoi, salt la un anumit moment) MP3-uri sau AVI-uri. Nu necesit cunotine de HTML, XHTML: n cazul n care v hotri s realizai un ntreg site n Flash, aplicaia v poate furniza odat cu obiectul flash i codul HTML necesar n acest fel tot ce mai trebuie fcut este doar publicarea sitului pe un server WEB.

Editoare puternice i lucrul facil: (Macromedia) Flash este un editor puternic care d posibilitatea de atari de comportamente diverselor obiecte fie folosind interfaa de desenare grafic fie prin ataarea de scripturi obiectelor. Uurina mbinrii elementelor grafice cu scriptul: ataarea codurilor ActionScript obiectelor din flash se realizeaz prin selectarea obiectului i introducerea codului asociat obiectului ntr-o fereastr special. Transferabil ca flux de date: pentru ca un film Flash s ruleze pe maina clientului nu este necesar s fie ncrcat n ntregime playerul va afia doar ct va putea din film ateptnd (eventual) ncrcarea n continuare. Din acest motiv se pot realiza scripturi speciale care ataate obiectelor Flash pot furniza informaii privitoare la procentul de fiier care a fost ncrcat.

Dezavantaje ale utilizrii Flash-ului:

Printre dezavantajele folosirii obiectelor flash n paginile web amintim: Depinde de player: dei acesta vine instalat pe o suit de browsere (i n cazul n care nu este preinstalat instalarea este destul de rapid dimensiunea Playerului Flash este destul de mic i descrcarea acestuia n contextul reelelor actuale este rapid), totui exist cazuri n care obiectele Flash ajung pe maini ce nu au instalat aplicaia necesar interpretrii obiectelor Flash, ajungndu-se n imposibilitatea folosirii fiierelor (Pentru a rula aplicaiile Flash pe aceste calculatoare trebuie exportat obiectul Flash ca un executabil). Mare amator de resurse: deoarece trebuie s reconstruiasc de fiecare dat elementele grafice, Playerul Flash (precum i aplicaia de dezvoltare) este mare consumator de memorie i procesor (n cazul graficii raster este clar unde trebuiau afiai pixelii ce formeaz cercul n cadrul graficii vectoriale trebuie ca poziiile pixelilor s fie recalculate). Motoarele de cutare nu pot indexa textul: Flashul lucreaz cu mai multe tipuri de texte, majoritatea dintre acestea (textul static) nu poate fi indexat de motoarele de cutare deoarece obiectul Flash este tratat ca element grafic/obiect i roboii de cutare nu au cunotinele necesare disecrii obiectelor Flash i extragerii textului intern.

Uurina utilizrii l face sa fie folosit n cele mai absurde moduri (de exemplu, flash-urile - sperietoare). Pentru aceste tipuri de Flash-uri, fcute de obicei de nceptori, n limba englez exist un termen special: "flashturbation". Tehnologie liceniat: fiind o aplicaie dezvoltat de o serie de programatori (pltii pentru a dezvolta Flashul), instrumentul de dezvoltare cost cel puin 600[necesit citare]. Totui specificaiile formatului obiectului Flash sunt disponibile i din acest motiv au aprut (i nc apar) destule instrumente care s utilizeze acest format n scopuri mai mult sau mai puin productive sau legale. Dintre acestea amintim: Swift3D, Swish, ImperatorFLA, ActionScript Obfuscator.

Cerinte hardware si software

Fiind realizat in HTML, functionarea corecta depinde de foarte putini factori la nivel hardware. Configuratia minima necesara : procesor la 133MHz min. 32 MB RAM (de preferat cel putin 64 MB) o placa vide care sa suporte mai mult de 256 de culori (optional pentru o afisare corecta a detaliilor) Conexiune la internet . Este necesara o versiune a browser-ului care sa permita recunoasterea tuturor comenzilor ( testul a fost facut cu Internet Explorer 6.0 ), si de asemenea este obligatoriu un flash player, sau un patch pentru flash. Conditii de testare: proiectul a fost facut si testat pe un PC AMD Athlon 1700MHz, la 256 MB DDRAM, sistem de operare MS Windows XP.

Scurta prezentare a aplicatiei

Atestatul a fost realizat cu ajutorul programului Adobe Dreamweaver cu ajutorul programului Adobe Photoshop folosit pentru a edita pozele si logo-ul . Ca si componenta , site-ul este format din 5 pagini . Pentru contact am folosit un script php cu sendmail integrat si un design conceput special pentru aceasta pagina . Pentru un mai bun aspect , la pagina a fost adaugat un favicon , o mica imagine ce adauga un plus de imagine paginii in browser .

Prezentarea Codului HTML a paginii index

<html lang="en"> <head> <title>Acasa</title> <meta charset="utf-8"> <link rel="icon" href="img/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/responsive.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/touchTouch.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/kwicks-slider.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/superfish.js"></script> <script type="text/javascript" src="js/jquery.flexslidermin.js"></script> <script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/touchTouch.jquery.js"></script> <script type="text/javascript">if($(window).width()>1024){document.write("<"+"script src='js/jquery.preloader.js'></"+"script>");} </script> <script> jQuery(window).load(function() { $x = $(window).width(); if($x > 1024) { jQuery("#content .row").preloader(); } jQuery('.magnifier').touchTouch(); jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function (){jQuery(this).css('display','none')}); }); </script> <!--[if lt IE 8]> <div style='text-align:center'><a href="http://www.microsoft.com/windows/internet-

explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/img/upgrade.jpg"border="0"alt=""/></a></di v> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <!--<![endif]--> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'> <![endif]--> </head> <body> <div class="spinner"></div> <header> <div class="container clearfix"> <div class="row"> <div class="span12"> <div class="navbar navbar_"> <div class="container"> <h1 class="brand brand_"><a href="index.html"><img alt="" src="img/logo.gif"> </a></h1> <a class="btn btn-navbar btn-navbar_" data-toggle="collapse" datatarget=".nav-collapse_">Menu <span class="icon-bar"></span> </a> <div class="nav-collapse nav-collapse_ collapse"> <ul class="nav sf-menu"> <li class="active"><a href="index.html">Acasa</a></li> <li class="sub-menu"><a href="stiri.html">Stiri</a> <li><a href="Filme.html">Filme</a></li> <li><a href="Blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> </div> </div> </div> </div> </header> <div class="bg-content"> <div class="container"> <div class="row"> <div class="span12"> <div class="flexslider"> <ul class="slides"> <li> <img src="img/slide-1.jpg" alt="" > </li> <li> <img src="img/slide-2.jpg" alt="" > </li> <li> <img src="img/slide-3.jpg" alt="" > </li> <li> <img src="img/slide-4.jpg" alt="" > </li> <li> <img src="img/slide-5.jpg" alt="" > </li> </ul> </div>

<span id="responsiveFlag"></span> <div class="block-slogan"> <h2>Bun venit!</h2> <div> <p><a href="filme.html" target="_blank" class="link-1">Apasa aici</a> pentru mai multe filme !</p> </div> </div> </div> </div> </div> <div id="content" class="content-extra"><div class="ic">Design realizat de Luiza Maicaneanu @ Aprilie 2014!</div> <div class="row-1"> <div class="container"> <div class="row"> <ul class="thumbnails thumbnails-1"> <li class="span3"> <div class="thumbnail thumbnail-1"> <h3>A walk to remember</h3> <img src="img/page1-img1.jpg" alt=""> <section> <strong>2002</strong> <p>The story of two North Carolina teens, Landon Carter and Jamie Sullivan, who are thrown together after Landon gets into trouble and is made to do community service.</p> <a href="filme.html" class="btn btn-1">Vizioneaza</a> </section> </div> </li> <li class="span3"> <div class="thumbnail thumbnail-1"> <h3>The English Patient</h3> <img src="img/page1-img2.jpg" alt=""> <section> <strong>1996</strong> <p>At the close of WWII, a young nurse tends to a badlyburned plane crash victim. His past is shown in flashbacks, revealing an involvement in a fateful love affair.</p> <a href="filme.html" class="btn btn-1">Vizioneaza</a> </section> </div> </li> <li class="span3"> <div class="thumbnail thumbnail-1"> <h3>P.S I love you</h3> <img src="img/page1-img3.jpg" alt=""> <section> <strong>2007</strong> <p>A young widow discovers that her late husband has left her 10 messages intended to help ease her pain and start a new life. </p> <a href="filme.html" class="btn btn-1">Vizioneaza</a> </section> </div> </li> <li class="span3"> <div class="thumbnail thumbnail-1"> <h3 class="title-1 extra">Before sunset</h3>

<img src="img/page1-img4.jpg" alt=""> <section> <strong>2004</strong> <p>Nine years after Jesse and Celine first met, they encounter each other again on the French leg of Jesse's book tour. </p> <a href="filme.html" class="btn btn-1">Vizioneaza</a> </section> </div> </li> </ul> </div> </div> </div> <div class="container"> <div class="row"> <article class="span6"> <h3>Despre mine</h3> <div class="wrapper"> <figure class="img-indent"><img src="img/page1-img5.jpg " alt="" /></figure> <div class="inner-1 overflow extra"> <div class="txt-1">Ma numesc Maicaneanu Luiza Maria si am 19 ani! </div> Eleva in clasa a XII-aA ,la Liceul Tehnologic Bilteni si sper sa iau un 10 cu acest atestat :D !<div class="border-horiz"></div> </div> </div> </article> <article class="span6"> <h3>Cele mai noi poze cu mine </h3> <ul class="list-photo"> <li><a href="img/3 " class="magnifier" ><img src="img/page1img6.jpg " alt="" /></a></li> <li><a href="img/1.jpg " class="magnifier" ><img src="img/page1img7.jpg " alt="" /></a></li> <li><a href="img/4.jpg " class="magnifier" ><img src="img/page1img8.jpg " alt="" /></a></li> <li class="last"> <a href="img/img/2.jpg " class="magnifier" > <img src="img/page1-img9.jpg " alt="" /></a></li> </article> </div> </div> </div> </div> <footer> <div class="container clearfix"> <ul class="list-social pull-right"> <li><a class="icon-1" href="https://www.facebook.com/luiza.maicaneanu"></a></li> <li><a class="icon-2" href="index.html"></a></li> <li><a class="icon-3" href="http://twitter.com/LuizaMaicaneanu"></a></li> <li><a class="icon-4" href="http://google.ro"></a></li> </ul>

<div class="privacy pull-left">Pagina web realizata de <a href="index.html" target="_blank" rel="nofollow">Luiza Maicaneanu</a> </div> </div> </footer> <script type="text/javascript" src="js/bootstrap.js"></script> </body> </html>

Programele compatibile
Atestatul este compatibil cu orice versiune de Google Chrome , Mozzila Firefox si Opera Browser . In cazul in care se deschide cu Internet Explorer cu o versiune mai mica de 7.0 , site-ul v va ruga s actualizati browserul pentru o mai buna folosire a tuturor functiilor site-ului . Recomand folosirea browserului Google Chrome deoarece atestatul a fost optimizat pentru acest browser .

Print Screen

Pagina acasa a atestatului . Aici sunt prezentate meniurile si linkurile de legatura pentru celalalte pagini , cat si logo-ul paginii .

In pagina Stiri sunt prezentate cateva stiri din lumea filmului.

In pagina Filme sunt prezentate cele mai frumoase filme de dragoste , in ordinea notelor afisate pe IMDB.Com

In interiorul paginii Blog sunt prezentate cele mai recente interviuri din lumea filmului .

In pagina Contact este amplasat central un script php pentru a trimite un mesaj administratorilor .

Bibliografie
Pentru realizarea atestatului am folosit ca surse de inspiratie: IMDB.Com (http://IMDB .Com) ; Google ( http://google.ro/) pentru imagini ; Pixlr (http://pixlr.com/editor/) pentru editarea pozelor atunci cand lucram la atestat de pe un alt calculator ;