marți, 28 noiembrie 2017

S I 27.11-02.12

APLICATIE PRACTICA
COMPETENTE GENERALE:
-   Utilizarea calculatorului şi prelucrarea informaţiei
COMPETENTE SPECIFICE:
-  Utilizează tehnologii IT multimedia (Web, comunicare) pentru crearea documentelor Web.

Unitatea de învăţare: Instrumente de lucru pentru crearea site-urilor Web
Tema proiectului: Realizarea unei pagini Web
 Durata proiectului:  4 ore



  • Tema lecţiei: Analiza proiectului
  • Tipul lecţiei: Fixare şi consolidare deprinderi şi priceperi
  • Durata lectiei: 1 ora
Materiale didactice:








Fisa de documentare 0_portofoliu.pdf
Fise de lucru (in echipa2 elevi)0bilete proiect.pdf
Proiectul unitatii de invatare:0_ui_xii.pdf
Multimedia:0_prezentare.pptx

Planificarea proiectului pe saptamani

A.      Data începerii activităţilor la proiect: 19.11-24.11.2017
B.      Durata efectuarii proiectului: 4 ore
C.      Data finalizarii proiectului:
D.      Competenţe vizate / implicate în realizarea / execuţia proiectului
-          Utilizează resurse Web şi tehnologii pentru realizarea site-urilor Web
-          Formatează elementele de conţinut ale site-ului cu ajutorul software-ului specific.

marți, 21 noiembrie 2017

S I 20.11-24.11

APLICATIE PRACTICA
COMPETENTE GENERALE:
-   Utilizarea calculatorului şi prelucrarea informaţiei
COMPETENTE SPECIFICE:
-  Utilizează tehnologii IT multimedia (Web, comunicare) pentru crearea documentelor Web.

Unitatea de învăţare: Instrumente de lucru pentru crearea site-urilor Web
Tema proiectului: Realizarea unei pagini Web
 Durata proiectului:  4 ore



  • Tema lecţiei: Analiza proiectului
  • Tipul lecţiei: Fixare şi consolidare deprinderi şi priceperi
  • Durata lectiei: 1 ora
Materiale didactice:











Fisa de documentare 0_portofoliu.pdf
Fise de lucru (in echipa2 elevi)0bilete proiect.pdf
Proiectul unitatii de invatare:0_ui_xii.pdf
Multimedia:0_prezentare.pptx
 SOFT EDUCATIONAL UTILIZAT PENTRU PREDAREA LECTIEI:
Indicatii rezolvare proiect:
Ora 1: 
- se creaza folderul cerut si continutul acestuia dupa modelul urmator



-in prima pagina se rezolva urmatoarele cerinte:
Texte- Se vor folosi formatari pentru text: 

  • - fontul textului cu atributele corespunzatoare tagului 
  • - text bold 
  • - text italic 
  • - text mărit 
  • - text micsorat 

O linie cu atributele corespunzatoare tagului 
Fundalul paginilor site-ului: 
-colorat 
-cu o imagine de fundal Imagini 




Elemente de organizare 
- se arhiveaza directorul si se posteaza pe grupul clasei


Planificare proiectului
A.      Data începerii activităţilor la proiect: 19.11-24.11.2017
B.      Durata efectuarii proiectului: 4 ore
C.      Data finalizarii proiectului:
D.      Competenţe vizate / implicate în realizarea / execuţia proiectului
-          Utilizează resurse Web şi tehnologii pentru realizarea site-urilor Web
-          Formatează elementele de conţinut ale site-ului cu ajutorul software-ului specific.

joi, 2 noiembrie 2017

SI 1.11-4.11.2017

Pagini web - design

1. Modelul client-server
2. Limbajul HTML
3. Elemente HTML pentru formatarea textelor
4. Recapitulare

5. Liste
6. Tabele
7. Elementul TABLE. Prezentarea detaliată a unor atribute
8. Elementul TD
9. Imagini. Elementul IMG
10. Hiperlegături
11. Caractere speciale. Mod de introducere
12. Evaluare sumativă


Lista celor mai utilizate taguri HTML impreuna cu atributele lor

In tabelul urmator vor fi prezentate cele mai utilizate tag-uri impreuna cu cele mai importante atribute ale lor:

