curs webdesign
Irfan View – Browser si editor rapid de imagini IrfanView este o aplicaţie cu care puteti vizualiza şi edita rapid imagini. Deşi interfaţa sa este simplă şi dimensiunile sunt mici, oferă funcţii utile atât pentru începători cât şi pentru cei mai experimentaţi. Compatibilitatea cu foarte multe tipuri de fişiere este un punct forte al acestei aplicaţii. Prin instalarea de plugin-uri, adăugaţi funcţii noi pentru mărirea numărului de fişiere recunoscute sau efectelor pe care le puteţi aplica imaginilor. De asemenea există posibilitatea de a instala un language pack pentru a traduce interfaţa şi meniurile în limba română. Câteva dintre funcţiile sale cele mai utile: afişarea de pictograme (IrfanView – Thumbnails), toolbox-ul pentru editare rapidă (apăsaţi tasta F12), împachetarea de imagini în slideshow-uri executabile sau screensavere (EXE/SCR), importarea de imagini de la scanner, camera video sau alte dispozitive, redimensionare, opţiuni de schimbare culori, adâncime de culoare pentru imagini şi multe altele.
Picasa 3 – Manager/Editor/Browser Foto Picasa este o aplicaţie care vă ajută să găsiţi, editaţi şi să publicaţi pozele de pe PC-ul vostru. De fiecare dată când deschideţi Picasa, va localiza toate imaginile (chiar şi cele de care aţi uitat), şi le va organiza în albume după criterii ca nume folder, dată. Vă permite să creaţi abume noi şi să le reorganizaţi asa cum doriţi.
De asemenea vă permite să efectuaţi editări simple, prin câteva click-uri; puteţi foarte uşor să creaţi CD-uri cadou, să le publicaţi în albume pe web, sau chiar în blogul vostru.
Dacă aveţi cont google, puteţi folosi Web Albums, pentru a împărţi cu prietenii pozele voastre. De când a apărut versiunea 3, Picassa vă oferă o alternativă la Windows Picture & Fax Viewer şi anume Picassa Photo Viewer, care chiar e mai performantă, are cam aceleaşi funcţii şi se mişcă mai repede.
În plus vă arată şi thumbnails, şi dacă aveţi cursorul asupra acestora şi rotiţi din scroll, veţi naviga prin imaginile din acelaşi director, dacă duceţi cursorul deasupra imaginii şi mişcaţi din scroll vă face zoom în imaginea curentă.
Multimedia în HTML Sunete în pagini web Câteva din formatele de sunete utilizate în paginile web sunt: MIDI (*.mid sau *.midi), WAVE (*.wav), AU (*.au).
curs webdesign În pagini putem introduce: 1. link-uri către fişiere de sunet 2. sunete care care să fie audiate direct din pagina web 3. sunet de fond (fundal sonor) Exemplu: Varianta 1 este un simplu link catre un fişier de sunet HTML
Afişare
<a href="1.mid">fisier sunet</a>
fisier sunet
<a href="2.wav">fisier sunet</a>
fisier sunet
<embed src=”cantec.mid” loop=”-1” autostart=”true”>
Se aude cântecul
A doua variantă menţionată se realizează folosind fişiere de tip flash, care pot conţine şi butoane de control de tip Play, Pause, Stop. A treia variantă este acceptată doar de browserul Internet Explorer şi constă în inserarea în interiorul corpului paginii a etichetei: <bgsound> care poate avea atributele: src - fişierul sursă de sunet care va fi audiat loop - numărul de repetiţii ale fişierului ("infinite" sau "-1" pentru infinit şi un număr întreg care indică de câte ori va fi audiat fişierul) Cu eticheta <embed> putem introduce sunete în paginile web. Sound are următoarele atribute: - autostart de tip true/false care determină dacă sunetul va porni automat - controller de tip true/false care afişează sau nu un player de sunete în pagină - hidden de tip true/false care ascunde sau nu controllerul - loop care determină de câte ori se repetă sunetul. Sunete şi cântecele puteţi descărca de pe site-ul arhivă http://freemidi.org/ Efecte sonore de tip wav le puteţi descărca de pe http://www.a1freesoundeffects.com/
Videoclipuri în pagini web Formatele de videoclipuri utilizate în paginile web sunt: MPEG (*.mpg sau *.mpeg), QuickTime (*.mov), AVI (*.avi). În pagini putem introduce: 1. link-uri către fişiere video 2. videoclipuri care să fie vizionate direct din pagina web. Exemplu: Varianta 1 este un simplu link către un fişier video HTML
Afişare
<a href="1.avi">fisier video</a> fisier video A doua variantă este acceptată doar de browserul Internet Explorer care permite atribute speciale în eticheta <img>: dynsrc - fişierul sursă video care va fi vizionat loop - numărul de repetiţii ale fişierului ("infinite" sau "-1" pentru infinit şi un număr întreg care indică de câte ori va fi vizionat fişierul) start - indică momentul în care fişierul va fi vizionat (fileopen=când pagina a fost încarcată, mouseover=când mouse-ul este deasupra imaginii) controls - afişează butoanele de control <embed></embed> - afişează o consolă pentru sunet, are următoarele atribute: • src - Defineşte locaţia fişierului audio folosit (midi, .au sau wav) • controls - oferă posibilitatea alegerii mai multor controale care includ: console, console mici, butoane de play şi altele • autostart - când este TRUE sunetul începe în timp ce sunetul este descărcat de browser • hidden - când este TRUE va ascunde controalele, standard este FALSE • loop - defineşte de câte ori se va repeta sunetul • volume - setează volumul sunetului (sonorul)
curs webdesign • •
height - înălţimea în pixeli a consolei width - lungimea în pixeli a consolei.
Exemplu: <embed src="sunet.midi" width="145"height="60" autostart="truie" volume"100" controls="console" hidden="false"> - Tag-ul "<embed>" poate fi folosit şi pentru afişarea de imagini video, care au extensiile ".movs", ".mpeg" sau ".avi", recomandat este ".movs". Se adaugă similar ca şi sunetul, la "src" scrieţi calea către fişierul video. Diferenţa este ca nu trebuie folosit atributul "hidden" iar pentru "width" şi "height" dimensiunile nu trebuie să fie mai mici decât dimensiunile în care este salvat fişierul video. - Totuşi, afişarea de imagini video necesită mai mult timp deoarece fişierele video au dimensiuni destul de mari. - "<embed>" se foloseşte şi pentru adăugarea de imagini flash (cu extensia ".swf"), pentru aceasta este încadrat în alt element, <object> </object> - Iată un exemplu de cod prin care puteţi adăuga imagini flash în pagina web: <object width="580" height="400"> <param name="movie" value="fisier.swf"> <embed src="fisier.swf" width="580" height="400"> </embed> </object> , unde "width" şi "height" sunt dimensiunile cadrului în care este afişată imaginea flash, iar la atributele "value" şi "src" se scrie calea către fişierul ".swf" (trebuie scrisă aceeaşi cale la ambele atribute). - Afişarea în pagină a elementelor cu EMBED necesită folosirea unui plug-in, care de cele mai multe ori, dacă acesta nu este deja instalat, este cerută automat încărcarea lui de către browser.
Elemente de animaţie text HTML are un tag special, <marquee> </marquee>, prin care puteţi crea un efect de mişcare a unui text (sau imagine) care este încadrat de a cest element. Are următoarele atribute: • • • • • • •
loop - defineşte de câte ori se va mişca textul height - înălţimea în pixeli a zonei în care se mişcă textul width - lungimea în pixeli a zonei în care se mişcă textul bgcolor - culoarea zonei în care se mişcă textul direction - direcţia de mişcare (left, right, up, down) - (stânga, dreapta, sus, jos) behavior - defineşte cum se va misca textul (scroll, slide, alternate) scrolldelay - setează numărul, în milisecunde, între refreshuri de mişcare.
Exemplu de mişcare pe orizontală : <marquee behavior="alternate" bgcolor="#00ffff" direction="right">Marquee text</marquee> În pagină va arata aşa:
Marquee text Iată un alt exemplu unde mişcarea se face pe verticală: <marquee behavior="alternate" bgcolor="#00ffff" direction="up" width="100" height="100">Marquee text</marquee> −
în loc de text poate fi folosită şi o imagine, înlocuind textul (aici "Marquee text") cu tagul "<img> pentru imagine.
curs webdesign
TEMĂ 1. Să se descarce de pe site-ul http://freemidi.org/ o melodie care vă place şi să se aplice ca fundal sonor la o pagină web. 2. Paginii anterior create să i se adauge mai multe legături către alte pagini pe care le veţi crea. Asociaţi fiecărei pagini câte un sunet de tip wav descărcat de pe site-ul http://www.a1freesoundeffects.com/. 3. Să se includă cu <embed> într-o pagină web un videoclip care vă place de pe YouTube. 4. Să se caute nişte filmuleţe (videoclipuri) într-o arhivă şi să se includă cu <embed> în paginile dvs web. 5. Să se creeze mai multe imagini de genul thumbnails şi să se aplice pe ele legături către câte un videoclip având aceeaşi temă ca imaginea thumbnail.