Nume tagNume atributValoare atributDetalii
<A>Ancora
hrefURLAdresa catre care vrem sa fie legatura
target_blank
_self
_parent
_top
Fereastra in care se va face afisarea
<B>Text bold
<BODY>Cuprinsul documentului
backgroundadresa imaginiiImaginea de fond
bgcolorcod culoare
nume culoare
Culoarea fondului
leftmarginprocent din
latimea paginii
numar de pixeli
Distanta dintre marginea din stanga a
ferestrei browserului si marginea din
stanga a paginii
topmarginprocent din
inaltimea paginii
numar de pixeli
Distanta dintre marginea de sus a
ferestrei browserului si marginea de sus
a paginii
textcod culoare
nume culoare
Culoarea textului
alinkcod culoare
nume culoare
Culoarea legaturilor active (atunci cand
mouse-ul se afla deasupra lor)
linkcod culoare
nume culoare
Culoarea legaturilor nevizitate (nu s-a
efectuat nici un click pe ele)
vlinkcod culoare
nume culoare
Culoarea legaturilor vizitate
(s-a efectuat cel putin un click pe ele)
<BR>Sfarsitul randului
<CENTER>Afisarea in centrul paginii
<FONT>Fontul textului
colorcod culoare
nume culoare
Culoarea fontului
facenume fontTipul fontului
sizeun numar
de la 1 la 7
Marimea fontului
<FORM>Formular interactiv
actionURLAdresa scriptului care prelucreaza datele
din cadrul formularului
methodGET
POST
Metoda de prelucrare a datelor
formularului
<FRAME>Cadru (fereastra)
frameborder1 sau 0Cadrul are sau nu are chenar
marginheightnumar de pixeliSpatiu deasupra si sub un cadru
marginwidthnumar de pixeliSpatiu la stanga si la dreapta unui cadru
srcURLSursa cadrului
<FRAMESET>Multime de ferestre
colsprocent din
latimea paginii
numar de pixeli
numarul si marimea relativa a coloanelor
rowsprocent din
inaltimea paginii
numar de pixeli
numarul si marimea relativa a randurilor
H1, H2, H3,
H4, H5, H6
Titluri in cadrul documentului
alignleft
center
right
justify
Alinierea titlului
<HEAD>Antetul documentului
<HR>Linie orizontala
alignleft
center
right
Alinierea orizontala a liniei
colorcod culoare
nume culoare
Culoarea liniei
sizenumar de pixeliInaltimea liniei
widthprocent din
latimea paginii
numar de pixeli
Latimea liniei
<HTML>Document HTML
<I>Text italic
<IMG>Adaugarea unei imagini
alignleft
right
top
middle
bottom
Alinierea imaginii in pagina: left (stanga)
sau right (dreapta)
Alinierea elementelor din jurul imaginii:
top (sus), middle (mijloc), bottom (jos)
alttextText ce va fi afisat in locul imaginii, in
cazul in care, aceasta nu este afisata
bordernumar de pixeliMarimea chenarului din jurul imaginii
heightprocent
numar de pixeli
Inaltimea imaginii
hspacenumar de pixeliSpatiu pe orizontala in jurul imaginii
srcURLAdresa imaginii
vspacenumar de pixeliSpatiu pe verticala in jurul imaginii
widthprocent
numar de pixeli
Latimea imaginii
<INPUT>Element al formularului
maxlengthnumarNumar maxim de caractere
namedate de tip
caracter
Numele elementului formularului
sizenumarMarimea elementului formularului
srcURLAdresa pentru o imagine
typetext
password
checkbox
radio
submit
reset
file
hidden
image
button
Tip input
valuedate de tip
caracter
Valoare input
<LI>Element al unei liste
<META>Metainformatii
contenttextDescrie valoarea atributului name
nameauthorAutor
descriptionDescriere
keywordsCuvinte cheie
<OL>Lista ordonata
startnumarCu ce valoare incepe numerotarea
typeA, a, I, i, 1Tipul numerotarii: A, a, I, i, 1 (implicit)
<P>Paragraf
alignleft
center
right
justify
Alinierea paragrafului
<SELECT>Lista de selectii
multiplePermite selectia mai multor elemente
namedate de tip
caracter
Numele listei de selectii
sizenumarNumarul de elemente ale listei
<STRONG>Text evidentiat
<SUB>Text indice
<SUP>Text exponent
<TABLE>Tabel
alignleft
center
right
Alinierea tabelului
backgroundURLImaginea de fond pentru tabel
bgcolorcod culoare
nume culoare
Culoarea fondului pentru tabel
borderprocent
numar de pixeli
Chenarul tabelului
bordercolorcod culoare
nume culoare
Culoarea chenarului
cellpaddingnumar de pixeliSpatiu intre continutul celulelor tabelului si
marginile lor
cellspacingnumar de pixeliSpatiu intre celulele tabelului
colsnumarNumarul de coloane ale unui tabel
hspacenumar de pixeliSpatiu pe orizontala in jurul tabelului
vspacenumar de pixeliSpatiu pe verticala in jurul tabelului
widthprocent
numar de pixeli
Latimea tabelului
<TD>Celula de tabel
alignleft
center
right
Alinierea continutului celulei pe orizontala
backgroundURLImaginea de fond pentru celula
bgcolorcod culoare
nume culoare
Culoarea fondului pentru celula
colspannumarNumarul de coloane pe care se intinde
celula
heightnumar de pixeliInaltimea celulei
rowspannumarNumarul de linii pe care se intinde celula
valigntop
middle
bottom
Alinierea continutului celulei pe verticala
widthnumar de pixeliLatimea celulei
<TEXTAREA>Camp de editare multilinie
colsnumarNumarul de coloane
namedate de tip
caracter
Numele campului de editare multilinie
rowsnumarNumarul de randuri
<TITLE>Titlu document
<TR>Rand tabel
alignleft
center
right
Alinierea continutului celulelor
pe orizontala
bgcolorcod culoare
nume culoare
Culoarea fondului pentru tot randul
valigntop
middle
bottom
Alinierea continutului celulelor pe verticala
<U>Text subliniat
<UL>Lista neordonata
typecircle
disc
square
Forma marcajului

vineri, 20 octombrie 2017

Si 16.10-20.10

slide9
  • Cadrele ne permit sa afisam doua sau mai multe pagini web, în acelasi timp, prin împartirea ecranului în mai multe sectiuni independente. Initial, cadrele au fost o inovatie a firmei Netscape dar pe parcurs ele au fost folosite din ce în ce mai mult si tot mai multe browsere le-au acceptat.Ele reprezinta o metoda controversata de machetare a unei pagini web. În rîndul web-designerilor exista sustinatori si adversari ai folosirii cadrelor ca o solutie eficienta de aranjare în pagina. De aceea, înainte de a ne hotarî asupra folosirii cadrelor în situl nostru, analizam modul cum dorim sa organizam si sa structuram paginile web. Folosirea cadrelor prezintaatît avantaje cît si dezavantaje.
Soft educational

marți, 3 octombrie 2017

SI: 2.10-6.10

| HTML | Tag-uri HTML  | Lectii AEL pentru TIC si Programare | HTML + CSS | Galerie foto - exemplu Flash |Test online - HTML | 

Structura unui site Web
- Tipuri de site-uri Web: statice (de informare), dinamice/ interactive (e-commerce, e-learning, e-banking etc.)
- Structura unei pagini din cadrul unui site Web. Elemente specifice publicării şi regăsirii site-ului în cadrul motoarelor de căutare.


slide2
  • Paginile staticesunt formate din text, imagini şi tag-uri HTML pentru formatare. Aceste pagini sunt create şi întreţinute manual, astfel că dacă informaţiile se modifică şi pagina trebuie modificată. Aceasta implică încărcarea paginii într-un editor, realizarea modificărilor, reformatarea textului dacă este necesar şi apoi salvarea fişierului. Aceste operaţii necesită foarte mult timp dacă numărul paginilor care trebuie actualizate este mare.
  • Paginile dinamiceconţin foarte puţin text. În schimb extrag informaţiile necesare din alte aplicaţii. Paginile dinamice pot comunica cu bazele de date, foi de calcul tabelar, sisteme de gestiune a bazelor de date client-server şi multe alte aplicaţii.
slide3
Crearea paginilor Web dinamice permite crearea de aplicaţii puternice, care pot include caracteristici precum următoarele:
  • interogarea aplicaţiilor de baze de date existente pentru obţinerea datelor
  • crearea de interogări dinamice care facilitează obţinerea în mod flexibil a datelor
  • execuţia procedurilor stocate
  • execuţia codului condiţional on-the-flypentru a personaliza răspunsurile în funcţie de situaţiile specifice
  • sporirea capabilităţilor formularelor HTML standard prin folosirea unor funcţii de validare
  • popularea în mod dinamic a elementelor din formulare
  • personalizarea modului de afişare a informaţiilor legate de dată, timp şi monedă folosind funcţii de formatare
  • uşurarea creării aplicaţiilor de introducere a datelor prin wizards
  • generarea automată de email
  • site-uri comerciale şi coşuri electronice de cumpărături
slide4
E-learning-este un tip de învățământ care se înfăptuiește prin intermediul Internetului. Web-siteurile care pot fi sub forma de: web-manuale(cărți electronice), web-cursuri(cursuri virtuale), web-teste s.a.
  • Prin comerț electronic (e-comert) se subânțelege orice formă de înțelegeri cu privire la afaceri, la care conlucrarea între părți are loc în mod electronic în loc de schimb sau contact fizic între părți și în urma căreia dreptul de utilizare sau proprietate a mărfii sau serviciului este transmis de la o persoana la alta.
  • E-bankingpresupune: plăţi în lei şi valută, plăţi planificate (la termen sau recurente) sau schimb valutar, deschidere de conturi sau de carduri, administrarea portofoliului de credite, plăţi cu telefoane inteligente etc.
slide5
2 . Structura unei pagini din cadrul unui site web (unui document HTML). Elemente specifice publicării si regăsirii site-ului în cadrul motoarelor de căutare
slide6
Conţinutul unui site este foarte important pentru motoarele de căutare, fiind definitoriu în obţinerea unei clasări cât mai bune. De aceea trebuie să-i acordaţi acestuia o atenţie sporită, ţinând cont de următoarele aspecte:
  • Fiecare pagină web trebuie să aibă titlu descriptiv şi nu „pagina1”, „unknown”, „new” etc.
  • Nu trebuie să existe pagini web care să nu aibă text. Dacă sunt prezentate imagini, trebuie să existe măcar denumirile imaginilor. Ar fi binevenită o descriere a imaginilor, cu ajutorul atributului ALT.
  • Nu folosiţi text de diferite mărimi şi prea multe culori.
  • Conținutul trebuie să fie original! Nu copiaţi informații de pe alte site-uri, deoarece materialul duplicat va fi penalizat.
  • Asiguraţi-vă că stăpâniţi gramatica. Evitaţi scrierea neglijentă pe site, cu greşeli de ortografie şi mai ales folosirea limbajului de Messenger, gen „k”, „nashpa”, „dc” etc.
  • Folosiţi pe cât posibil tastatura în limba română şi diacriticele (ă, î, â, ş, ţ).
  • Motoarele de căutare au învățat să afișeze rezultatele căutării chiar dacă căutarea se face după cuvinte fără diacritice.
3 elemente de con inut ale paginilor web
3. Elemente de conţinut ale paginilor web
  • O pagina web poate conţine următoarele elemente: texte, tabele, liste, imagini, hărţi de imagini, sunete, animaţie, cadre, filme, butoane, casete de dialog, casete combinate, ferestre, texte.
slide8
  • Meniul este o reprezentare grafica sau de tip text a continutului si este adesea încorporat în tema generala a sitului. Meniul principal trebuie sa furnizeze trimiteri rapide si directe la sectiunile si informatiile disponibile dintr-un site web. El va fi realizat într-o forma practica si atractiva. Locul obisnuit pentru plasarea meniului principal este în partea stânga a ecranului dar el mai poate fi plasat si în partea dreapta sau în partea superioara a paginii web. Sectiunile meniului vor fi denumite astfel încât sa ofere o descriere concisa si sugestiva a paginilor web care vor fi accesate.
  • Cîteva dintre schemele de navigare cele mai des întîlnite sunt urmatoarele :
  • legaturi text
  • harti grafice ( imagemaps )
  • butoane de navigare
  • meniuri tip lista derulanta ( generate cu Javascript , CGI )
  • pagini generate dinamic
  • harta sitului ( site map )
  • De multe ori, începatorii si chiar netsurferii mai versati se pot încurca atunci cînd folosesc un sistem de navigare mai complicat. Din aceasta cauza, se recomanda de realizat si o pagina web continînd o harta a sitului. Pentru ca harta sa poata fi gasitausor e de dorit de pus o legatura directa catre aceasta în fiecare meniu de navigare. Aceasta harta este utila si atunci cînd se dorestecautarea rapida a unei informatii sau a unui subiect, fara a fi nevoie sa se navigheze prin tot situl. Ea trebuie sa fie clara si logica si în acelasi timp sa afiseze corect structura sitului. Mai poate fi realizata sub forma de tabel, arbore de legaturi,etc.Cheia pentru o navigare usoara este o buna organizare. Cu cît situl va fi mai mare si mai complex, cu atît va fi mai dificila sarcina organizarii acestuia si realizarii unui sistem de navigare consistent.
slide9
  • Cadrele ne permit sa afisam doua sau mai multe pagini web, în acelasi timp, prin împartirea ecranului în mai multe sectiuni independente. Initial, cadrele au fost o inovatie a firmei Netscape dar pe parcurs ele au fost folosite din ce în ce mai mult si tot mai multe browsere le-au acceptat.Ele reprezinta o metoda controversata de machetare a unei pagini web. În rîndul web-designerilor exista sustinatori si adversari ai folosirii cadrelor ca o solutie eficienta de aranjare în pagina. De aceea, înainte de a ne hotarî asupra folosirii cadrelor în situl nostru, analizam modul cum dorim sa organizam si sa structuram paginile web. Folosirea cadrelor prezintaatît avantaje cît si dezavantaje.
slide10
  • Tabelele sunt folosite atît pentru o machetare eficienta cît si pentru a face mai atractive diversele elemente componente ale unei pagini web. Ele permit o împartire a paginii în sectiuni si o pozitionare precisa a textului sau imaginilor în interiorul paginii.Putem crea margini sau borduri de diferite dimensiuni si culori. De asemenea, se poate încapsula continutul în celulele tabelului pentru a permite alinierea textului si a limita lungimea liniilor. De oarece, bordura tabelelor nu este totdeauna necesara si uneori poate avea un aspect neplacut, se poate renunta la ea prin folosirea atributului "BORDER = 0". Atunci cînd folosim tabele, putem sa setam o latime fixa, în pixeli, sau o latime relativa la dimensiunea ecranului, în procente. De exemplu, daca folosim atributul WIDTH=80%, continutul va fi afisat pe 80% din latimea ecranului. În acest caz, afisareacontinutului se adapteaza mai usor la diferitele tipuri de monitoare sau rezolutii ale acestora. Setarea latimii în procente se face mai ales la paginile unde exista mult text si unde nu este necesara o formatare precisa. Pe de alta parte, tabelele definite cu o latime fixa în pixeli vor ramîne neschimbate. În acest caz, daca se foloseste o rezolutiemarita va apare un spatiu alb, în afara tabelului care va da uneori o imagine neplacuta. În schimb, setarea unei latimi fixe va permite un control ridicat al printarii, realizînd o tiparirefara întreruperi laterale ale paginii web respective.
4 ierarhia paginilor n cadrul site ului web sistemul de link uri pagina de start
4. Ierarhia paginilor în cadrul site-ului web. Sistemul de link-uri, pagina de start
  • Din punct de vedere al structurii, există mai multe tipuri de site-uri:
  • site-uri liniare alcătuite dintr-o singură pagină – sunt utilizate când informaţiile sunt sub formă de text, care se poate împărţi firesc în secţiuni mai mici; de obicei la începutul paginii există o listă de legături interne (ancore), care conduc vizitatorul la secţiunea care îl interesează;  
  • site-uri liniare formate din mai multe pagini – sunt utilizate când informaţiile prezentate urmează într-o ordine secvenţială, de la început la sfârşit; fiecare pagină trebuie să conţină legături cu pagina anterioară, cu pagina următoare, cu prima pagină a site-ului; prima pagină a site-ului este indicat să conţină cuprinsul pentru a asigura saltul direct la o anumită pagină; pentru o navigare comodă, este indicat ca paginile să nu depăşească un ecran;  
  • site-uri cu structură ierarhică – în acest caz, există prima pagină a site-ului (home), de nivel zero; ea conţine legături către alte pagini, de nivel unu; acestea la rândul lor pot avea legături către alte pagini, de nivel doi, ş.a.m.d.; în cazul acestui tip de site-uri, este  
  • indicat să fim atenţi la organizarea logică şi fluentă a site-ului; fiecare pagină trebuie să aibă o legătură către pagina principală; 
  • site-uri cu structură de tip reţea – sunt site-uri care au o structură liberă; acestea sunt alcătuite din mai multe pagini, fiecare pagină poate avea legătură cu orice altă pagină; este recomandat un astfel de site pentru subiectele care nu au o structură logică internă; este important ca fiecare pagină să aibă, pe lângă legăturile către alte pagini, şi o  legătură către prima pagină a site-ului.
slide12
  • În general, prima pagină a site-ului (pagina home) stabileşte cui aparţine site-ul, descrie scopul site-ului, descrie structura acestuia (are şi funcţia de cuprins al site-ului), furnizează informaţii de contact, stabileşte relaţiile între paginile de nivel unu şi cele subordonate lor (cu ajutorul barelor de navigare, butoanelor, listelor de legătură sau a hărţilor de imagine).
  • Este foarte important ca în prima pagină a site-ului să accentuăm ceea ce site-ul nostru oferă de valoare utilizatorilor şi cum diferă serviciile noastre de cele ale principalilor concurenţi.
  • Această pagină va avea un aspect diferit faţă de celelalte pagini din site şi nu va depăşi dimensiunile unui ecran.
  • Elementele care trebuie să atragă atenţia vor fi plasate în partea de sus a acestei pagini.
  • Pe pagina de început vom prezenta toate opţiunile importante, astfel încât vizitatorii să nu fie nevoiţi să ajungă pe paginile de pe nivelul unu şi doi pentru a găsi toate opţiunile site-ului.
  • Accesul la pagina de start va fi asigurat din orice pagină a site-ului, prin intermediul logo-ului şi/sau printr-un link separat numit „Home”.
  • Este o regulă care spune că niciodată nu trebuie să legăm un punct de el însuşi, deoarece dacă utilizatorul nu este atent unde este, el va fi confuz unde a ajuns, şi în plus va fi o pierdere de timp pentru el să ajungă în acelaşi loc. Acest lucru este valabil şi pentru pagina home.
  • Pe prima pagină este necesar întotdeauna să promovăm ultimele articole scrise sau ultimele produse oferite, facilitând accesul către „nou” pe homepage.
slide13
  • În cazul în care, subiectul tratat în cadrul site-ului este vast, paginile de nivelul unu este bine să nu fie încărcate, detalierea urmând a o realiza în cadrul paginilor de nivel doi. Paginile de nivel unu este bine să conţină descrierea subiectului tratat, precum şi legăturile către paginile de pe nivelul doi, pagini care vor detalia subiectul respectiv. O tehnică des utilizată, este plasarea în paginile de pe nivelul trei a unor informaţii suplimentare. Prin utilizarea acestei tehnici, paginile de pe nivelul doi nu vor fi încărcate.
  • Vom realiza templat-uri care să conţină acelaşi tip de elemente pentru toate paginile. Ele vor fi folosite drept tipare în momentul scrierii codului HTML pentru paginile respective.
slide14
Navigarea în cadrul site-urilor este posibilă cu ajutorul link-urilor (legăturilor). Pentru a folosi legături în paginile web pe care le vei face, trebuie să foloseşti perechea de tag-uri <A> si </A>. Numele acestor tag-uri vine de la cuvântul anchor care se traduce ancora.
  • Tag-ul <A> va trebui folosit împreună cu atributul HREF.<A HREF=numelepaginii.html>Textul legăturii</A>Dacă pagina respectivă se află în acelaşi folder cu pagina pe care se afla legătura atunci nu sunt necesare ghilimelele
slide15
  • <HEAD><TITLE>Legături</TITLE></HEAD>
  • <BODY>
  • <CENTER><B>Legatura catre o alta pagina </B>
  • <BR><BR>
  • <A HREF=imagini.html>Imagine bebe</A>
  • </CENTER>
  • </BODY>
  • </HTML>
slide17
Formă generală a unei legături către o adresă de e-mail este următoarea: <A HREF="mail to:adresă de e-mail">Trimite-mi un e-mail</A>Pentru a folosi o imagine că legătura între tag-urile <A> si </A>, va trebui scrisă adresă imaginii: <A HREF=nume pagina.html><IMG SRC="adresă imaginii"</A>
  • Fiecarelegătura din cadruluneipagini web are treiculori: • o culoarepentrulegăturilenevizitate (nu a fostefectuatnici un click peele) • o culoarepentrulegăturilevizitate (s-a efectuatcelputin un click peele) • o culoarepentrulegăturile active (atuncicândcursorul mouse-ului se aflădeasupralor)
5 criterii considerate la realizarea documentelor web viteza de nc rcare raport text imagine
5. Criterii considerate la realizarea documentelor Web: viteza de încărcare, raport text/imagine.
  • Viteza de incarcarea site-ului este foarte importanta din punct de vedere al procesului de optimizare site, pentru ca in functie de durata de incarcare un numar mai mare sau mai mic de vizitatori acceseaza paginile web. Iar numarul vizitatorilor sporeste rezultatele campaniilor SearchEngineOptimization (SEO) si motoarele de cautarepozitioneaza site-ul, printre altele, si dupanumarul de accesari.
  • Statisticile arata ca majoritatea vizitatorilor parasesc un site dupa 6-15 secunde de la accesare, in conditiilein care acesta intazie sa se incarce. Pentru a reduce cat mai mult posibil confruntarea cu astfel de situatii trebuie sa verifici periodic timpul de incarcare al fiecarui element al site-ului si sa previi posibilele probleme sau elementele care ar putea ingreunaincarcarea paginilor web. De regula fisierele care contin clipuri sau fotografii, imagini in format mare atrag dupa sine probleme la viteza la incarcare. Mare grija cand le utilizezi pe acestea! Este de preferat sa nu te complici cu utilizarea lor pentru a nu diminua viteza de incarcare a paginilor web.
  • De asemenea, este important sa optimizezi fiecare fisier si pagina in parte folosind diferite unelte pe care vastul domeniu online ti le pune la dispozitieatat in sistemul cu plata, cat si gratuit.
slide19
6.Cerinţe de prezentare a informaţiilor prezentate îndocumentele Web: de conţinut, acurateţe, lizibilitate, de design, conformitate cu cerinţele proiectului.
Conţinutultrebuie sa fie
  • Pertinent
  • Diversificat
  • Actualizat
  • Dinamic
  • Interactiv.
  • Lizibilitate este definita causurinta cu care un document poate fi citit.Cea mai buna combinatie de lizibilitate pentru site este text negru pe fundal alb, dar exista si alte combinatii de asemenea, excelente. In afara de alb, alte culori eficiente pentru fundal, sunt culorile albastru inchis, gri si negru. Evitati culori light, pentru lizibilitate. Anumite informatii pe care trebuie sa fie aduse in atentia vizitatorilor poate fi evidentiat prin culoare, acest lucru imbunatateste si poate ajuta la reducerea de oboseala vizuala.Un factor important in dezvoltarea unui site web este utilizarea de diferite culori pentru hyperlink-uri, in scopul de a ajuta utilizatorii sa distinga intre paginile pe care le-au vizitat deja si pagini nevizualizate inca.
Putem prezenta câteva sugestii legate de grafică şi imagini:
  • Este bine să limităm folosirea acestora în paginile site-ului.
  • Grafica nu trebuie să arate ca bannerele publicitare.
  • Imaginile pe care vom folosit în site, trebuie să exprime clar mesajul dorit şi să nu le utilizăm doar pentru că “dă bine”.
  • Vom folosi imaginile pentru a facilita învăţarea.
  • Putem folosi imagini simple pentru background.
  • Este indicat să folosim logo-uri.
  • Site ul trebuie sa fie o dozare a necesarului de vizual, continut si accesibilitate!
STRUCTURA DOCUMENTULUI HTML
  • Limbajul HTML – elemente de baza  (Fisa de lucru html 1.doc)
  • Limbajul HTML – organizarea textului (Fisa de lucru html 2.doc)
  • Limbajul HTML – introducerea legaturilor (Fisa de lucru html 3.doc)
  • Limbajul HTML – inserarea imaginilor (Fisa de lucru html 4.doc)
  • Limbajul HTML – Tabele 2 (Fisa de lucru html 6.doc)
  • Limbajul HTML – Tabele 2 (Fisa de lucru html 6.doc)
  • Limbajul HTML – Tabele 1 (Fisa de lucru html 7.doc)
  • Aplicatii tabele – Orarul clasei
  • Cadre (Fisa de lucru html 8.doc)
  • Realizarea unui proiect
  • Prezentarea proiectului
       FISE DE LUCRU: