PROGRAM DE CONVERSIE PROFESIONALĂ Specializarea: Informatică – Tehnologia informației și a comunicațiilor LUCRARE DE DIPLOMĂ GALAȚI 2019… [307324]

UNIVERSITATEA „DUNĂREA DE JOS” DIN GALAȚI

DEPARTAMENTUL DE FORMARE CONTINUĂ

ȘI TRANSFER TEHNOLOGIC

PROGRAM DE CONVERSIE PROFESIONALĂ

Specializarea: Informatică – Tehnologia informației

și a comunicațiilor

LUCRARE DE DIPLOMĂ

GALAȚI

2019

UNIVERSITATEA „DUNĂREA DE JOS” DIN GALAȚI

DEPARTAMENTUL DE FORMARE CONTINUĂ

ȘI TRANSFER TEHNOLOGIC

PROGRAM DE CONVERSIE PROFESIONALĂ

Specializarea: Informatică – Tehnologia informației

și a comunicațiilor

Site informatic de prezentare.

Magazin virtual

Food like home mother

utilizând HTML5, CSS3 și JavaScript

Galați

2019[anonimizat], pentru programul de conversie „Informatică – Tehnologia informației și a comunicațiilor” [anonimizat], [anonimizat]. Declar că nu am folosit în mod tacit sau ilegal munca altora și că nici o [anonimizat]. Declar că lucrarea nu a mai fost prezentată sub această formă vreunei instituții de învățământ superior în vederea obținerii unui grad sau titlu științific ori didactic.

Semnătura, ___________________________

[anonimizat]-o societate informatizată. [anonimizat], [anonimizat]-[anonimizat], Internet, la examenele pentru permisul de conducere sau alte examene pentru diferite domenii oricare ar fii acestea și multe alte. [anonimizat].

Clientul care a solicitat aplicația dorește să o folosească pentru un magazin cu vânzări on line de mâncare cu posibilitatea de a gestiona și particulariza produsele oferite spre vânzare clienților din mediul on line.

[anonimizat], acest lucru putând fi luat în
considerare la o dezvoltare ulterioară. Totuși, [anonimizat] (taxă de conectare la serviciu + taxă lunară de procesare a plăților + comision din
încasări) cât și din partea consumatorului (taxă de conectare la serviciu + taxă lunară de
administrare cont) consider că implementarea unui astfel de sistem nu ar aduce beneficii
suplimentare considerabile pentru aplicație. [anonimizat],
[anonimizat], [anonimizat].

Capitolul 1. Analiza

În vederea realizării acestei aplicații s-a ținut cont de câteva aspecte importante: realizarea unor interfețe pentru utilizator atractive și bogate din punct de vedere al informației diverse: text, imagini, sunet; pagini Web interactive bazate pe controlul evenimentelor; consistența și integritatea datelor manipulate; performanțele din punct de vedere al accesului la baza de date; accesul simultan la bazele de date;

Această aplicație pune la dispoziția utilizatorului o gamă variată de informații privitoare la modul de folosire a produselor, principalele de produse vândute, oferte la anumite produse.

Clientul care a solicitat aplicația dorește să o folosească pentru un magazin cu vânzări on line cu posibilitatea de a gestiona și particulariza produsele oferite spre vânzare. Astfel clientul aplicației trebuie să poată modifica ușor produsele, să promoveze produse noi, să poată adăuga sau șterge din produsele vândute. Acest lucru s-a dorit a fi realizat printr-un cont separat de admin care să poată oferi anumite drepturi celui care deține aplicația. De asemenea această aplicație pune la dispoziție utilizatorului un dialog cu privire la produsele vândute, care se realizează prin votarea unui anumit produs sau prin enumerarea unor observații .

Cerințe și specificații

1.1.1 Specificarea cerințelor

Sistemul a fost solicitat de persoana care deține SC Magic Tea și trebuie să îndeplinească următoarele cerințe:

prezentarea produselor

comandarea de produse în mediul online,

zona de administrare va permite adăugarea, modificarea sau ștergerea datelor.

Site-ul trebuie să fie compatibil cu toate versiunile de browsere, în special Microsoft Internet Explorer și FirefoxMozilla. Probleme apar în special la afișarea fonturilor în diferite browsere. Fonturile Arial și Verdana sunt afișate în ambele browsere, fiind cel mai des folosite. Nu este recomandat folosirea unor fonturi mai puțin folosite.

1.1.2. Specificații

Solicitări de date

Date de intrare – ieșire pentru sistem și interfața site-ului este concepută să ruleze optim pe o placă grafică ce suportă minim o rezoluție de 800X600, o adâncime a culorii de 16 biți și folosirea opțiunii Small Fonts; interfața poate fi rulată atât sub Windows 95/98/Me/NT/2000/XP cât și sub sistemele Linux.

Date memorate în sistem

13 tabele în baza de date ceai.sql

Restricții

Configurație minimă echipament hardware: calculator Pentiun 233 Mhz, card grafic 2D cu min. 8 Mb video RAM.

Memorie internă: 64 Mb RAM

Memorie externă: 100 Mb liberi pe hard disk, CD-ROM

Sistem de operare: Windows ME/2000/XP, Linux

Limită de răspuns: 5 sec. pentru încărcarea unei pagini a site-ului (la 8 Mb video RAM), 10 sec. pentru afișarea unei interogări ale bazelor de date (existente pe același hard disk)..

Fiabilitate solicitărilor: sistemul nu trebuie să se blocheze mai des de 6 luni.

Modul de operare al întregului sistem trebuie să fie la nivelul unui utilizator PC cu pregătire medie.

Capitolul 2. Concepție și proiectare aplicație

2.1 Protocolul HTTP

Aplicația FoodOnline este o aplicație care va rula în rețeaua www, un sistem bazat pe hipermedii, care oferă utilizatorilor un mijloc simplu, de tip „indicare și clic” de răsfoire a informațiilor pe Internet, folosind hiperlegăturile.

Informațiile prezentate în rețeaua Internet iau forma paginilor Web, care reprezintă o colecție de texte, grafică, desene, imagini. De asemenea o pagină Web poate conține hiperlegături către alte pagini Web, care permit utilizatorilor să navigheze prin informații în mod nesecvențial.

Rețeaua Web este alcătuită dintr-o rețea de calculatoare cu dublu rol: de a furniza informații cum sunt serverele și de a cere informații – clienți.

Stocarea informațiilor de pe Web se realizează folosind limbajul denumit HTML (Hyper Text Markup Language – limbajul de marcare pentru hipertext), pe care browserele trebuie să-l înțeleagă și să-l interpreteze pentru afișarea informației solicitate. HTTP (Hypertext Transfer Protocol – protocol de transfer al hipertextului) este un set de reguli care reglementează schimbul de informații dintre web și browser. Documentele și locațiile din cadrul acestora sunt identificate printr-o adresă, definită ca un localizator de resurse uniform URL (Uniform Resource Locator – adrese numerice sau de tip text ale unor date specifice de pe Internet).

2.2 Creare și structura HTML

HTML (Limbajul de Marcare a Hipertextului) oferă o înfățișarea Web-ului el constând dintr-o mulțime de etichete (tags), care pot fi folosite la orice, de la definirea tipurilor de stil și a anteturilor și până la introducerea conținutului specific, cum ar fi imagini, sunete, cuvinte în realitatea virtuală și miniaplicații Java.

Pentru crearea acestei aplicații s-a utilizat HTML, CSS – foile de stil, în particular CSS – Cascading Style Sheets, care descriu modul de prezentare a documentelor Web pe ecran, imprimantă sau alte medii și JavaScript. Prezentarea pe Web va fi în acord cu aceste caracteristici ale comportamentului utilizatorilor de Internet, în elaborarea materialului ținându-se cont de câteva sugestii deduse logic:

§ Vizitatorul poate fi ajutat să se orienteze/reorienteze prin introducerea unor organizatori vizuali:

o titluri și intertitluri din pagină simple și clare ce permit o orientare rapidă în conținut;

o titluri de pagină semnificative ce ajută la recunoașterea sitului chiar dacă este minimizat pe task-bar.

§ Designer-ul trebuie să pornească de la premisa că vizitatorul nu își mai amintește pașii de navigare ce l-au adus în fața unui anumit material:

o se dovedește utilă inserarea în antet a unui „fir al Ariadnei” (de exemplu antetul acestei pagini) care indică poziția actuală în succesiunea sau în structura ierarhică a site-ului web;

o păstrarea culorilor standard pentru legăturile active (albastru pentru link-uri nevizitate și roșu închis pentru link-uri vizitate) ușurează orientarea, recunoașterea și structurarea mentală a conținutului informațional ce se parcurge.

§ Folosirea unei terminologii standard elimină timpul suplimentar acordat de vizitator pentru recorelări și circumscrieri de sens la schimbarea rapidă a contextului.

2.3 Cazuri de utilizare

Cazurile de utilizare sunt orientate pe scop: reprezintă ceea ce sistemul trebuie să facă și nu cum. Ele sunt neutre din punct de vedere tehnologic, putând fi utilizate în orice proces sau arhitectură de aplicație.

Diagrama cazurilor de utilizare arata principalele funcții pe care sistemul informatic trebuie să le îndeplinească. Actorii implicați sunt utilizatorul și angajatul.

2.4. Proiectarea bazei de date

Aplicația FoodOnline folosește o bază de date cu mai multe tabele pentru a memora datele sau diferite setări particulare ale aplicației.

Proiectul folosește o bază de date MySQL pentru stocarea informațiilor.

Baza de date conține 3 tabele :

Figură 2.1 Tabel baza da date mesaje.sql

1. Tabelul clienți este folosit pentru stocarea clienților site-ului și conține următoarele câmpuri: numeprenume: Id-ul înregistrării, email: adresa mail utilizator, mesaj: mesaj client.

Figură 2.2 Tabel clienti

2. Tabelul meniu este folosit pentru stocarea tipurilor de produse oferite spre vânzare: platouri reci, sandwich-uri, borș țărănesc; cuprinde :

cod_produs: Id-ul produsului

denumire_produs: numele produsului

cantitate: grămaj produs

pret: prețul produsului

Figură 2.3. Tabel meniu

3. Tabelul utilizatori a fost creat pentru a stoca informații cu privire la utilizatorii înregistrați pe site; cuprinde următoarele câmpuri:

cod_id: Id-ul înregistrării;

nume_client: Numele utilizatorului;

adresa: adresa utilizatorului necasar la livrare comanda

telefon: telefon contact utilizator

Figură 2.4. Tabel utilizatori

Capitolul 3. Implementare

Introducere în HTML

Bottom of Form

HTML (HyperText Markup Language) este un limbaj utilizat pentru crearea paginilor web ce pot fi afișate într-un browser (sau navigator).

HTML este folosit pentru prezentarea unui conținut (text, imagine) într-o pagină web, furnizează mijloacele prin care conținutul unui document poate fi structurat și adnotat cu diverse tipuri de metadate și indicații de redare și afișare. Aceste indicații pot varia de la decorațiuni minore ale textului, cum ar fi culoarea sau sublinierea unui cuvânt ori introducerea unei imagini, până la adăugarea de elemente sofisticate, tabele, hărți de imagini, formulare și cod CSS sau scripturi JavaScript.

Metadatele pot include informații despre titlul și autorul documentului, informații structurale despre cum este împărțit documentul în diferite segmente, paragrafe, liste, titluri etc. și informații esențiale 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 utilizând un editor de text simplu, editarea și înțelegerea paginilor în acest fel necesită cunoștinte de HTML, pe care le puteți obține studiind lecțiile din acest curs.

Exista și editoare grafice, de tip WYSIWYG (What You See Is What You Get – "ceea ce vezi este ceea ce obții"), cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage, care permit ca paginile web să fie tratate asemănator cu documetele Word și generează ele cod HTML pentru conținutul paginii, dar aceste programe generează un cod HTML care este de multe ori prea încărcat și de proastă calitate.

HTML este de asemenea utilizat în e-mail. Majoritatea aplicațiilor de e-mail folosesc un editor HTML încorporat pentru compunerea e-mail-urilor și un motor de prezentare a e-mail-urilor de acest tip.

Bottom of Form

Cu HTML 4.0 au apărut specificațiile pentru modele de stiluri, cunoscute ca Modele de Stiluri în Cascadă (Cascading Style Sheets – CSS). Acestea ajuta la afișarea grafică și încadrarea conținutului în pagină.

Modelele de stiluri pot fi aplicate aproape oricărui element HTML, folosind proprietăți și valori specifice codului CSS, unele din ele sunt prezentate în tabelul de jos al paginii.
Modelele de stiluri pot fi aplicate în mai multe moduri:

1. Intern – direct in eticheta HTML

Pentru adăugarea unui STYLE intern la un element se folosește atributul style urmat de proprietăți și valori, folosind următoarea sintaxă:

<element style="proprietate:valoare; proprietate:valoare;"></element>

Exemplu:

<h4 style="color:#ff1111;">Exemplu h4</h4>

Încercați Codul

2. In antetul (header-ul) fisierului

În acest caz se adaugă în secțiunea HEAD a documentului HTML următoarea sintaxă <style type="text/css"> … </style>. Aceasta spune browser-ului că sunt adăugate elemente de stil CSS.

Aceasta metodă este utilă când se dorește folosirea acelorași stiluri pentru mai multe elemente din pagină astfel sunt scrise o singură dată și nu la fiecare element.

Proprietatile și valorile de stil CSS se introduc în acest element STYLE, după cum puteți vedea în exemplul următor:

<!DOCTYPE html>

<html>

<head>

<title>titlu</title>

<style>

h2 {

color:blue;

text-decoration:underline;

}

</style>

</head>

<body>

<h2>Sunt o persoana buna</h2>

– Fericire.

<h2>Toata lumea e la fel</h2>

</body>

</html>

Conform acestui cod, toate textele "h2" din pagină vor avea culoarea albastra și vor fi subliniate.

3. Extern

– Aici proprietățile și valorile pentru diverse stiluri sunt specificate într-un fișier extern special, de obicei cu extensia "css" (pe care îl putem construi cu un editor de simplu texte gen Notepad).

– Avantajul folosirii fisierelor externe CSS este faptul ca aceleași coduri de stil pot fi folosite de mai multe pagini din site, chiar tot site-ul, fiind scrise o singură dată. În plus ajută la micșorarea ca mărime (in bytes) a documentului HTML care astfel se încarcă mai repede.

– În fișierul extern CSS se scriu direct elementele cu proprietățile și valorile dorite, NU se mai adaugă eticheta "style".

Exemplu de model pentru creare unui fisier ".css" :

Se scrie într-o pagină nouă, deschisă cu NotePad, următoarele, și se salvează fișierul cu extensia ".css"

a:link {

color:#0000ff;

text-decoration:none;

font-weight:normal;

font-size:15px;

font-family: Arial;

}

a:visited {

color:#008080;

}

a:active {

color:#b54090;

text-decoration:underline;

}

a:hover {

color:#b54090;

text-decoration:underline;

}

p {

font-size: 16pt;

line-height: 120%;

text-indent: 20px;

font-family: Calibry;

}

Pentru a adăuga acest stil CSS într-o pagina web, adaugați în secțiunea HEAD a documentului HTML care va folosi acel fisier cu stiluri, (intre <head> … </head>) următoarea comandă:

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

– unde la "href" se scrie calea si numele fisierului css folosit.

Se poate face chiar ca un anumit stil să poata fi aplicat numai unei singure etichete HTML, iar altul să poată fi aplicat mai multor etichete HTML de tipuri diferite. Pentru aceasta se folosește atributul id sau class în interiorul etichetelor HTML la care vrem să aplicăm un anumit stil.

Diferența dintre id și class este faptul că se poate folosi acelasi atribut "class" pentru mai multe elemente HTML, pe cand același "id" se folosește numai pentru un singur element HTML.

Exemplu pentru "class":

<!DOCTYPE html>

<html>

<head>

<title>Titlul</title>

<style>

.cuvant {

color:#1111fe;

dext-decoration:underline;

}

</style>

</head>

<body>

<h2 class="cuvant">Text …</h2>

<h3 class="cuvant">Alt text … </h3>

</body>

</html>

– În exemplu de sus, stilul creat poate fi folosit doar de elementele unde vom adăuga comanda class="cuvant", celelalte elemente nefiind afectate.

Important: selectorul pt. "class" (aici "cuvant") în STYLE trebuie să înceapă cu punct (.)

Exemplu pentru "id":

<!DOCTYPE html>

<html>

<head>

<title>Titlul</title>

<style>

#idh {

color:#fe1111;

ext-decoration:overline;

text-align:center;

}

</style>

</head>

<body>

<h2 id="idh">Text …</h2>

Am o viata fericita.

<h2>Alt text …</h2>

</body>

</html>

În acest exemplu, stilul creat pentru "idh" va fi folosit doar pentru primul element "h2" care conține 'id="idh"'

Important: Pentru stilurile definite de ID, selectorul (aici "idh") trebuie să înceapă cu #.

Procesare & Design

Pentru cine este site-ul?

Fiecare site web ar trebui să fie proiectat pentru publicul țintă – nu numai pentru dvs. sau pentru proprietarul site-ului. Prin urmare, este foarte important să înțelegeți cine este publicul dvs. țintă.

Poate fi util să adresați câteva întrebări despre persoanele despre care v-ați aștepta să fie interesate de subiectul site-ului dvs.

Dacă întrebați un client pentru care este un site, nu este neobișnuit ca ei să răspundă „întregii lumi”.

Realist, este puțin probabil să fie relevant pentru toată lumea. Dacă site-ul dvs. vinde becuri, chiar dacă majoritatea oamenilor care folosesc un computer probabil folosesc becuri, este posibil ca aceștia să nu le comande de la cineva dintr-o altă țară.

Chiar dacă site-ul are un mare interes, puteți să vă gândiți în continuare la datele demografice ale unui eșantion din publicul țintă.

Publicul țintă: persoane fizice

Care este intervalul de vârstă al publicului vizat?

Va adresa site-ul dvs. către mai multe femei sau bărbați? Care este amestecul?

În ce țară locuiesc vizitatorii dvs.?

Locuiesc în zone urbane sau rurale?

Care este venitul mediu al vizitatorilor?

Ce nivel de educație au acestea?

Care este situația lor maritală sau familială?

Care este ocupația lor?

Câte ore lucrează săptămânal?

Cât de des folosesc internetul?

Ce fel de dispozitiv folosesc pentru a accesa webul?

Publicul țintă: companii

Care este dimensiunea companiei sau a departamentului relevant?

Care este poziția persoanelor din companie care vizitează site-ul dvs.?

Vizitatorii vor folosi site-ul pentru ei sau pentru altcineva? Cât de mare este bugetul pe care îl controlează?

De ce oamenii vizitează site-ul dvs.

Acum că știți cine sunt vizitatorii dvs., trebuie să vă gândiți de ce vin. În timp ce unii oameni vor fi pur și simplu pe site-ul dvs. web, cele mai multe vor vizita pentru un anumit motiv.

Conținutul și designul dvs. ar trebui să fie influențate de obiectivele utilizatorilor dvs.

Pentru a vă ajuta să aflați de ce vin oamenii pe site-ul dvs., există două categorii de bază de întrebări pe care le puteți întreba:

1: Primele încercări de a descoperi motivațiile care stau la baza pentru motivul pentru care vizitatorii vin pe site.

2: Cel de-al doilea examinează obiectivele specifice ale vizitatorilor.

Acestea sunt declanșatoarele care le fac să vină pe site acum.

Motivele cheie

Sunt în căutarea unor distracții generale sau au nevoie de un anumit scop?

Dacă există un obiectiv specific, este unul personal sau profesional?

Văd că petrec timpul pe această activitate ca fiind esențial sau un lux?

Obiective specifice

Doresc informații generale / de cercetare (cum ar fi fundal pe un subiect / companie), sau sunt după ceva specific (cum ar fi un anumit fapt sau informații despre un produs)?

Sunt deja familiarizați cu serviciul sau produsul pe care îl oferiți sau trebuie să fie introduși în acesta?

Căutăm informații sensibile din timp, cum ar fi cele mai recente știri sau actualizări despre un anumit subiect?

Vor să descopere informații despre un anumit produs sau serviciu care să îi ajute să decidă dacă să cumpere sau nu?

Trebuie să vă contacteze? Dacă da, pot vizita personal (ceea ce ar putea necesita o oră de deschidere și o hartă)? Sau ar putea avea nevoie de detalii de contact prin e-mail sau telefon?

Ce încearcă vizitatorii dvs. să obțină

Este puțin probabil să puteți enumera toate motivele pentru care cineva vizitează site-ul dvs., dar căutați sarcini și motivații cheie. Aceste informații vă pot ajuta să ghidați desenele site-ului dvs.

Mai întâi doriți să creați o listă de motive pentru care oamenii ar veni pe site-ul dvs. Apoi puteți aloca lista de sarcini vizitatorilor ficționali pe care i-ați creat în etapa descrisă pe pagina anterioară.

Gordon a cumpărat o rachetă de tenis cu câțiva ani în urmă; acum vrea să cumpere unul de pe site-ul tău pentru prietena lui.

Molly a citit despre noul tău serviciu pentru îngrijirea copiilor în presă și dorește să afle dacă ar fi potrivit pentru ea să o folosească.

Jasper a avut o experiență proastă să stea într-un hotel când vizitează Sydney, Australia, și vrea să facă o plângere.

AYO speră să studieze arhitectura și dorește să afle mai multe despre un curs nou care este oferit.

IVY este un editor de imagini și dorește să se uite la site-ul unui fotograf pentru a vedea exemple ale activității sale înainte de a decide dacă îl va comanda.

Ce informații au nevoie vizitatorii dvs.

Știți cine vine pe site-ul dvs. și de ce vin, deci acum trebuie să aflați ce informații au nevoie pentru a-și atinge obiectivele rapid și eficient.

S-ar putea să doriți să oferiți informații suplimentare de sprijin pe care credeți că le-ar putea fi de ajutor.

Uitați-vă la fiecare dintre motivele pentru care oamenii vă vor vizita site-ul și veți determina ce au nevoie pentru a-și atinge obiectivele.

Puteți prioritiza nivelurile de informații din punctele-cheie până la informațiile neesențiale sau de fond.

Asigurându-vă că furnizați informațiile pe care vizitatorii dvs. le caută, acestea vor considera site-ul dvs. mai relevant pentru ele.

Prin urmare, veți avea mai multe oportunități de a le oferi informații suplimentare pe care le considerați utile (sau pentru a le expune altor produse și servicii pe care doriți să le promovați).

Dacă nu par relevante pentru aceștia răspunzând nevoilor lor, cu toate acestea, acestea sunt susceptibile de a merge în altă parte.

Iată câteva întrebări care vă vor ajuta să decideți ce informații să oferiți vizitatorilor site-ului dvs….

Informația cheie

Vizitatorii vor fi familiarizați cu zona dvs. de subiect / brand sau trebuie să vă prezentați?

Vor fi familiarizați cu produsul / serviciul / informațiile pe care îl acoperiți sau care au nevoie de informații de bază despre acesta?

Care sunt cele mai importante caracteristici ale ceea ce oferiți?

Ce este deosebit de ceea ce oferiți, care vă diferențiază de alte site-uri care oferă ceva similar?

Odată ce oamenii au atins obiectivul care le-a trimis pe site-ul dvs., există întrebări frecvente pe care oamenii le întreabă despre acest domeniu?

Cât de des oamenii vor vizita site-ul dvs.

Unele site-uri beneficiază de o actualizare mai frecventă decât altele. Unele informații (cum ar fi știrile) pot fi în continuă schimbare, în timp ce alt conținut rămâne relativ static.

Un site despre tendințele modei va trebui să se schimbe mult mai frecvent decât unul care promovează un serviciu pe care oamenii nu îl cumpără în mod regulat (cum ar fi instalațiile sanitare domestice sau geamurile duble).

Odată ce un site a fost construit, poate dura mult timp și resurse pentru a-l actualiza frecvent.

Elaborarea cât de des este posibil ca oamenii să revadă site-ul dvs. vă oferă o indicație despre cât de des trebuie să actualizați site-ul.

De multe ori poate fi util să stabiliți un program pentru momentul în care un site va fi actualizat (mai degrabă decât să o faceți ad-hoc).

Veți găsi adesea că anumite părți ale unui site vor beneficia de actualizarea lor mai frecvent decât altele.

Iată câteva întrebări care vă ajută să decideți cât de des să actualizați conținutul site-ului dvs. web…

bunuri / servicii

Cât de des se întorc aceleași persoane să cumpere de la dvs.?

Cât de des este actualizat stocul dvs. sau serviciul dvs. a fost schimbat?

Informație

Cât de des este actualizat obiectul?

Care procent din vizitatorii dvs. ar reveni pentru actualizări obișnuite pe această temă, în comparație cu cei care vor avea nevoie doar de informațiile o singură dată?

Harta site-ului

Acum că știți ce trebuie să apară pe site-ul dvs., puteți începe să organizați informațiile în secțiuni sau pagini.

Scopul este de a crea o diagramă a paginilor care vor fi utilizate pentru a structura site-ul. Aceasta este cunoscută ca o hartă a site-ului și va arăta modul în care aceste pagini pot fi grupate.

Pentru a vă ajuta să decideți ce informații ar trebui să se desfășoare pe fiecare pagină, puteți utiliza o tehnică numită sortare a cardurilor.

Aceasta implică introducerea fiecărei informații pe care un vizitator ar trebui să o cunoască pe o bucată separată de hârtie și apoi organizarea informațiilor aferente în grupuri.

Fiecare grup se referă la o pagină și, pe site-uri mai mari, paginile pot, la rândul lor, să fie grupate pentru a crea diferite secțiuni ale site-ului.

Grupurile de informații sunt apoi transformate în diagrama cunoscută sub denumirea de harta site-ului.

Uneori poate fi util să întrebați persoanele care sunt publicul țintă pentru a vă ajuta să grupați împreună informațiile asociate.

O hartă a site-ului va începe, de obicei, cu pagina de pornire.

În plus, dacă site-ul este mare și este compartimentat în secțiuni, fiecare secțiune poate necesita o pagină de pornire a secțiunii proprii pentru a conecta la toate informațiile din cadrul acestuia.

De exemplu, majoritatea magazinelor online au pagini de pornire pentru fiecare tip de produs, care apoi se leagă de paginile individuale ale produselor.

Este posibil să trebuiască să duplicați unele informații dacă trebuie să apară pe mai multe pagini.

Paginile (sau grupurile de pagini) vor informa modul în care utilizatorii navighează pe site.

Nu uitați să vă concentrați asupra obiectivelor pe care doriți să le atingă vizitatorii dvs.

Este demn de remarcat faptul că proprietarul site-ului ar putea organiza informații într-un mod diferit de ceea ce așteaptă publicul. Este important să se reflecte înțelegerea publică a subiectului (mai degrabă decât înțelegerea de către proprietar a site-ului).

Wireframes

Un wireframes este o schiță simplă a informațiilor cheie care trebuie să treacă pe fiecare pagină a unui site. Acesta arată ierarhia informațiilor și cât spațiu ar necesita.

Mulți designeri vor lua elementele care trebuie să apară pe fiecare pagină și vor începe prin crearea de cadre de tip wireframes. Aceasta implică schițarea sau umbrirea în zonele în care va merge fiecare element al paginii (cum ar fi logo-ul, navigația primară, rubricile și corpurile principale de text, datele de conectare ale utilizatorilor etc.).

Prin crearea unui cadru wireframe puteți să vă asigurați că toate informațiile care trebuie să fie incluse pe o pagină sunt incluse.

Nu trebuie să includeți schema de culori, opțiunile pentru fonturi, fundalul sau imaginile pentru site-ul web în cadrul de tip wireframe.

Ar trebui să se concentreze pe ce informații trebuie să fie pe fiecare pagină și să creeze o ierarhie vizuală pentru a indica cele mai importante părți ale fiecărei pagini.

Cadrele de tip wireframe fac designul mai ușor deoarece știți ce informații trebuie să apară pe pagina pe care o doriți înainte de a vă gândi cum ar trebui să arate pagina.

Poate fi foarte util să arătați un cadru clientului unui client înainte de a le arăta un design.

Acesta permite clientului să asigure că site-ul are toate funcțiile și informațiile pe care trebuie să le ofere.

Dacă prezentați un design site-ului unui client, este normal ca aceștia să se concentreze asupra felului în care arată site-ul, ceea ce înseamnă că este posibil să nu ridice probleme legate de funcția acestuia după construirea site-ului.

Figura 3.1. Design site

Obținerea mesajului dvs. folosind Design

Scopul principal al oricărui tip de design vizual este de a comunica. Organizarea și prioritizarea informațiilor pe o pagină îi ajută pe utilizatori să înțeleagă importanța și ce ordine să le citească.

Conținut

Paginile web au adesea o mulțime de informații pentru a comunica.

De exemplu, paginile ziarelor online vor avea informații care nu apar pe fiecare pagină a echivalentului de imprimare:

Un cap de afișaj sau un logo

Linkuri pentru a naviga pe site

Link-uri către conținut și alte articole populare

Autentificare sau opțiuni de membru

Abilitatea utilizatorilor de a comenta

Informații privind drepturile de autor

Legături cu politici de confidențialitate, termeni și condiții, informații publicitare, feeduri RSS, opțiuni de abonament.

Cu atât de mult pe pagină, designerul trebuie să organizeze și să prioritizeze informațiile pentru a-și comunica mesajul și pentru a ajuta utilizatorii să găsească ceea ce caută.

Prioritizarea

Dacă totul de pe o pagină a apărut în același stil, ar fi mult mai greu de înțeles. (Mesajele cheie nu s-ar evidenția.)

Prin a face părțile paginii să pară distincte de conținutul înconjurător, designerii atrag atenția asupra (sau departe de) acele elemente.

Designerii creează ceva cunoscut ca o ierarhie vizuală pentru a ajuta utilizatorii să se concentreze asupra mesajelor-cheie care vor atrage atenția oamenilor și apoi să le îndrume către mesajele ulterioare.

Organizarea

Gruparea împreună a conținutului în blocuri sau bucăți face ca pagina să pară mai simplă (și mai ușor de înțeles).

Utilizatorii ar trebui să poată identifica scopul fiecărui bloc fără a procesa fiecare element individual.

Prin prezentarea anumitor tipuri de informații într-un stil vizual similar (cum ar fi utilizarea aceluiași stil pentru toate butoanele sau toate link-urile), utilizatorii vor învăța să asocieze acel stil cu un anumit tip de conținut.

Figura 3.2.Model site

Ierarhia vizuală

Atenția este îndreptată imediat spre o imagine care arată serviciul pe care această companie îl oferă și un titlu care să o explice. Mărimea și fundalul colorat întăresc faptul că acesta este mesajul principal de pe pagină.

În cazul în care acest serviciu a apelat la utilizator, mai jos pot vedea mai multe detalii despre ceea ce face, cât costă și cine o folosește.

Grupare

Există mai multe bucăți de informații pe această pagină.

În partea de sus puteți vedea logo-ul și navigația. În acest sens sunt informațiile care introduc serviciile companiei.

Mai jos sunt trei grupuri distincte care vă arată ce fac serviciile, costurile implicate și unii dintre utilizatorii serviciilor.

Similitudine

Există câteva exemple de asemănare în cadrul acestei pagini.

Cele patru puncte (în partea stângă jos a ecranului) sunt prezentate în mod similar cu titlurile și pictogramele coerente.

Toate legăturile din textul corpului sunt în albastru, astfel că este clar ce text este clickabil.

Proiectarea navigației

Navigarea pe site nu numai că îi ajută pe oameni să găsească unde doresc să meargă, ci îi ajută să înțeleagă ce este site-ul dvs. și cum este organizat.

Navigarea bună tinde să urmeze aceste principii…

Concis

În mod ideal, navigația ar trebui să fie rapidă și ușor de citit. Este o idee bună să încercați să limitați numărul de opțiuni dintr-un meniu la cel mult opt linkuri. Acestea pot conecta la paginile de pornire ale secțiunilor, care, la rândul lor, fac legătura cu alte pagini.

Clar

Utilizatorii ar trebui să poată prezice tipul de informații pe care îl vor găsi pe pagină înainte de a da clic pe link.

Atunci când este posibil, alegeți cuvinte descriptive unice pentru fiecare legătură, mai degrabă decât fraze.

Selectiv

Navigarea primară ar trebui să reflecte doar secțiunile sau conținutul site-ului. Funcțiile cum ar fi datele de conectare și căutarea, precum și informațiile juridice precum termenii și condițiile și așa mai departe sunt cele mai potrivite în altă parte a paginii.

Un site mare poate avea navigație primară, secundară și chiar terțiară. Navigarea primară apare adesea în partea de sus a site-ului de la stânga la dreapta sau în partea stângă a paginii. Navigarea secundară ar putea fi sub navigația primară sau în partea laterală a paginii. Navigarea terțiară se află adesea în subsolul paginii. Meniul nu va fi singurul mod în care utilizatorii navighează pe site.

De asemenea, vor folosi linkuri în cadrul fiecărei pagini. Unele site-uri oferă, de asemenea, o funcție de căutare.

On-line extra

Accesați site-ul web care însoțește această carte pentru informații despre modul de implementare a funcționalității de căutare pentru site-ul dvs. utilizând Căutarea Google.

Context

Navigarea bună oferă context. Permite utilizatorului să știe unde se află pe site în acel moment. Utilizarea unei culori diferite sau a unui anumit marker vizual pentru a indica pagina curentă este o modalitate bună de a face acest lucru.

Interactiv

Fiecare legătură ar trebui să fie suficient de mare pentru a face clic și aspectul linkului ar trebui să se schimbe atunci când utilizatorul se deplasează peste fiecare element sau dă clic pe el. De asemenea, ar trebui să fie distinct din punct de vedere vizual față de alt conținut de pe pagină.

Consistent

Cu cât mai multe pagini conține un site, cu atât numărul de elemente de navigație va fi mai mare.

Deși navigarea secundară se va schimba de la o pagină la alta, cel mai bine este să mențineți navigația primară exact aceeași.

HTML5 Layout

HTML5 introduce un nou set de elemente care ajută la definirea structurii unei pagini.

Layout-uri HTML tradiționale

Pentru o lungă perioadă de timp, autorii paginilor web au folosit elementele <div> pentru a grupa elementele asociate pe pagină (cum ar fi elementele care formează un antet, un articol, subsolul sau o bara laterală). Autori au folosit atribute de clasă sau id pentru a indica rolul elementului <div> în structura paginii.

Figura 3.3. Structură pagină

În figura 3.3. puteți vedea un layout care este destul de comun (în special pe site-urile de blog). În partea de sus a paginii este antetul, care conține un logo și navigația primară. Sub aceasta se află unul sau mai multe articole sau postări. Uneori acestea sunt rezumate care se leagă de posturi individuale. Există o bară laterală din partea dreaptă (probabil cu o opțiune de căutare, link-uri către alte articole recente, alte secțiuni ale site-ului sau chiar anunțuri). Când codificați un astfel de site, dezvoltatorii ar plasa de obicei aceste secțiuni principale ale paginii în interiorul elementelor <div> și vor folosi atributele de clasă sau id pentru a indica scopul acelei părți a paginii.

Elemente noi ale layout HTML5

HTML5 introduce un nou set de elemente care vă permit să împărțiți părțile unei pagini. Numele acestor elemente indică tipul de conținut pe care îl veți găsi în ele. Ele sunt încă supuse schimbării, dar acest lucru nu a împiedicat mulți autori de pagini web să le folosească deja.

Figura 2 are exact aceeași structură ca cea afișată în figura 1. Cu toate acestea, multe dintre elementele <div> au fost înlocuite cu noi elemente de aspect HTML5.

De exemplu, antetul se află în interiorul unui element <header>, navigarea într-un element <nav> și articolele se află în elemente <article> individuale.

Punctul de creare a acestor elemente noi este ca autorii paginilor web să le poată folosi pentru a descrie structura paginii. De exemplu, software-ul de citire a ecranului ar putea permite utilizatorilor să ignore antetele și subsolurile și să ajungă direct la conținut. În mod similar, motoarele de căutare pot plasa mai multă greutate asupra conținutului într-un element <article> decât cel din elementele <header> sau <footer>. Cred că veți fi de acord că face codul mai ușor de urmat.

Figura 3.4.Structură pagină elemente noi

Tag-uri <header> & <footer>

Elementele <header> și <footer> pot fi utilizate pentru:

Antetul sau subsolul principal care apare în partea de sus sau de jos a fiecărei pagini de pe site.

Un antet sau un subsol pentru un articol <articol> sau <secțiune> în cadrul paginii.

În acest exemplu, elementul <header> este utilizat pentru a conține numele site-ului și navigația principală.

Elementul <footer> conține informații privind drepturile de autor, împreună cu link-uri către politica de confidențialitate și termenii și condițiile.

Fiecare element individual <article> și <section> poate avea propriile elemente <header> și <footer> pentru a ține informațiile antet sau subsol pentru acea secțiune din pagină.

De exemplu, pe o pagină cu mai multe postări de blog, fiecare post individual poate fi considerat o secțiune separată. Prin urmare, elementul <header> poate fi utilizat pentru a conține titlul și data fiecărei postări individuale și <footer> ar putea conține link-uri pentru a partaja articolul pe site-uri de socializare.

<header>
<h1>Yoko's Kitchen</h1>
<nav>
<ul>
<li><a href="" class="current">home</a></li>
<li><a href="">classes</a></li>
<li><a href="">catering</a></li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
</header>

<footer>
© 2011 Yoko's Kitchen
</footer>

Tag-ul <nav>

Elementul <nav> este folosit pentru a conține principalele blocuri de navigare de pe site, cum ar fi navigarea primară a site-ului.

Revenind la exemplul blogului nostru, dacă ați dori să terminați un articol cu linkuri către postări de blog, acestea nu ar fi considerate blocuri de navigație importante și, prin urmare, nu ar trebui să stea în interiorul unui element <nav>.

La momentul redactării, unii dintre dezvoltatorii care utilizează deja HTML5 au decis să utilizeze elementul <nav> pentru linkurile care apar în partea de jos a fiecărei pagini (linkuri către elemente precum politica de confidențialitate, termenii și condițiile și informațiile privind accesibilitatea).

Indiferent dacă acest lucru va fi adoptat pe scară largă, este încă de văzut.

<nav>
<ul>
<li><a href="" class="current">home</a></li>
<li><a href="">classes</a></li>
<li><a href="">catering</a></li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>

Tag-ul <article>

Elementul <article> acționează ca un container pentru orice secțiune a unei pagini care ar putea fi singură și ar putea fi sindicalizată.

Acesta ar putea fi un articol individual sau o intrare de blog, un comentariu sau un mesaj pe forum sau orice alt conținut independent.

Dacă o pagină conține mai multe articole (sau chiar rezumate ale mai multor articole), fiecare articol individual va trăi în interiorul elementului său <article>.

Elementele <article> pot fi chiar imbricate unul în celălalt. De exemplu, o postare pe blog ar putea trăi într-un element <article> și fiecare comentariu despre articol ar putea trăi în interiorul elementului său <child> propriu.

<article>
<figure>
<img src="images/bok-choi.jpg" alt="Bok Choi" />
<figcaption>Bok Choi</figcaption>
</figure>
<hgroup>
<h2>Japanese Vegetarian</h2>
<h3>Five week course in London</h3>
</hgroup>
<p>A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle dishes.</p>
</article>
<article>
<figure>
<img src="images/teriyaki.jpg" alt="Teriyaki sauce" />
<figcaption>Teriyaki Sauce</figcaption>
</figure>
<hgroup>
<h2>Sauces Masterclass</h2>
<h3>One day workshop</h3>
</hgroup>
<p>An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese cookery.</p>
</article>

Tag-ul <aside>

Elementul <aside> are două scopuri, în funcție de faptul că este sau nu în interiorul unui element <article>.

Atunci când elementul <aside> este utilizat în interiorul unui element <article>, acesta trebuie să conțină informații care sunt legate de articol, dar nu esențiale pentru sensul său general. De exemplu, o retragere sau un glosar ar putea fi considerat ca o excepție de la articolul la care se referă.

Atunci când elementul <aside> este utilizat în afara unui element <article>, acesta acționează ca un container pentru conținut care este legat de întreaga pagină. De exemplu, ar putea conține legături către alte secțiuni ale site-ului, o listă cu postări recente, o casetă de căutare sau tweet-uri recente de autor.

<aside>
<section class="popular-recipes">
<h2>Popular Recipes</h2>
<a href="">Yakitori (grilled chicken)</a>
<a href="">Tsukune (minced chicken patties)</a>
<a href="">Okonomiyaki (savory pancakes)</a>
<a href="">Mizutaki (chicken stew)</a>
</section>
<section class="contact-details">
<h2>Contact</h2>
<p>Yoko's Kitchen<br />27 Redchurch Street<br />Shoreditch<br />London E2 7DP</p>
</section>
</aside>

Tag-ul <section>

Elementul <section> grupează împreună conținutul asociat și, în mod obișnuit, fiecare secțiune ar avea propriul titlu.

De exemplu, pe o pagină de pornire pot exista mai multe elemente <section> care să conțină diferite secțiuni ale paginii, cum ar fi cele mai recente știri, produse de top și înscrieri la buletine informative.

Deoarece elementul <section> grupează elementele asociate împreună, acesta poate conține mai multe elemente <article> distincte care au o temă sau un scop comun.

Alternativ, dacă aveți o pagină cu un articol lung, elementul <section> poate fi folosit pentru a împărți articolul în secțiuni separate.

Elementul <secțiune> nu ar trebui să fie folosit ca un înveliș pentru întreaga pagină (cu excepția cazului în care pagina conține numai o bucată distinctă de conținut). Dacă doriți un element care să conțină întreaga pagină, acea lucrare este mai bine lăsată la elementul <div>.

<section class="popular-recipes">
<h2>Popular Recipes</h2>
<a href="">Yakitori (grilled chicken)</a>
<a href="">Tsukune (minced chicken patties)</a>
<a href="">Okonomiyaki (savory pancakes)</a>
<a href="">Mizutaki (chicken stew)</a>
</section>
<section class="contact-details">
<h2>Contact</h2>
<p>Yoko's Kitchen<br />
27 Redchurch Street<br />
Shoreditch<br />
London E2 7DP</p>
</section>

Tag-ul grupuri de titluri <hgroup>

Scopul elementului <hgroup> este să grupeze împreună un set de elemente sau mai multe elemente <h1> prin <h6> astfel încât să fie tratate ca o singură poziție.

De exemplu, elementul <hgroup> ar putea fi folosit pentru a conține atât un titlu în interiorul unui element <h2>, cât și o subtitrare într-un element <h3>.Acest element a avut o recepție mixtă.

Când a fost inițial propusă de oamenii care au dezvoltat HTML5, au existat unele plângeri și au fost retrase din propunerile HTML5. Cu toate acestea, unii oameni și-au schimbat opinia și au fost adăugați înapoi în limbaj. Unor dezvoltatori nu le plac utilizarea elementului <hgroup> și preferă să plaseze o subtitrare în interiorul unui element <p> (folosind un atribut pentru a indica faptul că este o subpoziție). Unii sugerează că este mai puțin folosit, altfel decât ca un cârlig de stil. Cu toate acestea, a fost popular cu acei dezvoltatori care cred că este util să grupeze împreună poziția principală și subrubrica (deoarece ambele pot fi părți integrale ale unei rubrici).

<hgroup>
<h2>Japanese Vegetarian</h2>
<h3>Five week course in London</h3>
</hgroup>

Tag-urile <figure> <figcaption>

Acesta poate fi folosit pentru a conține orice conținut care este referit din fluxul principal al unui articol (nu doar imaginile). Este important să rețineți că articolul ar trebui să aibă înțeles dacă conținutul elementului <figure> a fost mutat (într-o altă parte a paginii sau chiar într-o altă pagină cu totul altceva). Din acest motiv, ar trebui să fie utilizat numai atunci când conținutul trimite doar elementul (și nu pentru ceva care este absolut integrat în fluxul unei pagini). Exemple de utilizare includ:

Imagini

Videoclipuri

Grafice

Diagrame

Probele de cod

Text care acceptă corpul principal al unui articol

Elementul <figure> ar trebui să conțină, de asemenea, un element <figcaption> care oferă o descriere text pentru conținutul elementului <figure>. În acest exemplu, puteți vedea tag-ul <figure> a fost adăugată în interiorul elementului <article>.

<figure>
<img src="images/bok-choi.jpg" alt="Bok Choi" />
<figcaption>Bok Choi</figcaption>
</figure>

Tag-uri elemente de secționare <div>

Ar putea părea ciudat să urmați aceste elemente noi prin revenirea din nou la elementul <div>. (La urma urmei, noile elemente vor fi adesea folosite în locul său.)

Cu toate acestea, elementul <div> va rămâne o modalitate importantă de a grupa elementele legate, pentru că nu ar trebui să utilizați aceste elemente noi pe care tocmai le-ați întâlnit în alte scopuri decât cele specificate explicit.

În cazul în care nu există un element adecvat pentru gruparea unui set de elemente, elementul <div> va fi în continuare utilizat. În acest exemplu, acesta este folosit ca un înveliș pentru întreaga pagină.

Unii oameni au întrebat de ce nu există un element <content> care să conțină partea principală a unei pagini. Motivul este că orice element care se află în afara elementelor <header>, <footer> sau <aside> poate fi considerat ca fiind conținutul principal.

<div class="wrapper">
<header>
<h1>Yoko's Kitchen</h1>
<nav>
<!– nav content here –>
</nav>
</header>
<section class="courses">
<!– section content here –>
</section>
<aside>
<!– aside content here –>
</aside>
<footer>
<!– footer content here –>
</footer>
</div><!– .wrapper –>

Legarea în jurul elementelor de nivel BLOCK

HTML5 permite autorilor paginilor web să introducă un element <a> în jurul unui element de nivel de bloc care conține elementele copilului. Aceasta vă permite să transformați un bloc întreg într-un link.

Acesta nu este un element nou în HTML5, dar nu a fost văzut ca o utilizare corectă a elementului <a> în versiunile anterioare de HTML.

<a href="introduction.html">
<article>
<figure>
<img src="images/bok-choi.jpg"
alt="Bok Choi" />
<figcaption>Bok Choi</figcaption>
</figure>
<hgroup>
<h2>Japanese Vegetarian</h2>
<h3>Five week course in London</h3>
</hgroup>
<p>A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle dishes.</p>
</article>
</a>

Ajutând browserele mai vechi să înțeleagă

Browserele mai vechi care nu cunosc noile elemente HTML5 le vor trata automat ca elemente inline. Prin urmare, pentru a ajuta browserele mai vechi, ar trebui să includeți linia CSS din stânga care precizează elementele noi care ar trebui să fie redate ca elemente la nivel de bloc.

De asemenea, IE9 a fost prima versiune a Internet Explorer care permite ca regulile CSS să fie asociate cu aceste noi elemente de aspect HTML5.

Pentru a modela aceste elemente utilizând versiuni anterioare ale IE, trebuie să utilizați un simplu JavaScript, cunoscut sub numele de Shim HTML5 sau shuffle HTML5.

Nu aveți nevoie să înțelegeți JavaScript pentru al utiliza. Puteți să vă conectați doar la o copie pe care Google o găzduiește pe serverele sale. Acesta ar trebui să fie plasat în interiorul unui comentariu condiționat, care verifică dacă versiunea browserului este mai mică decât (prin urmare, lt) IE9.

CSS

header, section, footer, aside, nav, article, figure
{
display: block;}

HTML

<!–[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/
trunk/html5.js"></script>
<![endif]–>

Figură 3.5. Site de gătit

Exemplu HTML Layout

Acest exemplu arată un site de gătit construit folosind noi elemente HTML5 pentru a descrie structura paginii (mai degrabă decât doar gruparea elementelor folosind <div> elementele).

Antetul și subsolul paginii stau în interiorul elementelor <header> și <footer>. Cursurile sunt grupate într-un element <section> care are un atribut de clasă a cărui valoare este cursuri (pentru a fi distins de alte elemente <section> din pagină). Bara laterală este așezată în interiorul unui element <aside>.

Fiecare dintre cursuri trăiește într-un element <article> și folosiți elementele <figura> și <figcaption> pentru a conține o imagine. Titlurile pentru cursuri au subtitluri, astfel încât acestea sunt grupate într-un element <hgroup>. În bara laterală, rețetele și detaliile de contact sunt plasate în interiorul elementelor <section> separate.

Pagina este desenată folosind CSS. Singura diferență este că selectorii noștri folosesc noile elemente HTML5 pentru a ne permite să creăm reguli care vizează elementele respective. Pentru ca CSS să funcționeze în versiuni de IE înainte de Internet Explorer 9, pagina HTML5 conține un link spre JavaScript JavaScript (găzduit pe serverele Google) într-un comentariu condiționat.

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Layout</title>
<style type="text/css">
header, section, footer, aside, nav, article, figure, figcaption {
display: block;}
body {
color: #666666;
background-color: #f9f8f6;
background-image: url("images/dark-wood.jpg");
background-position: center;
font-family: Georgia, times, serif;
line-height: 1.4em;
margin: 0px;}
.wrapper {
width: 940px;
margin: 20px auto 20px auto;
border: 2px solid #000000;
background-color: #ffffff;}
header {
height: 160px;
background-image: url(images/header.jpg);}
h1 {
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0px;}
nav, footer {
clear: both;
color: #ffffff;
background-color: #aeaca8;
height: 30px;}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;}
nav li {
display: inline;
margin-right: 40px;}
nav li a {

color: #ffffff;}
nav li a:hover, nav li a.current {
color: #000000;}
section.courses {
float: left;
width: 659px;
border-right: 1px solid #eeeeee;}
article {
clear: both;
overflow: auto;
width: 100%;}
hgroup {
margin-top:40px;}
figure {
float: left;
width: 290px;
height: 220px;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;}
figcaption {
font-size: 90%;
text-align: left;}
aside {
width: 230px;
float: left;
padding: 0px 0px 0px 20px;}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;}
aside section a:hover {
color: #985d6a;
background-color: #efefef;}
a {
color: #de6581;
text-decoration: none;}
h1, h2, h3 {
font-weight: normal;}
h2 {

margin: 10px 0px 5px 0px;
padding: 0px;}
h3 {
margin: 0px 0px 10px 0px;
color: #de6581;}
aside h2 {
padding: 30px 0px 10px 0px;
color: #de6581;}
footer {
font-size: 80%;
padding: 7px 0px 0px 20px;}
</style>
<!–[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
</head>
<body>
<div class="wrapper">
<header>
<h1>Yoko's Kitchen</h1>
<nav>
<ul>
<li><a href="" class="current">home</a></li>
<li><a href="">classes</a></li>
<li><a href="">catering</a></li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
</header>
<section class="courses">
<article>
<figure>
<img src="images/bok-choi.jpg" alt="Bok Choi" />
<figcaption>Bok Choi</figcaption>
</figure>
<hgroup>
<h2>Japanese Vegetarian</h2>
<h3>Five week course in London</h3>
</hgroup>

<p>A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle dishes.</p>
</article>
<article>
<figure>
<img src="images/teriyaki.jpg" alt="Teriyaki sauce" />
<figcaption>Teriyaki Sauce</figcaption></figure>
<hgroup>
<h2>Sauces Masterclass</h2>
<h3>One day workshop</h3>
</hgroup>
<p>An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese cookery.</p>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Popular Recipes</h2>
<a href="">Yakitori (grilled chicken)</a>
<a href="">Tsukune (minced chicken patties)</a>
<a href="">Okonomiyaki (savory pancakes)</a>
<a href="">Mizutaki (chicken stew)</a>
</section>
<section class="contact-details">
<h2>Contact</h2>
<p>Yoko's Kitchen<br />
27 Redchurch Street<br /> Shoreditch<br /> London E2 7DP</p>
</section>
</aside>
<footer>
© 2011 Yoko's Kitchen
</footer>
</div><!– .wrapper –>
</body>
</html>

Amenajarea paginii cu CSS

Înainte de a începe, trebuie spus că există variații aparent fără sfârșit pe crearea de machete cu mai multe coloane cu CSS. Șabloanele prezentate aici sunt simplificate și pot să nu funcționeze pentru fiecare situație.

Strategii pentru aspectul paginii

Nu există nici o modalitate de a ști exact cât de largă, slabă, înaltă sau scurtă va fi fereastra browserului utilizatorului. Utilizatorii pot seta browserele să umple monitorul la una dintre rezoluțiile standard sau să le creeze pe alte dimensiuni confortabile. Dimensiunea exactă a oricărei pagini web este necunoscută.

În plus, nu există nici o modalitate de a ști cât de mare va fi textul. Puteți prefera un text mic ordonat, dar o parte din utilizatorii dvs. vor face ca textul lor să fie mai mare, eventual mult mai mare, pentru a fi confortabil să citească. Este posibil ca modificarea dimensiunii textului să aibă un impact asupra aspectului paginii dvs.

De-a lungul timpului, au apărut trei abordări generale de aspect al paginii pentru a face față acestor fapte inevitabile. Paginile cu lichide redimensionează împreună cu fereastra browserului.

Paginile fixe plasează conținutul într-o zonă de pagină care rămâne o anumită lățime a pixelilor indiferent de dimensiunile browserului. În cele din urmă, paginile elastice au zone care devin mai mari sau mai mici atunci când textul este redimensionat. Să ne uităm la modul în care funcționează fiecare strategie, precum și la motivele pentru și împotriva utilizării fiecăruia. Voi introduce, de asemenea, pe scurt, machete care să răspundă nevoilor utilizatorilor cu viziune redusă.

Proiectarea paginii lichide

Formatele de pagini lichide (denumite, de asemenea, machete fluide) urmează comportamentul implicit al fluxului normal. Cu alte cuvinte, zona de pagină și / sau coloanele din cadrul paginii pot fi lărgite sau mai înguste pentru a umple spațiul disponibil în fereastra browserului. Nu există nici o încercare de a controla lățimea conținutului sau a rupturilor de linii – textul este permis să se refacă după cum este necesar. Figura 3.6. arată W3.org, care este un bun exemplu de aspect lichid.

Figură 3.6. W3.org

Susținătorii paginilor web lichide consideră că aceasta este cea mai bună metodă de formatare, deoarece este compatibilă cu natura mediului. Desigur, are avantaje și dezavantaje.

Cum se creează machete lichide

Creați un aspect lichid prin specificarea lățimilor în valori procentuale. De asemenea, nu puteți specifica o lățime la toate, caz în care lățimea va fi setată la setarea automată prestabilită, iar elementul va umple lățimea disponibilă a ferestrei sau a altui element care conține. Iată câteva exemple.

În această dispunere cu două coloane (Figura următoare), lățimea fiecărei div a fost specificată ca procent din lățimea paginii disponibile. Coloana principală va fi întotdeauna de 70% din lățimea ferestrei, iar coloana din dreapta umple 25% (restul de 5% este utilizat pentru marginea dintre coloane), indiferent de dimensiunea ferestrei.

Figură 3.7. Formatul lichidului utilizând valorile procentuale.

div#main {

width: 70%;

margin-right: 5%;

float: left;

background: yellow;

}

div#extras {

width: 25%;

float: left;

background: orange;

}

În exemplul din Figura 3.8., coloana secundară din stânga este setată la o anumită lățime a pixelilor, iar zona principală de conținut este setată la auto și umple spațiul rămas din fereastră (aș fi putut, de asemenea, lăsat-o nespecificată pentru același rezultat). Deși acest aspect utilizează o lățime fixă pentru o coloană, acesta este încă considerat lichid, deoarece lățimea paginii se bazează pe lățimea ferestrei browserului.

Figură 3.8. Formatul lichid combinând coloanele cu lățime fixă și dimensiunea automată.

div#main {

width: auto;

position: absolute;

top: 0;

left: 225px;

background: yellow;

}

div#extras {

width: 200px;

position: absolute;

top: 0;

left: 0;

background: orange;

}

Ocuparea de lungimile liniei

Deși lungimile lungi ale liniilor sunt posibile în structurile lichide, este cu siguranță o situație ușor de gestionat și nu un motiv pentru a respinge această abordare a aspectului.

În marea majoritate a cazurilor, utilizatorii au browserele dimensionate în mod rezonabil, adică undeva între 800 și 1250 de pixeli. Dacă pagina dvs. are două sau mai multe coloane, aveți noroc, deoarece va fi dificil ca lungimile de linie să se deprecieze prea mult la aceste lățimi de browser „rezonabile”. Desigur, lungimile liniei se vor schimba atunci când browser-ul este redimensionat și este posibil să nu se afle în intervalul ideal de 55 până la 72 de caractere pe linie, dar textul este puțin probabil să fie necitit.

Dacă pagina dvs. constă dintr-o singură coloană, vă recomandăm să utilizați margini stânga și dreaptă (în intervalul de 10 până la 20%, în funcție de preferință) pentru a reduce lungimea liniei rezultate și, de asemenea, să adăugați un spațiu alb în jurul valorii de text.

În cele din urmă, puteți utiliza proprietatea max-width pentru a limita lățimea containerelor de conținut. Din păcate, nu este acceptată de Internet Explorer (Windows) 6 și mai devreme, însă acele versiuni vor scădea în cele din urmă din utilizarea semnificativă.

Aspecte fixe

Liniile fixe de lățime, așa cum sugerează și numele, rămân așezate la o lățime specificată a pixelilor determinate de designer. Această abordare se bazează pe principiile orientative tradiționale ale designului grafic, cum ar fi o rețea constantă, relația elementelor de pagină și lungimile confortabile ale liniilor. Când setați pagina la o anumită lățime, trebuie să decideți câteva lucruri.

În primul rând, trebuie să alegeți o lățime a paginii, de obicei bazată pe rezoluții comune ale monitorului. Cele mai multe pagini web cu o lățime fixă ​​din această scriere sunt proiectate să se potrivească într-o fereastră de browser de 800 × 600 pixeli, deși tot mai multe site-uri se aventurează într-o lățime de pagină (aproximativ) de 1000 pixeli.

De asemenea, trebuie să decideți unde să se poziționeze aspectul lățimii fixe în fereastra browserului. Implicit, acesta se află pe marginea din stânga a browserului, cu spațiul suplimentar din partea dreaptă a acestuia. Unii designeri optează pentru a centra pagina, împărțind spațiul suplimentar pe margini stânga și dreaptă, ceea ce poate face ca pagina să pară ca și cum ar fi mai bine să umple fereastra browserului. Figura următoare prezintă două dispuneri de lățime fixă. Ambele utilizează pagini cu lățime fixă, dar poziționează conținutul în mod diferit în fereastra browserului.

Figură 3.9. Exemple de machete fixe (aliniate la stânga și centrate).

#wrapper {width: 750px;

position: absolute;

margin-left: auto;

margin-right: auto;

border: 1px solid black;

padding: 0px;}

#extras {position: absolute;

top: 0px;

left: 0px;

width: 200px;

background: orange;}

#main {margin-left: 225px;

background-color: yellow;}

Una dintre principalele preocupări legate de utilizarea layout-urilor cu lățime fixă este că, dacă fereastra browserului utilizatorului nu este la fel de lată ca pagina, conținutul din marginea dreaptă a paginii nu va fi vizibil. Deși este posibilă derularea orizontală, este posibil să nu fie întotdeauna clar că în primul rând există mai mult conținut.

Uitați-vă la site-ul web al O'Reilly Media (www.oreilly.com) din Figura următoare. Pagina a fost creată pentru a umple o fereastră a browserului maximizată la un monitor de 1024 × 768. Având în vedere natura conținutului și a publicului pentru care este destinat, este o decizie perfectă de proiectare. Cu toate acestea, cifra din dreapta arată ce ar vedea un utilizator cu un monitor de 800 × 600. Întreaga coloană din dreapta este ascunsă. Din fericire, O'Reilly folosește coloana din dreapta pentru informații interesante, totuși non-critice, astfel încât, chiar dacă este trecută cu vederea, nu există nici un rău grav făcut.

Figură 3.10.Utilizatorii pot pierde conținutul de pe marginea dreaptă a unui aspect fix

dacă browserul nu este la fel de lat ca zona de pagină.

Să analizăm argumentele pro și contra în utilizarea strategiei cu lățime fixă.

Cum să creați machete cu lățime fixă

Liniile fixe de lățime sunt create prin specificarea valorilor lățimii în unități de pixeli.

În mod tipic, conținutul întregii pagini este plasat într-un div (adesea numit „conținut”, „container”, „înveliș” sau „pagină”) care poate fi apoi setat la o anumită lățime a pixelilor. Acest div poate fi de asemenea centrat în fereastra browserului. Lățimile elementelor de coloană și chiar margini și umplutură sunt, de asemenea, specificate în pixeli.

Elemente elastice

O a treia abordare a aspectului este în creștere în popularitate, deoarece se căsătorește cu text redimensionabil cu lungimi de linie previzibile. Elementele elastice (numite și jello) se extind sau se contractă cu dimensiunea textului. Dacă utilizatorul face textul mai mare, caseta care îl conține se extinde proporțional. De asemenea, în cazul în care utilizatorul îi place dimensiunea textului foarte mică, caseta de conținut se micșorează pentru a se potrivi. Rezultatul este că lungimile liniei (în termeni de cuvinte sau caractere pe linie) rămân aceleași indiferent de mărimea textului.

Acesta este un avantaj față de layout-urile lichide, unde lungimea liniilor poate deveni prea lungă și machetele fixe, unde un text foarte mare poate avea ca rezultat câteva caractere insuportabile pe linie.

Figura următoare prezintă designul peliculei elastice de către Patrick Griffiths la CSS Zen Garden (www.csszengarden.com/cssfile = / 063 / 063.css), un exemplu adesea referitor la aspectul elastic la locul de muncă. Rețineți că atunci când dimensiunea textului devine mai mare în fiecare eșantion, la fel se întâmplă zona de conținut a paginii. Cu toate acestea, în loc de reîncărcare în spațiul de dispunere mai mare, liniile de rupere sunt aceleași.

Figură 3.11. Designul elastic al gazonului de către Patrick Griffiths

la CSS Zen Garden este un exemplu clasic de aspect elastic al paginii.

Ca orice abordare de aspect, dispozitivele elastice vin cu propriile pro și contra:

Cum să creați machete elastice

Cheia elementelor elastice este em, o unitate de măsură care se bazează pe dimensiunea textului. De exemplu, pentru un element cu text de 12 pixeli, em este de 12 pixeli. În structurile elastice, dimensiunile elementelor care conțin elemente sunt specificate și în ems. Acesta este modul în care lățimile pot răspunde la dimensiunea textului. De exemplu, dacă dimensiunea textului este setată la 76% (egală cu aproximativ 12 pixeli în majoritatea browserelor) și pagina este setată la 40, lățimea paginii rezultată ar fi 480 pixeli (40 em x 12 pixeli / em). Dacă utilizatorul redimensionează textul cu până la 24 de pixeli, pagina crește la 960 de pixeli.

Șabloane pentru aspectul paginii

Aici este o secțiune: cum să creați două și trei coloane folosind CSS și absolut fără tabele. Exemplele de cod din această secțiune ar trebui să ofere un start bun spre formatarea paginilor dvs., dar acestea nu sunt soluții universale. Conținutul dvs. poate dicta soluții mai complicate. De asemenea, puteți prefera unul dintre cele mai robuste șabloane listate în bara laterală Șabloane de Mai multe layout-uri și tutoriale.

Această secțiune oferă șabloane și tehnici pentru următoarele:

Amenajări cu mai multe coloane utilizând flotoare (două și trei coloane)

Modulele cu mai multe coloane folosind poziționarea (două și trei coloane, cu și fără subsol)

pagină centrată pe lățime fixă

Utilizând șabloanele

Exemplele de pagini din această secțiune nu sunt frumoase. De fapt, le-am dezbrăcat până la un nivel minim, pentru a ajuta structura și strategia să fie cât se poate de clare. Iată câteva note cu privire la șabloane și cum să le folosiți.

Marcare simplificată

Declarația DOCTYPE și alte marcări ale structurii documentului (elemente html, cap, titlu și corp) au fost omise din șabloane pentru a economisi spațiu. Asigurați-vă că documentele dvs. au marcajul structural corespunzător.

Anteturi și subsoluri

Am inclus un element de antet și un subsol în multe din aceste exemple, dar oricare dintre acestea ar putea fi ușor omise pentru o schemă minimă de două sau trei coloane.

Cea mai importantă coloană principală

Un lucru de remarcat este că toate aceste exemple se bazează pe cel mai bun scenariu în care coloana de conținut principal este mai lungă decât coloana (coloanele) secundare, ceea ce, desigur, nu este întotdeauna cazul în lumea reală. Dacă coloanele laterale sunt mai lungi, este posibil să fie necesar să faceți ajustări sau să folosiți o altă structură altfel.

Cod de culoare

Am inclus două vizualizări pentru fiecare aspect. Cel din stânga este simplu și arată potențialul aspectului. În vizualizarea corectă, am adăugat o culoare de fundal colorată pentru a vă ajuta să potriviți codul de marcare și stil cu ceea ce se întâmplă în browser. Culorile de fundal sunt, de asemenea, utile pentru vizualizarea limitelor și amplasarea cutiilor de elemente. Asigurați-vă că foile de stil de exemplu conțin numărul minim de reguli pentru a crea o structură flexibilă și utilizabilă a paginii. Există, evident, mult mai multe lucruri care pot fi făcute cu text, fundaluri, margini, zgarde și granițe pentru a face aceste pagini mai atrăgătoare. Odată ce ați pus un cadru cu aceste șabloane, ar trebui să vă simțiți liberi să schimbați măsurătorile și să adăugați propriile stiluri. Valorile care pot fi înlocuite sunt indicate în italice în exemplele de foi de stil.

Modulele cu mai multe coloane utilizând funcția de plutire

Cea mai populară modalitate de a crea o coloană este să plutiți un element într-o parte și să lăsați conținutul rămas în jurul lui. O margine largă este utilizată pentru a menține zona în jurul coloanei plutitoare clar.

Unul dintre avantajele flotoarelor este că este mai ușor să porniți elemente de pagină, cum ar fi un subsol, sub zona de coloană a paginii. Dezavantajul schemelor bazate pe flotor este că ele depind de ordinea în care elementele apar în sursă. Obținerea efectului de aspect care vă apare poate duce la sursa de document care nu se află în ordinea optimă pentru utilizatorii de browsere non-vizuale.

Șabloanele din această secțiune dezvăluie strategia generală de abordare a dispunerilor de două și trei coloane cu flotoare și ar trebui să servească drept un bun început pentru implementarea propriilor planificări.

Două coloane cu subsol

Metodă: FLOAT

Amenajare: LIQUID

Marcajul și stilurile din acest exemplu produc o dispunere de două coloane lichide cu o zonă de antet, o coloană principală de conținut, o bara laterală și un subsol pentru informațiile privind drepturile de autor, așa cum se arată în figura următoare.

Figură 3.12. Două coloane cu subsol.

Marcajul
<div id="header">
Masthead and headline
</div>
A <div id="main">

Main article…

</div>

<div id="extras">

List of links and news

</div>

<div id="footer">

Copyright information

</div>

Note de marcaj:

Documentul sursă a fost împărțit în patru div, câte unul pentru antet, conținut, extra și subsol.

A Conținutul principal apare înaintea extraselor din documentul sursă, astfel încât acesta să fie accesat mai întâi de utilizatori cu browsere non-grafice. Asta înseamnă ca nu putem pluti div "extras" pentru ca nu va pluti deasupra elementului bloc anterior în partea de sus a paginii. În schimb, conținutul principal al div este floated și textul următor (div "extras" ) se înfășoară în jurul acestuia.

Foaia de stil

#header {
background: #CCC;
padding: 15px; }

B #main {
background-color: aqua;

float: left; /* plutește întregul articol principal spre stânga */

width: 60%;

margin-right: 5%; /* adaugă spațiu între coloane */
margin-left: 5%; }

C #footer {
clear: left; /* starts the footer below the floated content */
padding: 15px;
background: #CCC; }

D #extras {
margin-right: 5%} /* space on the right of the side column */

E body {
font-family: verdana, sans-serif;
margin: 0; /* clears default browser margins */
padding: 0; }
li {
list-style: none;
margin: 10px 0; }

Note stilul foilor:

B Conținutul principal „div” este afișat în stânga și este setat la 60% din lățimea paginii. O marjă este aplicată laturilor stânga și dreaptă ale divului principal "div", pentru a adăuga spațiu între coloane.

C Div-ul „footer” este șters (cu proprietatea clear), astfel încât să pornească sub coloana cu conținut principal plutind.

D O marjă este adăugată la marginea din dreapta a div-ului „extras” pentru a adăuga spațiu între el și fereastra browserului.

E Marginea și umplutura pe elementul body au fost setate la zero pentru a șterge setările implicite ale browserului. Acest lucru permite ca zonele antet și subsolului umbrite să meargă până la marginea ferestrei browserului, fără goluri albe.

Trei coloane cu subsol

Metodă: FLOAT

Layout: FIXAT

Acest exemplu folosește elemente flotate pentru a crea un layout cu trei coloane cu o lățime fixă (o coloană de conținut principal, flancată de barele laterale stânga și dreaptă) cu antetul și subsolul opțional.

Figură 3.13. Layout în trei coloane cu flotoare.

Marcajul

A <div id="container">

<div id="header">

Masthead and headline

</div>

B <div id="links">

List of links

</div>

<div id="main">

Main article…

</div>

<div id="news">

News and announcements…

</div>

<div id="footer">

Copyright information

</div>

</div>

Note Marcaje

A Toate elementele de conținut din document au fost plasate într-un div „container” , la care se va aplica măsurarea cu lățime fixă.

B Amintiți-vă că, cu flotarea, ordinea în care elementele apar în documentul sursă este semnificativă. Pentru a obține barele laterale înguste de o parte și de alta a conținutului, trebuia să mut linia „links” div înainte de div „content” pentru a păstra direct foaia de stil. Există metode care permit ca conținutul să apară în orice ordine, dar ele tind să se complice.

Foaia de stil

#container {

width: 750px;

C border: solid 1px; }

#header {

background: #CCC;

padding: 15px; }

D #links {

background-color: fuchsia;

float: left;

E width: 175px; }

D #main {

background-color: aqua;

float: left;

E width: 400px; }

D #news {

background-color: green;

float: left;

E width: 175px; }

F #footer {

clear: both; /* începe subsolul sub conținutul plutitor */

padding: 15px;

background: #CCC; }

body {

font-family: verdana, sans-serif;

font-size: small;

margin: 0;

padding: 0;}

G h2, ul, p {

padding: 0px 8px; } /* adaugă spațiu în jurul conținutului */

li {

list-style: none;

margin: 10px 0; }

Note foaie de stil

C O bordură a fost adăugată la container pentru a-și dezvălui margini în această demonstrație, dar poate fi ușor eliminată.

D Foaia de stil plutește pe div-urile în stânga „link-uri” „principală” și „știri”. Rezultatul este că se acumulează pe marginea din stânga a blocului care conține, creând astfel trei coloane.

E Deoarece nu există setări de umplere, borduri sau margine pentru fiecare element plutitor, suma lățimilor lor este egală cu lățimea containerului exterior.

F Proprietatea clear:both a fost adăugată în subsolul paginii pentru a vă asigura că acestea se află sub toate elementele plutitoare.

G Spațiul din cadrul fiecărui conținut div se adaugă prin aplicarea de elemente de umplutură pe elementele pe care le conține (h2, ul, p, etc.).

Aspectul folosind poziția absolută

Poziția absolută poate fi de asemenea utilizată pentru a crea o pagină cu mai multe coloane. Avantajul este că ordinea documentului sursă nu este la fel de critică ca în metoda float, deoarece cutiile de elemente pot fi poziționate oriunde. Dezavantajul este că aveți riscul ca elementele să se suprapună și conținutul să fie ascuns. Acest lucru face dificilă implementarea elementelor de lățime întreagă sub coloane, deoarece se va suprapune dacă o coloană poziționată crește prea mult. Când lucrați cu poziționare absolută, rețineți că fiecare element pe care îl poziționați este îndepărtat din fluxul normal. Dacă conținutul pe care vă așteptați să îl aflați în partea de jos a paginii este așezat chiar în partea de sus, este pentru că ați poziționat (și astfel ați scos) toate elementele de deasupra, care au fost "ținute în jos". Acest lucru trebuie ținut în minte în timpul depanării.

Două coloane cu subsol îngust

Metodă: POZIȚIONAT

Amenajare: LIQUID

Exemplul din această secțiune creează o coloană a barei laterale din dreapta folosind poziționarea absolută. Aspectul rezultat este prezentat în figura următoare. Rețineți că designul footer-ului a fost modificat din motive de simplificare a șablonului (subsolurile cu o lățime întreagă sunt problematice, așa cum am menționat mai devreme).

Figură 3.14. Două coloane cu poziționare absolută

Marcajul

<div id="header">

Masthead and headline

</div>

<div id="main">

Main article…

</div>

A <div id="extras">

List of links and news

</div>

<div id="footer">

Copyright information

</div>

Această foaie de stil plasează absolut elementul div „extra” în partea dreaptă a paginii și 100 de pixeli în jos, pentru a lăsa spațiu pentru elementul de antet.

Conținutul div "principal" are o marjă dreaptă suficient de largă pentru a face un spațiu pentru cutia nou poziționată.

Foaia de stil

B #header {

height: 70px;

padding: 15px; /* height of header = 100 (15+70+15) */

background: #CCC;}

C #main {

margin-right: 30%; /* makes room for the positioned sidebar */

margin-left: 5%; }

D #extras {

position: absolute;

top: 100px; /* places the extras div below the header */

right: 0px; /* places it against right edge of the window */

width: 25%;

background: green;

padding: 10px;} /* adds space within colored box */

E #footer {

margin-right: 30%; /* keeps the footer aligned with content */

margin-left: 5%;

padding: 15px;

background: #666; }

body {

font-family: verdana, sans-serif;

font-size: small;

margin: 0;

padding: 0;}

ul { padding: 0px; }

li {

list-style: none;

margin: 10px 0; }

Note foaie de stil

B În acest exemplu, știm că antetul este exact de 100 de pixeli înălțime (70 înălțime plus 30 de pixeli de umplutură)..

C Marja dreaptă de 30% face ca spațiul pentru coloană să fie de 25% din pagină plus un spațiu de 5% între coloane.

D Div-ul "extras" este poziționat cu absolut 0 pixeli de la marginea din dreapta a browserului și cu exact 100 de pixeli în jos de sus.

E Marjele aplicate conținutului principal au fost aplicate și la subsolul div. Aceasta este pentru a preveni ca subsolul să fie suprapus de o bara laterală lungă.

Trei coloane (subsol îngust)

Metodă: POZIȚIONAT

Amenajare: LIQUID

În acest șablon, ambele coloane ale barei laterale sunt poziționate în mod absolut, iar marginile sunt aplicate ambelor laturi ale conținutului principal pentru a face loc pentru barele laterale.

Aspectul rezultat este prezentat în figura următoare.

Figura3.15. Poziționarea a două bare laterale într-o structură cu trei coloane.

Marcaje

<div id="header">

Masthead and headline

</div>

A <div id="main">

Main article…

</div>

B <div id="links">

List of links

</div>

B <div id="news">

News and announcements…

</div>

<div id="footer">

Copyright information

</div>

Note marcaje

A Deoarece poziționarea absolută nu este dependentă de ordine, conținutul principal div poate apărea mai întâi în poziția sa preferată din sursa documentului.

B Numai elementele div „link” și „news” sunt poziționate în acest aspect.

Foaie de stil

#header {

height: 70px;

padding: 15px; /* înălțimea antetului = 100 (15+70+15) */

background: #CCC;

}

#main {

margin-left: 25%; /* face loc pentru bara laterală din stânga */

margin-right: 25%; /* face loc pentru bara laterală dreaptă */

}

C #links {

position: absolute;

top: 100px; /* plasează bara laterală de sub antet */

left: 0px; /* îl plasează pe marginea din stânga a ferestrei */

D width: 22%; /* mai puțin decât marjele principale pentru a adăuga # între coloane */

background: fuchsia;

}

C #news {

position: absolute;

top: 100px; /* plasează bara laterală de sub antet */

right: 0px; /* îl plasează pe marginea dreaptă a ferestrei */

D width: 22%;

background: green;

}

E #footer {

margin-right: 25%; /* menține subsolul aliniat la conținut */

margin-left: 25%;

padding: 15px;

background: #CCC;}

Note foaie de stil

Foaia de stil este, în esență, aceeași ca și cea pentru exemplul precedent, cu excepția faptului că marginile au fost aplicate pe ambele părți ale elementelor div „main” și „footer”, pentru a face loc coloanelor pe ambele părți. Comentariile din foaia de stil oferă informații despre ceea ce fac proprietățile cheie.

C Div-urile „link-uri” și „știri” sunt poziționate în dreptul marginilor din stânga și din dreapta ferestrei browserului (tehnic, este blocul inițial care conține).

D Lățimea coloanelor poziționate este mai restrânsă decât marginile de pe div-ul principal de conținut pentru a permite spațiu între coloane.

E Subsolul primește același tratament de marjă ca și coloana cu conținut principal pentru a vă asigura că coloanele laterale nu se suprapun.

Trei coloane cu reguli și umplutură între coloane

Metodă: POZIȚIONAT

Layout: FIXAT

În acest aspect cu trei coloane, toate cele trei coloane sunt poziționate absolut într-un aspect fix. În plus, au fost adăugate granițe și elemente de umplutură între coloane.

Din motive de simplitate, subsolul a fost omis în acest exemplu, deoarece nu există nici o modalitate de a o păstra în partea de jos a paginii fără a utiliza JavaScript sau sărind peste niște cercuri CSS. Rezultatul este prezentat în figura următoare.

Figura 3.16. Trei coloane poziționate într-un aspect cu lățime fixă.

Marcaje

A <div id="container">

<div id="header">

Masthead and headline

</div>

B <div id="main">

Main article…

</div>

B <div id="links">

List of links

</div>

B <div id="news">

News and announcements…

</div>

</div>

Note de marcaj

A Deoarece acesta este un layout cu lățime fixă, tot conținutul a fost înfășurat într-un div „container”.

B Toate cele trei elemente div conținând conținut sunt absolut poziționate. Principalul conținut div poate apărea mai întâi în documentul sursă.

Foaie de stil

C #container {

position: relative; /* makes "container" a containing block */

width: 750px; }

#header {

height: 70px;

padding: 15px; /* total height = 100 (15+70+15) */

background: #CCC; }

#main {

D position: absolute;

top: 100px;

E left: 150px;

F width: 428px; /* 450 minus 2px of border and 20px of padding */

border-left: solid 1px black;

border-right: solid 1px black;

padding: 0px 10px; /* 10 pixels padding left and right */

background-color: aqua; }

#links {

D position: absolute;

top: 100px;

E left: 0px;

F width: 134px; /* 150 minus 16 px total padding */

padding: 0 8px; /* 8 px padding left and right */

background: fuchsia; }

#news {

D position: absolute;

top: 100px;

E left: 600px; /* makes room for other 2 columns */

F width: 134px; /* 150 minus 16 px total padding */

padding: 0 8px; /* 8 px padding left and right */

background: green; }

body {

font-family: verdana, sans-serif;

font-size: small;

margin: 0;

padding: 0; }

ul { padding: 0px; }

li {

list-style: none;

margin: 10px 0; }

Note foaie de stil

C Containerul div are o lățime fixă ​​(750 pixeli) și poziția sa este setată la relativ pentru a fi stabilită ca un bloc care conține elemente de coloană poziționate.

D Toate cele trei div-uri de conținut („link-uri”, „principale” și „știri”) sunt absolut poziționate sub antet.

E Valorile pentru stânga (adică distanța de la marginea din stânga care conține zona blocului) sunt relativ la marginea din stânga a casetei întregi (inclusiv marginile) pentru fiecare div, nu doar pentru zona de conținut.

F Ori de câte ori adăugați elemente de umplutură, margini sau borduri la o structură de aspect cu o lățime fixă, trebuie să faceți niște matematici pentru a vă asigura că suma lățimii elementelor plus toate extrasele lor nu depășesc lățimea totală a containerului.

De exemplu, lățimea totală de 750 pixeli este împărțită în două bare laterale de 150 pixeli și o coloană principală de 450 pixeli. Deși poate fi tentant să se stabilească lățimea fiecărei div la aceste valori, din păcate, aceasta nu va funcționa.

Proprietatea lățime se aplică numai zonei de conținut. Figura următoare distruge toate măsurătorile care se întind pe lățimea div-ul „containerului”. Puteți potrivi cu ușurință valorile din figură cu cele utilizate în foaia de stil anterioară.

Figură 3.17. Calcularea lățimilor, margini, borduri și umplutură

Crearea graficii web

Grafice de bază pentru web

Cu excepția cazului în care intenționați să publicați site-uri numai cu text, este posibil să aveți nevoie să știți cum să creați grafică web. Pentru mulți dintre voi, acest lucru ar însemna să puneți pentru prima oară mâinile pe un program de editare a imaginilor și să dobândiți câteva abilități de bază în producția grafică. Dacă sunteți un designer condimentat obișnuit să imprimați, poate fi necesar să vă adaptați stilul și procesul pentru a face grafica potrivită pentru livrarea pe web.

Surse de imagine

Trebuie să aveți o imagine pentru a salva o imagine, așa că înainte de a sari într-un format de fișiere de fișiere, să examinăm câteva modalități de a obține imagini în primul rând. Există multe opțiuni: de la scanarea, fotografierea sau ilustrarea dvs., la utilizarea fotografiilor stoc și a clipurilor disponibile, doar pentru a angaja pe cineva pentru a crea imagini pentru dvs.

Crearea propriilor imagini

În cele mai multe cazuri, modalitatea cea mai eficientă de a genera imagini pentru site-ul dvs. este să vă creați de la zero. Bonusul adăugat este că știți că aveți drepturi complete de a utiliza imaginile (vom aborda din nou drepturile de autor).

Designerii pot genera imagini cu scanere, camere digitale sau programe de desen.

Camere digitale

Puteți să capturați lumea din jurul dvs. și să o conduceți într-un program de editare a imaginilor cu o cameră digitală. În funcție de tipul imaginilor pe care le urmăriți, puteți obține o calitate suficientă cu o cameră digitală standard pentru consumatori sau chiar cu camera din telefon.

Ilustrare electronică

Dacă aveți abilități de ilustrație, puteți crea propria imagine într-o aplicație de desen sau de editare foto. Fiecare designer are propriile sale instrumente și tehnici preferate. Pentru logouri și desene de linie, se poate folosi un program de desen vectorial, cum ar fi Adobe Illustrator sau Fireworks, apoi salvați pe o copie adecvată pentru web, după cum este necesar. Este util să aveți o versiune de înaltă calitate, rezoluție independentă în jurul pentru imprimare și alte aplicații de înaltă rezoluție. Pentru fotografiile, texturile și alte tipuri de imagini bitmap (raster), Adobe Photoshop este instrumentul profesionistului de alegere. Din nou, este întotdeauna o idee bună să creați o versiune de înaltă rezoluție a imaginilor dvs. și să salvați copii mai mici după cum este necesar.

Scanarea

Scanarea este o modalitate foarte bună de a colecta materiale sursă. Puteți scana aproape orice, de la obiecte plate până la obiecte 3D. Feriți-vă, totuși, de tentația de a scana și de a folosi imaginile găsite. Rețineți că majoritatea imaginilor pe care le găsiți sunt, probabil, protejate prin drepturi de autor și nu pot fi utilizate fără permisiune, chiar dacă le modificați considerabil. Consultați bara laterală Sfaturi de scanare pentru unele informații despre modul cum să procedați.

Instrumentele de comerț

O scurtă introducere la cele mai populare instrumente grafice printre designerii graficieni. Există multe alte instrumente care vor scoate un fișier grafic;

Adobe Photoshop

Fără îndoială, standardul pentru crearea graficii este Photoshop. Acesta include multe caracteristici specifice pentru crearea de grafică web. Descărcați o copie de încercare a acestui și a întregului software Adobe la adobe.com.

Adobe Fireworks

Făcând o paralelă, Fireworks a fost unul dintre primele programe grafice proiectate de la bază pentru a răspunde cerințelor speciale ale graficii web. Este unic în faptul că dispune de instrumente pentru crearea de imagini vectoriale (pe linie) și raster (bazate pe pixeli).

Adobe Illustrator

Illustrator este programul standard de desen vectorial atât în ​​industria de imprimare, cât și în domeniul web design. Se integrează frumos cu Photoshop.

Corel Paint Shop Pro

Dacă utilizați Windows și sunteți la un buget, Paint Shop Pro Photo oferă funcționalități similare cu Photoshop la un preț mai mic. Puteți descărca o versiune trial la corel.com.

GIMP

GIMP este un instrument gratuit de editare a imaginilor open source cu caracteristici foarte asemănătoare cu Photoshop. Funcționează pe Linux, Windows XP și Vista și pe Mac OS X. Obțineți mai multe informații și descărcări gratuite la www.gimp.org.

Stock photography și ilustrații

Dacă nu sunteți încrezător în abilitățile de proiectare sau doriți doar un început cu câteva imagini proaspete, există o mulțime de colecții de fotografii, ilustrații, butoane, animații și texturi gata disponibile pentru vânzare sau gratuit. Fotografiile și ilustrațiile stocului se înscriu, în general, în două categorii largi: drepturi gestionate și drepturi de autor.

Dreptul de administrare înseamnă că deținătorul drepturilor de autor (sau o companie care le reprezintă) controlează cine poate reproduce imaginea. Pentru a utiliza o imagine cu drepturi de administrare, trebuie să obțineți o licență pentru a o reproduce pentru o anumită utilizare și pentru o anumită perioadă de timp. Unul dintre avantajele acordate licențierii imaginilor este faptul că puteți aranja să dețineți drepturi exclusive asupra unei imagini într-un anumit mediu (cum ar fi Web) sau într-un anumit sector de activitate (cum ar fi industria de sănătate sau sectorul bancar). Pe partea inferioară, imaginile gestionate prin drepturi sunt destul de scumpe. În funcție de lățimea și lungimea licenței, prețul poate fi de multe mii de dolari pentru o singură imagine. Dacă nu doriți drepturi exclusive și doriți să utilizați imaginea numai pe Web, costul este mult mai probabil să fie câteva sute de dolari, în funcție de sursă.

Dacă aceasta sună prea exagerat, luați în considerare utilizarea unor ilustrații gratuite, pentru care nu este necesar să plătiți o taxă de licențiere. Coperta cu ilustrație gratuită este disponibilă pentru o taxă unică, care vă oferă o utilizare nelimitată a imaginii, dar nu aveți control asupra cine utilizează imaginea. Imaginile gratuite sunt disponibile de la casele profesionale de top, cum ar fi Getty Images, pentru cât mai puțin de 30 de dolari o imagine și de la alte site-uri pentru mai puțin (sau chiar gratuit).Un alt mod de a obține imagini gratuite este de a găsi fotografii și desene lansate de artist sub licența Creative Commons de artiștii care le-au creat. Există câteva tipuri de licențe Creative Commons, deci asigurați-vă că verificați termenii. Unii artiști își fac munca liberă să folosească oricum doriți; unii artiști cer doar să le dați credit (numai pentru atribuire); unele limitează utilizarea imaginii în scopuri necomerciale. Următoarea este o listă a câtorva din resursele mele preferate pentru găsirea fotografiilor și ilustrațiilor de înaltă calitate, dar nu este în nici un caz exhaustivă. O căutare web va genera mult mai multe site-uri cu imagini de vânzare.

Creative Commons de la Flickr (www.flickr.com/creativecommons/)

Serviciul de distribuire a fotografiilor Flickr este prima mea oprire pentru găsirea fotografiilor lansate pe o licență Creative Commons. Calitatea variază, dar de obicei pot găsi ceea ce am nevoie pentru costul unui credit de fotografie. Încercați să utilizați instrumentul de căutare Flickr Compfight (compfight.com) pentru a găsi imagini pe baza "interesului".

iStockPhoto (www.istockphoto.com)

Dacă sunteți într-un buget strâns (și chiar dacă nu sunteți), nu există niciun loc mai bun pentru a găsi imagini decât iStockPhoto. Prețurile încep de la aproximativ trei dolari un pop.

Getty Images (www.gettyimages.com)

Getty este cea mai mare casă de imagine, după ce a acumulat majoritatea concurenților săi în ultimii ani. Oferă fotografii și ilustrații cu drepturi de autor și gratuite, la o varietate de game de prețuri.

Veer (www.veer.com)

Îmi place Veer, deoarece tinde să fie un pic mai melancolică și mai iritantă decât concurenții săi. Oferă atât fotografii, ilustrații, fonturi, cât și videoclipuri stocate prin drepturi de autor și fără drepturi de autor.

Clip art și icon-uri

Clip art se referă la colecții de ilustrații, animații, butoane și alte doo-dads gratuite, pe care le puteți copia și plasa într-o gamă largă de utilizări. Există o serie de resurse online, iar vestea bună este că unele dintre aceste site-uri dau gratuit grafică, deși este posibil să suferiți printr-un baraj de anunțuri pop-up. Alții plătesc o taxă de membru, oriunde de la 10 dolari la 200 dolari pe an. Dezavantajul este că multe dintre ele sunt de slabă calitate sau de tip hokey (dar atunci, "hokey" este în ochii privitorului). Următoarele sunt doar câteva site-uri pentru a vă obține

Clipart.com (www.clipart.com)

Acest serviciu percepe o taxă de membru, dar este bine organizat pentru a oferi opere de artă mai bune decât site-urile gratuite.

# 1 Clip Art gratuit (www.1clipart.com)

Un alt site fără clipuri gratuit.

De asemenea, este ușor să găsiți icoane pentru pagini web și aplicații gratuite sau la un preț scăzut (o simplă căutare pentru "icoane gratuite" va face truc). Iată două resurse pentru a vă lansa.

Proiectul substantiv (thenounproject.com)

Proiectul Nouns colectează și organizează icoane clasice, de o singură culoare din întreaga lume și le pune la dispoziție gratuit. Cat de tare e asta?

Icon Finder (www.iconfinder.com)

Aceasta este o resursă enormă pentru icoane gratuite color de toate stilurile. Asigurați-vă că verificați termenii licenței Creative Commons, care variază în funcție de setul de pictograme.

Închiriați un designer

Găsirea și crearea de imagini necesită timp și talente deosebite. Dacă aveți mai mulți bani decât oricare dintre aceste lucruri, luați în considerare angajarea unui designer grafic, a unui fotograf sau a unui ilustrator pentru a genera imaginile pentru site-ul dvs. pentru dvs.

Formatele

Odată ce aveți mâinile pe unele imagini, trebuie să le obțineți într-un format care va funcționa pe o pagină web. Există zeci de formate de fișiere grafice în lume. De exemplu, dacă utilizați Windows, este posibil să fiți familiarizat cu grafica BMP sau dacă sunteți un designer de imprimare, puteți utiliza în mod obișnuit imagini în format TIFF și EPS. Pe Web, imaginile bitmap (bazate pe pixeli) trebuie să fie salvate în unul din cele trei formate: GIF (pronunțat "jiff" sau "giff"), JPEG ("jay-peg") și PNG P-en-gee“). Există un al patrulea format SVG (Scalable Vector Graphics), care este un pic cam ciudat, deoarece este un format de vector vectorial creat de un fișier text XML. Iată o scurtă apreciere:

Imaginile GIF sunt cele mai potrivite pentru imaginile cu culori plane și margini dure sau când este necesară transparența sau animația.

JPEG-urile funcționează cel mai bine pentru fotografii sau imagini cu amestecuri de culoare netedă.

Fișierele PNG pot conține orice tip de imagine, dar sunt deosebit de eficiente pentru stocarea imaginilor cu culori plate. PNG este singurul format care permite mai multe nivele de transparență.

Această secțiune abordează terminologia și se ocupă profund de caracteristicile și funcțiile fiecărui format. Înțelegerea detaliilor tehnice vă va ajuta să faceți grafica web de cea mai bună calitate la cele mai mici dimensiuni.

GIF omniprezent

Fișierul GIF (Graphic Interchange Format) a fost primul format de imagine acceptat de browserele web. Deși nu a fost proiectat special pentru Web, a fost adoptat pentru versatilitatea, dimensiunile reduse ale fișierelor și compatibilitatea pe platforme. GIF oferă, de asemenea, transparență și capacitatea de a conține animații simple. Peste 20 de ani mai târziu, este, probabil, cel mai utilizat format grafic grafic.

Deoarece schema de comprimare GIF excelează la comprimarea culorilor plate, este cel mai bun format de fișier utilizat pentru logo-uri, linii de artă, pictograme etc. (Figura următoare). Puteți salva fotografii sau imagini texturate ca GIF-uri, dar ele nu vor fi salvate la fel de eficient, ducând la dimensiuni mai mari ale fișierelor. Cu toate acestea, GIF funcționează frumos pentru imaginile cu o combinație de cantități mici de imagini fotografice și zone mari de culoare plată.

Pentru a face GIF-uri foarte mari, este important să fii familiarizat cu modul în care lucrează sub capotă și ce pot face. Culoare indexată pe 8 biți.

În termeni tehnici, fișierele GIF sunt imagini indexate color care conțin informații de culoare pe 8 biți (pot fi salvate și la adâncimi de biți mai mici). Pe 8 biți înseamnă că GIF-urile pot conține până la 256 de culori – numărul maxim pe care 8 biți de informații îl pot defini (28 = 256). Adâncimile de biți inferioare determină mai puține culori și reduc dimensiunea fișierului.

Figură 3.18. Formatul GIF este minunat pentru imaginile grafice

care se compun în principal din culori plane și muchii dure.

Culoarea indexată înseamnă că setul de culori din imagine, paleta sa, este stocat într-o tabelă de culoare (numită și o hartă colorată). Fiecare pixel din imagine conține o referință numerică (sau "index") într-o poziție din tabelul de culori. Acest lucru trebuie clarificat printr-o simplă demonstrație. Figura următoare arată cum o imagine colorată indexată pe 2 biți (4 culori) face trimitere la tabelul de culori pentru afișare. Pentru imaginile pe 8 biți, în tabelul de culori există 256 de sloturi.

Figură 3.19. O imagine pe 2 biți și tabelul de culori.

Majoritatea imaginilor sursă (scanări, ilustrații, fotografii etc.) pornesc în format RGB, deci trebuie să fie convertite în culori indexate pentru a fi salvate ca un GIF. Atunci când o imagine trece de la modul RGB la modul indexat, culorile din imagine sunt reduse la o paletă de 256 de culori sau mai puțin. În Photoshop și Focuri de artificii, conversia are loc când salvați sau exportați GIF.

Alte programe de editare a imaginilor vă pot cere mai întâi să convertiți manual imaginea la culoarea indexată, apoi să exportați GIF ca al doilea pas.

În ambele cazuri, vi se va solicita să selectați o paletă pentru imaginea colorată indexată. Bara laterală Common Palette de culori conturează diferitele opțiuni de palete disponibile în cele mai populare instrumente de imagine. Este recomandat să utilizați Selectiv sau Perceptiv în Photoshop, Adaptive în Fireworks și Optimizat Median Cut în Paint Shop Pro pentru cele mai bune rezultate pentru majoritatea tipurilor de imagini.

Comprimare GIF

Comprimarea GIF este "fără pierderi", ceea ce înseamnă că nici o informație despre imagine nu este sacrificată pentru a comprima imaginea indexată (deși unele imagini pot fi pierdute atunci când imaginea RGB este transformată într-o paletă de culori limitată). Utilizează o schemă de comprimare (numită "LZW" pentru LempelZiv-Welch) care profită de repetarea datelor. Când întâlnește un șir de pixeli de aceeași culoare, poate comprima acest lucru într-o singură descriere a datelor. Acesta este motivul pentru care imaginile cu suprafețe mari de culoare plată condensează mai bine decât imaginile cu texturi. Pentru a utiliza un exemplu extrem de simplificat, atunci când schema de compresie întâlnește un rând de 14 pixeli albastre identici, face o notație de stenografie care înseamnă "14 pixeli albastri". Data viitoare când întâlnește 14 pixeli albastru, utilizează doar scurtătura de cod (Figura următoare). În schimb, atunci când întâlnește un rând care are o gradație blând de la albastru la aqua la verde, are nevoie pentru a stoca o descriere pentru fiecare pixel de-a lungul drum, care necesită mai multe date. Ceea ce se întâmplă de fapt în termeni tehnici este mai complicat, desigur, dar acest exemplu este un bun model mental pe care trebuie să-l țineți minte atunci când proiectați imagini GIF pentru o comprimare maximă.

Figură 3.20. O demonstrație simplificată a compresiei LZW utilizată de imaginile GIF

Transparență

Puteți face părți ale imaginilor GIF transparente, astfel încât imaginea sau culoarea de fundal să fie afișate. Deși toate graficele cu bitmap sunt de natură dreptunghiulară, cu transparență, puteți crea iluzia că imaginea dvs. are o formă mai interesantă. Transparența este discutată în detaliu mai târziu în acest capitol.

Figură 3.21. Transparența permite afișarea fundalului

dungat prin imaginea din partea inferioară.

Intercalarea

Intercalarea face o afișare GIF într-o serie de treceri. Fiecare pas este mai clar decât trecerea înainte, până când imaginea este complet redată în fereastra browserului. Fără intercalarea, unele browsere pot aștepta până când întreaga imagine este descărcată înainte de afișarea imaginii. Alții pot afișa imaginea câteva rânduri simultan, de sus în jos, până când imaginea este completă.

În timpul unei conexiuni rapide, aceste efecte (intercalări sau întârzieri ale imaginilor) pot să nu fie perceptibile. Cu toate acestea, conexiunile lentoare (rețeaua modem sau mobilă), intercalarea imaginilor mari pot fi o modalitate de a oferi un indiciu al imaginii care va veni în timpul descărcării întregii imagini. Indiferent dacă vă intersectezi sau nu este decizia dvs. de proiectare. Nu fac niciodată, dar dacă aveți o imagine mare și o audiență cu un procent semnificativ de conexiuni lente, intercalarea poate fi utilă.

Animație

O altă caracteristică încorporată în formatul de fișier GIF este capacitatea de a afișa animații simple. Multe dintre bannerele de anunțuri care se rotesc, clipește sau se mișcă altfel pe care le vedeți sunt animații GIF (deși filmele Flash au fost, de asemenea, populare pentru publicitatea pe web). GIF animate conțin un număr de cadre de animație, care sunt imagini separate care, repede, dă iluzia mișcării sau a schimbării în timp, cam ca o carte flip-down. Toate cadrele sunt stocate într-un singur fișier GIF, împreună cu setările care descriu modul în care ar trebui să fie redate. Setările includ dacă și de câte ori se repetă secvența, cât timp fiecare cadru rămâne vizibil (întârziere cadru), modul în care un cadru înlocuiește altul (metoda eliminării), dacă imaginea este transparentă și dacă este intercalată.

Adobe Fireworks și Photoshop au interfețe pentru crearea de animații GIF.

În Photoshop CS5 și mai recent, utilizați fereastra Animație. În CS6, utilizați fereastra Cronologie și selectați "Creare animație cadru". O căutare web va genera multe instrumente dedicate animate GIF, multe dintre ele gratuite.

Dimensiunea și rezoluția imaginii

Un lucru pe care imaginile GIF, JPEG si PNG le au in comun este faptul ca sunt toate imaginile bitmap (numite si raster). Atunci când măriți imaginea bitmap, puteți vedea că este ca un mozaic format din mai mulți pixeli (pătrate mici, colorate). Acestea sunt diferite de grafica vectorială, care sunt alcătuite din linii netede și zone pline, toate bazate pe formule matematice.

La revedere, salut pixeli!

Dacă ați folosit imagini bitmap pentru imprimare sau pe Web, este posibil să fiți familiarizați cu rezoluția termenului, numărul de pixeli pe inch. În lumea de imprimare, rezoluțiile de rezoluție de 300 și 600 de pixeli pe inch (ppi) sunt comune.

Pe Web însă, noțiunea de "inci" este irelevantă. Deși s-ar putea să fi creat o imagine la 72 de pixeli pe inch, este puțin probabil să măsoare exact un inch când este afișat. De fapt, odată cu apariția ecranelor cu densitate ridicată, cum ar fi ecranul Apple Retina, chiar și noțiunea de "pixel" a devenit mult mai complicată. Dacă eliminați centimetri, trebuie să aruncați și "pixeli per inch". Designerii web își măsoară imaginile în numărul total de pixeli, deci rezoluția imaginii nu este relevantă din punct de vedere tehnic. Majoritatea designerilor își creează imaginile la 72ppi doar pentru a intra în parcul de bilete. Atunci când creez toate imaginile la 72ppi și le văd la 100% în Photoshop, le păstrează în proporție una cu alta și le afișează la aproximativ dimensiunea pe care o vor apărea pe un monitor de birou. 72ppi este o rezoluție bună de pornire atunci când creați imagini care vizează afișaje de înaltă densitate (precum displayul Apple Retina); doar dublati dimensiunile pixelilor.

Nebunie cu pixel

Nu cu mult timp în urmă, am putea conta pe pixelii dintr-o cartografiere a imaginilor pe unu cu pixelii hardware din monitorul desktop. În cea mai mare parte, acest lucru este încă adevărat, dar au existat evoluții în tehnologie care încalcă această regulă.

În primul rând, multe browsere scot automat dimensiunile mari pentru a se încadra în fereastra browserului, indiferent de mărimea sa și pentru a permite utilizatorilor să mărească paginile web, astfel că sa pierdut maparea 1: 1. Imaginile sunt în mod evident reduse pentru a se potrivi și dispozitivelor portabile mici.

Producătorii au împins rezoluția afișajelor mai mari și mai mari. Ca urmare, un pixel hardware real este atât de mic încât imaginile și textul ar fi mici dacă ar fi reprezentate unul la altul. Pentru a compensa, dispozitivele utilizează o măsurătoare denumită pixel la care sunt mapate pixelii din imaginile, textul și regulile CSS. Pe Apple Retina afișează pe iPhones, iPads și MacBook Pro mai noi, lățimea unui pixel de referință este echivalentă cu doi pixeli hardware. Pe unele tablete Android, un pixel de referință este de 1,5 pixeli hardware. Aceasta adaugă un nou nivel de complexitate joburilor noastre ca designeri web.

Redimensionarea imaginilor

Deoarece imaginile sursă, în general, nu sunt potrivite pentru Web, dimensiunea imaginilor mai mici reprezintă o mare parte din timpul petrecut în a face producția grafică, astfel încât redimensionarea imaginii este o abilitate de bază bună.

O modalitate ușoară de redimensionare a unei imagini utilizând funcția Salvare pentru Web a aplicației Photoshop. Cu această metodă, grafica web exportată este redimensionată, dar originalul rămâne neschimbat. Acest lucru ușurează salvarea aceleiași imagini la mai multe dimensiuni adecvate pentru diferite dispozitive în doar câțiva pași. Pentru alte programe sau dacă doriți mai mult control asupra calității finale a imaginii, consultați bara laterală Utilizarea imaginii după desfășurarea exercițiului.

Redimensionarea unei imagini mai mici în Photoshop

Avem o fotografie de înaltă rezoluție și o dimensiune pentru a se potrivi pe o pagină web. Imaginea sursă, ninja.tif, este disponibilă împreună cu materialele la www.learningwebdesign. com / 4e / materiale /.

Deschidem fișierul ninja.tif din Photoshop. Selectăm toți pixelii din imagine (Selectați → Toate), apoi verificați dimensiunile pixelilor din panoul Informații (Figura următoare A). Dacă panoul Informații nu este deschis, selectați Fereastră → Info. Dacă măsurătorile sunt afișate în inchi sau în altă unitate, schimbați-l la pixeli în Preferințe (Photoshop → Preferences → Units & Rulers). Imaginea noastră ninja este de 1600 x 1600 pixeli, care este prea mare pentru o pagină web. Pentru acest exemplu, să presupunem că spațiul în aspectul paginii este de 400 pixeli pătrați.

Acum vom redimensiona imaginea și vom salva ca JPEG într-o singură lovitură. Selectăm Salvare pentru Web din meniul Fișier. Selectăm JPEG B din meniul pop-up Format.

Utilizând setările pentru dimensiunea imaginii din jumătatea de jos a coloanei Setări C, introduceți dimensiunile pe care doriți ca JPEG-ul final să fie atunci când este salvat, în acest caz 400 pixeli. Când este bifată pictograma link, înălțimea se schimbă automat când introduceți noua lățime.

Apoi, selectați Calitate D. Bicubic sau Bicubic Sharper oferă cele mai bune rezultate atunci când dimensiunea este mai mică. Veți vedea imaginea redimensionată în vizualizarea Optimizată imagine (selectați fila din partea de sus dacă nu este deja afișată).

Faceți clic pe Salvați E, dați fișierului un nume și selectați un director în care să îl salvați. Când se închide caseta de dialog Salvare pentru Web, veți vedea că fișierul original ninja.tif este neschimbat, astfel încât să puteți realiza imagini suplimentare la diferite mărimi în același mod. Salvarea fișierului salvează cele mai recente setări de export.

Figură 3.22. Utilizând caseta de dialog Salvare pentru Web pentru a redimensiona o imagine

Utilizarea dimensiunii imaginii

Dacă sunteți un obsedat de control al calității imaginii, puteți prefera redimensionarea imaginii utilizând caseta de dialog Dimensiune imagine. În Fireworks, Modify → Canvas … → Image Size… vă oferă un set similar de opțiuni.

Asigurați-vă că în partea de jos este bifată funcția Resample Image și Restriction Proportions și selectați Bicubic (sau Bicubic Sharper) ca setare Quality (Calitate). Rezoluția nu este importantă pentru grafica web, așa cum am discutat anterior.

Apoi introduceți dimensiunile finale ale pixelilor dorite în partea de sus a casetei și faceți clic pe OK. Dublu-clic pe instrumentul lupă (nu este afișat) afișează imaginea redimensionată la 100%.

Acum puteți aplica filtre de ascuțire și alte efecte și, odată ce sunteți mulțumit de imagine, utilizați Save For Web pentru a crea versiunea web.

Consider că redimensionarea unei imagini extrem de mari în câteva etape ajută la păstrarea calității. În primul rând, o redimensionez la o dimensiune între ele și o ascuți cu un filtru de ascuțire. Apoi o redimensionez la dimensiunile sale finale și ascuți din nou. Nu puteți face acest lucru cu metoda Save For Web.

Figură 3.23. Caseta de dialog Dimensiune imagine în Photoshop

Layer interactiv

JavaScript ne permite să adăugăm interacțiunea cu paginile noastre ca o completare a stratului structural care este markup și stratul de prezentare care este CSS.

Ne dă o cantitate imensă de control asupra interacțiunilor unui utilizator cu o pagină – acel control chiar se extinde dincolo de pagina în sine și ne permite să modificăm comportamentele încorporate ale browserului. Un exemplu simplu de comportament al browserului modificat în JavaScript: validarea formularului de intrare. Înainte de trimiterea unui formular, un script de validare se leagă prin toate intrările asociate, verifică valorile lor în raport cu un set de reguli și fie permite transmiterea formularului, fie o împiedică.

Cu JavaScript, putem să construim experiențe mai bogate pentru utilizatori, cum ar fi paginile care răspund interacțiunilor lor, fără a fi nevoie să le direcționăm către o pagină nouă, chiar și atunci când solicită noi date de la server. De asemenea, ne permite să umplem lacunele în care funcționalitatea încorporată a browserului ar putea scădea, să lucreze în jurul unor bug-uri majore sau să redea caracteristici noi înapoi la browserele mai vechi care nu au suport nativ pentru ele. Pe scurt, JavaScript ne permite să creăm interfețe mai avansate decât HTML și CSS ar putea face singure.

Ce JavaScript nu este (mai mult)

Deși ne oferă o mulțime de putere asupra comportamentului browserului, nu este greu să ne imaginăm cum ar putea obține JavaScript o reputație proastă. Pentru a face o pagină inutilizabilă cu CSS (nu este vorba de cuvinte), trebuie să fim explicit despre asta. corp {display: nici unul; } nu este ceva care, în general, o face în foile noastre de stil accidental, deși nu mi-ar fi pus în mod necesar trecutul. Este chiar mai greu să faci o greșeală de markup care ar împiedica funcționarea paginii – o etichetă puternică deschisă în mod eronat nu poate avea ca rezultat cea mai frumoasă pagină vreodată, dar este puțin probabil să împiedice pe cineva să o folosească. Și când erorile CSS și de marcare generează probleme majore, este posibil să se întâmple într-un mod vizibil, deci dacă HTML sau CSS rupe complet pagina, probabil că vom vedea în testele noastre. Cu toate acestea, JavaScript diferă. De exemplu, dacă includeți un script mic pentru a valida o adresă de stradă introdusă într-o intrare de formular, pagina se va face exact așa cum se așteaptă – și atunci când punem în "5 Street Address" pentru a testa și a obține erori, validarea formularului par să se întâmple conform planului. Dar dacă nu suntem atenți la regulile pentru scriptul nostru de validare, un utilizator cu o adresă formatată în mod ciudat ar putea fi foarte bine împiedicat să trimită informații valide. Pentru ca noi să încercăm bine, ar trebui să încercăm cât mai multe adrese ciudate pe care le-am putea găsi și am fi fost nevoiți să pierdem câteva.

Înapoi atunci când web-ul a fost mai mic și profesia de dezvoltare web a fost nouă, noi nu am definit clar cele mai bune practici pentru manipularea îmbunătățirilor JavaScript. Testarea consecventă a fost imposibilă, iar suportul pentru browser a fost incredibil de neclar. Această combinație a condus la o mulțime de sclipici, sclipitoare de site-uri care își fac drumul în sălbăticie. Între timp, unele dintre cele mai neplăcute tipuri de internet s-au trezit dintr-o dată cu puterea de a influența comportamentul browserelor utilizatorilor, reținute numai de limite care erau incompatibile în cel mai bun caz și inexistente în cel mai rău caz. Acest lucru nu a fost întotdeauna folosit pentru totdeauna. JavaScript a prins o mulțime de fulgi în acele zile. A fost văzut ca fiind nesigur, și chiar periculos – un motor cu ferestre pop-up construite, care se ascundea undeva sub suprafața browserului.

Timpurile s-au schimbat însă. Aceleași tipuri de eforturi în standardele web care ne-au adus marcaj semantic semnificativ și sustenabil CSS au făcut, de asemenea, sintaxa JavaScript mai consistentă de la browser la browser și a stabilit constrângeri rezonabile în jurul părților comportamentului browserului pe care îl poate influența. În același timp, cadrele JavaScript "helper", cum ar fi jQuery, construite pe baza celor mai bune practici și concepute pentru a normaliza quirks și bug-uri de browser, ajută acum dezvoltatorii să scrie mai bine și mai rapid JavaScript.

DOM: Cum comunică JavaScript cu pagina

JavaScript comunică cu conținutul paginilor noastre printr-un API numit Model Object Model sau DOM (http://bkaprt.com/jsfwd/00-02/). Domeniul DOM este ceea ce ne permite să accesăm și să manipulăm conținutul unui document cu JavaScript. La fel ca API-ul Flickr ne-ar permite să citim și să scriem informații la serviciul lor, DOM API ne permite să citim, să modificăm și să eliminăm informațiile din documente – să schimbăm lucrurile pe pagina web.

DOM-ul servește două scopuri. Primul este furnizarea JavaScript cu o "hartă" structurată a paginii prin traducerea marcajului nostru într-un formular pe care JavaScript (și multe alte limbi) îl pot înțelege. Fără DOM, JavaScript nu ar avea nici un sens al conținutului unui document. Întregul conținut al documentului – fiecare parte a documentului nostru – este un "nod" pe care JavaScript îl poate accesa prin DOM. Fiecare element, comentariu, și chiar fragment de text este un nod.

Cel de-al doilea scop al DOM este să furnizeze JavaScript cu un set de metode și funcții care permit accesul la nodurile mapate prin preluarea unei liste a tuturor etichetelor p din document, de exemplu, sau colectarea tuturor elementelor cu o clasă de .toggle care au o . elementul părinte suprapus. Aceste metode sunt standardizate în browsere, cu nume atractive precum getElementsByTagName sau createTextNode. Având aceste metode construite în JavaScript poate duce la o mică confuzie asupra locului în care JavaScript se termină și DOM începe, dar, din fericire, nu este ceva ce trebuie să ne îngrijorăm încă.

Figură 3.24. Expresia "copac DOM" are sens dacă stați pe cap.

Creați antete de tab Togglable

Pasul 1) Adăugați cod HTML:

<div id="London" class="tabcontent">
  <h1>London</h1>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h1>Paris</h1>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h1>Tokyo</h1>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="Oslo" class="tabcontent">
  <h1>Oslo</h1>
  <p>Oslo is the capital of Norway.</p>
</div>

<button class="tablink" onclick="openCity('London', this, 'red')"id="defaultOpen">London</button>
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button>
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button>
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button>

Creați butoane pentru a deschide un anumit conținut. Toate elementele <div> cu clasa = "tabcontent" sunt ascunse implicit (cu CSS & JS). Când utilizatorul face clic pe un buton – se va deschide conținutul filei care "se potrivește" acestui buton.

Pasul 2) Adăugați CSS:

Stilul butoanelor și al conținutului filelor:

/* Style the tab buttons */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}

/* Change background color of buttons on hover */
.tablink:hover {
  background-color: #777;
}

/* Set default styles for tab content */
.tabcontent {
  color: white;
  display: none;
  padding: 50px;
  text-align: center;
}

/* Style each tab content individually */ 
#London {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:blue;}
#Oslo {background-color:orange;}

Pasul 3) Adăugați JavaScript:

function openCity(cityName, elmnt, color) {
  // Hide all elements with class="tabcontent" by default */
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Remove the background color of all tablinks/buttons
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }

  // Show the specific tab content
  document.getElementById(cityName).style.display = "block";

  // Add the specific color to the button used to open the tab content
  elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

The <form> Element

Elementul <form> HTML definește o formă care este utilizată pentru colectarea intrărilor de utilizator:

<form>
.
form elements
.
</form>

Un formular HTML conține elemente de formular.

Elementele formularului sunt diferite tipuri de elemente de intrare, cum ar fi câmpurile de text, casetele de selectare, butoanele radio, butoanele de trimitere și multe altele.

Elementul <input>

Elementul <input> este cel mai important element de formular.

Elementul <input> poate fi afișat în mai multe moduri, în funcție de atributul type.

Aici sunt cateva exemple:

Introducerea textului

<input type = "text"> definește un câmp de introducere dintr-o singură linie pentru introducerea textului:

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

Acesta este modul în care va arăta într-un browser:

Nume

Prenume:

Introducerea butonului radio

<input type = "radio"> definește un buton radio.

Butoanele radio permit unui utilizator să selecteze unul dintr-un număr limitat de opțiuni:

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

Acesta este modul în care codul HTML de mai sus va fi afișat într-un browser:

Male
 Female
 Other

Butonul de trimitere

<input type = "submit"> definește un buton pentru trimiterea datelor unui formular unui formular de formular.

Formularul handler este de obicei o pagină de server cu un script pentru prelucrarea datelor de intrare.

Formularul handler este specificat în atributul de acțiune al formularului:

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

Acesta este modul în care codul HTML de mai sus va fi afișat într-un browser:

Top of Form

First name:
 
Last name:

Bottom of Form

Atributul de acțiune

Atributul de acțiune definește acțiunea care trebuie efectuată la trimiterea formularului.

În mod normal, datele formularului sunt trimise către o pagină web de pe server când utilizatorul face clic pe butonul Trimiteți.

În exemplul de mai sus, datele formularului sunt trimise către o pagină de pe server numită "/action_page.php". Această pagină conține un script de pe server care gestionează datele formularului:

<form action="/action_page.php">

Dacă atributul de acțiune este omis, acțiunea este setată la pagina curentă.

Atributul țintă

Atributul țintă specifică dacă rezultatul trimis se va deschide într-o nouă filă de browser, un cadru sau în fereastra curentă.

Valoarea implicită este "_self", ceea ce înseamnă că formularul va fi trimis în fereastra curentă.

Pentru a face ca rezultatul să fie deschis într-o nouă filă de browser, utilizați valoarea "_blank":

<form action="/action_page.php" target="_blank">

Alte valori legale sunt "_parent", "_top" sau un nume care reprezintă numele unei iframe.

Metoda Atributul

Metoda atributul specifică metoda HTTP (GET sau POST) care trebuie utilizată la trimiterea datelor de formular:

<form action="/action_page.php" method="get">

Sau

<form action="/action_page.php" method="get">

Când să folosiți GET?

Metoda implicită la trimiterea datelor din formular este GET.

Cu toate acestea, când se utilizează GET, datele formularului trimis vor fi vizibile în câmpul adresei paginii:

/action_page.php?firstname=Mickey&lastname=Mouse

Note despre GET:

Adăugă formulare-date în URL-ul în perechi de nume / valoare

Durata unei adrese URL este limitată (aproximativ 3000 de caractere)

Nu utilizați niciodată GET pentru a trimite date sensibile! (va fi vizibilă în adresa URL)

Utile pentru trimiterile de formulare unde un utilizator dorește să marcheze rezultatul

GET este mai bine pentru date nesigure, cum ar fi șiruri de interogare în Google

Image Zoom

Cum să creămi o mărire a imaginii.

Pasul 1) Adăugați cod HTML:

<div class="img-zoom-container">
  <img id="myimage" src="img_girl.jpg" width="300" height="240" alt="Girl">
  <div id="myresult" class="img-zoom-result"></div>
</div>

Pasul 2) Adăugați CSS:

Containerul trebuie să aibă o poziționare "relativă".

* {box-sizing: border-box;}

.img-zoom-container {
  position: relative;
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /*set the size of the lens:*/
  width: 40px;
  height: 40px;
}

.img-zoom-result {
  border: 1px solid #d4d4d4;
  /*set the size of the result div:*/
  width: 300px;
  height: 300px;
}

Pasul 3) Adăugați JavaScript:

function imageZoom(imgID, resultID) {
  var img, lens, result, cx, cy;
  img = document.getElementById(imgID);
  result = document.getElementById(resultID);
  /* Create lens: */
  lens = document.createElement("DIV");
  lens.setAttribute("class", "img-zoom-lens");
  /* Insert lens: */
  img.parentElement.insertBefore(lens, img);
  /* Calculate the ratio between result DIV and lens: */
  cx = result.offsetWidth / lens.offsetWidth;
  cy = result.offsetHeight / lens.offsetHeight;
  /* Set background properties for the result DIV */
  result.style.backgroundImage = "url('" + img.src + "')";
  result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
  /* Execute a function when someone moves the cursor over the image, or the lens: */
  lens.addEventListener("mousemove", moveLens);
  img.addEventListener("mousemove", moveLens);
  /* And also for touch screens: */
  lens.addEventListener("touchmove", moveLens);
  img.addEventListener("touchmove", moveLens);
  function moveLens(e) {
    var pos, x, y;
    /* Prevent any other actions that may occur when moving over the image */
    e.preventDefault();
    /* Get the cursor's x and y positions: */
    pos = getCursorPos(e);
    /* Calculate the position of the lens: */
    x = pos.x – (lens.offsetWidth / 2);
    y = pos.y – (lens.offsetHeight / 2);
    /* Prevent the lens from being positioned outside the image: */
    if (x > img.width – lens.offsetWidth) {x = img.width – lens.offsetWidth;}
    if (x < 0) {x = 0;}
    if (y > img.height – lens.offsetHeight) {y = img.height – lens.offsetHeight;}
    if (y < 0) {y = 0;}
    /* Set the position of the lens: */
    lens.style.left = x + "px";
    lens.style.top = y + "px";
    /* Display what the lens "sees": */
    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /* Get the x and y positions of the image: */
    a = img.getBoundingClientRect();
    /* Calculate the cursor's x and y coordinates, relative to the image: */
    x = e.pageX – a.left;
    y = e.pageY – a.top;
    /* Consider any page scrolling: */
    x = x – window.pageXOffset;
    y = y – window.pageYOffset;
    return {x : x, y : y};
  }
}

Pasul 4) Inițiați efectul de zoom:

<script>
imageZoom("myimage", "myresult"); 
</script>

LIMBAJUL PHP

În cazul paginilor statice create cu HTML utilizatorul poate vedea doar imagini și text. Folosind PHP însă vom putea crea așa numitele pagini dinamice în care apare elementul de interactivitate: se pot prelua date din formulare realizate în PHP, citi, prelucra și afișa. De asemenea se poate face interacțiunea cu o bază de date creată pe un server.

Pentru a putea lucra cu PHP trebuie în primul rând să avem acces la un server pe care rulează PHP (acesta poate fi server separat sau server virtual creat pe calculatorul personal). Acest server (cel virtual) poate fi instalat folosind pachetul WAMP care este free pe internet.

Observații:

Codul PHP poate fi scris folosind editorul Notepad;

În cazul în care lucrăm cu Wamp, fișierul care conține codul programului php trebuie să aibă extensia php și să fie salvat în subfolderul WWW din folderul WAMP;

Lansarea în execuție se face utilizând un browser (expl Internet Explorer) în care se va scrie în bara de adrese: http://localhost/<nume_fisier.php> (Expl: http://localhost/exemplu.php).

Crearea primului script php:

<?php

echo ”Primul script php”;

?>

Obs: echo – afișează un mesaj

Combinarea codului HTML cu cod PHP:

Acest lucru se întâmpla foarte des. În interiorul unui script HTML poate exista script PHP delimitat de etichetele <?php și ?> însă fișierul final trebuie sa fie PHP.

Exemplu:

<html>

<body>

Text combinat HTML cu PHP

<?php

echo ”Text scris cu PHP”;

?>

</body>

</html>

Comentarii în scripturi:

# – un tip de comentariu pentru un rând

// – un alt tip de comentariu pentru un rând

Folosind php-ul se pot executa anumite operații asupra fișierelor aflate pe server cum ar fi:

fopen() = deschide fisierul indicat fclose() = inchide fisierul

fread() = citeste continutul fisierului fwrite() = scrie in fisier

filesize() = indica dimensiunea fisierului

Sintaxa funcției fopen() este:

fopen(param1, param2);

param1 = fișierul, calea către fișier sau adresa fișierului care va fi deschis param2 = modul in care va fi deschis fișierul, si poate avea valorile:

Exemplu: fopen('fisier.html',"w")

r = fișier deschis doar pentru citire

r+ = fișier deschis doar pentru citire si scriere w = fișier deschis doar pentru scriere

w+ = fișier deschis pentru citire si scriere iar daca nu exista fișierul îl creează a = fișier deschis pentru adăugare la sfârșit

a+ = fișier deschis adăugare la sfârșit iar daca nu exista fișierul îl creează t = fișier deschis in mod text

b = fișier deschis in mod binar sau combinații ale acestora.

Baze de date – noțiuni introductive

Bazele de date sunt colecții de date, aranjate într-o anumită formă, asupra cărora se pot face diferite operații ca:

Crearea bazei de date;

Conectarea la baza de date;

Inserarea datelor în baza de date;

Ștergerea datelor din baza de date;

Adăugarea sau modificarea datelor;

În general, o bază de date este alcătuită din una sau mai multe tabele, între acestea putându-se stabili diferite relații. Acest lucru oferă bazei de date proprietatea de bază de date relațională.

Un tabel este alcătuit din coloane (numite câmpuri) și rânduri (numite înregistrări).

Pentru implementarea unei baze de date este nevoie de un sistem de gestiune a bazelor de date(SGBD). Exemple de astfel de SGBD -uri:

Microsoft Access;

Visual Foxpro;

MySQL;

Oracle;

etc.

Deși SGBD MySQL este folosit foarte des împreună cu limbajul de programare PHP, cu MySQL se pot construi aplicații în orice limbaj major. Există multe scheme API disponibile pentru MySQL ce permit scrierea aplicațiilor în numeroase limbaje de programare pentru accesarea bazelor de date MySQL, cum are fi: C, C++, C#, Borland Delphi, Java, Perl, PHP, Python, FreeBasic, etc., fiecare dintre acestea folosind un tip specific API. O interfață de tip ODBC denumită MyODBC permite altor limbaje de programare ce folosesc această interfață, să interacționeze cu bazele de date MySQL cum ar fi ASP sau Visual Basic. În sprijinul acestor limbaje de programare, unele companii produc componente de tip COM/COM+ sau .NET (pentru Windows) prin intermediul cărora respectivele limbaje să poată folosi acest SGBD mult mai ușor decât prin intermediul sistemului ODBC. Aceste componente pot fi gratuite (ca de exemplu MyVBQL) sau comerciale (http://ro.wikipedia.org/ wiki/MySQL).

Tipuri de date folosite în MySQL(o parte din ele):

Int – număr întreg

Char – secțiune cu lungime fixă de max. 255 caracter

Varchar – secțiune variabilă de max 255 caractere

Float – număr real mic

Double – număr real mare

Text – și de maxim 65535 caractere

Date – data im format an-luna-zi

Time – ora in format oră-minut-secundă

Crearea unei baze de date în MySQL

Comanda folosită pentru creare unei baze de date, scrisă în linia de comandă a MySQL este:

CREATE DATABASE numele_bazei; Expl: create database elevi;

Obs: orice comanda scrisă în linia de comandă este terminată de ;

În continuare va trebui selectată baza de date (există posibilitatea să avem mai multe baze de

date). Acest lucru se face cu comanda USE numele_bazei_de_date; Expl: use elevi;

O bază de date poate conține una sau mai multe tabele. Pentru crearea unei tabele vom folosi comanda:

CREATE TABLE nume tabela (nume_camp1 tip_camp1, nume_camp2 tip_camp2,…….nume_campn tip_camp_n);

Expl:

Create table t1 (nume text, nota int);

Vizualizarea bazelor de date se face cu comanda SHOW DATAB ASES; Alte comenzi:

SHOW TABLES; – afișează tabelele existente in baza curenta

SHOW COLUMNS FROM nume_tabela; – afișează informații despre coloanele unui table DROP TABLE nume tabel; – șterge tabelul numit 'tabel_unu'

DROP DATABASE numele_bazei; – șterge baza de date cu numele 'numele_bazei'

Pentru crearea unei tabele cu ajutorul scriptului PHP va trebui mai întâi sa ne conectăm la baza

de date (vom folosi fișierul conexiune.php). Pentru exemplificare vom crea următorul tabel :

<?php

include “conexiune.php”

$table=”create table t1 (nume varchar(20), nota float) type MyISAM”; if(mysql_query($table))

{

echo “Tabelul a fost creat”;

}

else

{

echo “Tabelul nu a fost cre at”;

}

mysql_close($conexiune);

?>

Observații:

Asupra coloanelor se pot aplica unele restricții ca: UNSIGNED – nu vor mai fi valori negative ci vor începe de la 0.

AUTO_INCREMENT funcționează cu orice tip intreg. La fiecare rând nou adăugat în baza de date numărul asociat va fi incrementat.

NULL- fără valoare (diferit de spațiu sau zero).

NOT NULL – orice înregistrare va fi considerată ceva. Expl:

……………………

$table="CREATE TABLE t1(id int(3) NOT NULL AUTO_INCREMENT, nume varchar(20) NOT NULL , nota float NOT NULL)

…………………………………….

Conectarea la o bază de date în MySQL

Pentru conectarea la o bază de date vom folosi următorul script (pentru a-l putea utiliza și în alte aplicații îl vom salva cu numele conexiune.php ):

<?php

$host="localhost"; //host -ul

$user="root"; //userul

$password="pass"; //parola

$database="t1"; //baza de date

$conexiune=mysql_connect($host,$user,$password) or die ("Nu ma pot conecta la baza de date");

$bazadate=mysql_select_db($database,$c onexiune) or die ("Nu gasesc baza de date");

?>

înlocuind bineînțeles hostul, user-ul și parola dacă este cazul

mysql_connect() – este functia prin care ne conectam la serverul MySQL

$conexiune – va avea o valoarea TRUE sau FALSE functie de rezulta tul conectarii la serverul MySQL folosind functia mysql_connect()

mysql_select_db – este functia care stabileste baza de date la care ne vom conecta

Puteti modifica variabilele din fisierul conexiune.php in functie de configurarile propriei baze de date:

$hostname=adresa serverului, de cele mai multe ori este localhost

$username=username-ul de conectare la baza de date

$password= parola de conectare la baza de date

$database=numele bazei de date mysql_close($conexiune); – inchide baza de date

Inserarea datelor într-o tabelă din MySQL

Pentru inserarea datelor într-o tabela din MySQL vom utiliza un formular scris în HTML și un fișier PHP.

Instrucțiunea folosită pentru inserare este INSERT, cu următoarea sintaxă:

INSERT INTO nume_tabel (coloana1, coloana2,…, coloanan) values ('valoare1','valoare2',…,'valoaren');

Exemplificând:

INSERT INTO nume_tabel (camp1, camp2, camp3) VALUES (valoarea1, valoarea2, valoarea3);

Această instrucțiune va introduce în tabelul cu numele 'tabel', in 'camp1' 'valoarea1', in 'camp2'

'valoarea2' si in 'camp3' 'valoarea3'. Tabelul arată astfel:

Observație: Se poate omite una din coloane la inserare.

INSERT INTO nume_tabel (camp1, camp2) VALUES (valoarea1, valoarea2); sau:

INSERT INTO tabel VALUES (valoarea1, valoarea2, valoarea3); dacă introducem valori în toate câmpurile tabelului

Exemplu de introducere a datelor în tabela t1 din baza de date elevi folosind un formular (tabela de mai sus are câmpurile nume și nota):

<html>

<head><title>Exemplu de fomular</title>

</head>

<body>

<b>Adaugare date</b>

<form method="POST" action="inserare.php"> Nume: <input type="text" name="nume"><br> Nota: <input type="text" name="nota"><br>

<input type="submit" value="Trimite">

</form>

</body>

</html>

Rezultatul este:

/* fisierul inserare.php */

<?php

include "conexiune.php";

$id=$_POST['id'];

$nume=$_POST['nume'];

$nota=$_POST['nota'];

$query="INSERT INTO t1 (nume, nota) VALUES ('$nume','$nota')"; if (!mysql_query($query)) {

die(mysql_error());

} else {

echo "datele au fost introduse";

}

mysql_close($conexiune);

?>

Rezultatul este:

ÎNCĂRCAREA PAGINILOR pe web

Deoarece browserul dvs. poate afișa documente chiar de pe hard disk (cu alte cuvinte, le puteți vizualiza local), nu aveți nevoie de o conexiune la Internet pentru a crea pagini web. Cu toate acestea, în cele din urmă, veți dori să le obțineți acolo pentru ca lumea să vadă.

www. „YOU“ .com!

Adresa dvs. de pagină de pornire este identitatea dvs. pe Web. Dacă publicați o pagină de tip justfor-fun și doriți să economisiți bani, având propriul dvs. colț personal la un domeniu mai mare (cum ar fi www.earthlink.com/members/~littlechair sau littlechair.blogspot.com) ar putea fi bine. Mai probabil, veți dori propriul nume de domeniu care să reprezinte mai bine afacerea sau conținutul dvs. Pentru o mică taxă anuală, oricine poate înregistra un nume de domeniu.

Ce e într-un nume?

Un nume de domeniu este un nume citit de om asociat cu o adresă IP numerică ("IP" înseamnă Internet Protocol) pe Internet. În timp ce computerele știu că site-ul meu se află pe un server la punctul 66.226.64.6 din Internet, tu și cu mine putem numi "littlechair.com". Adresa IP este importantă, totuși, pentru că veți avea nevoie de unul (bine, doi ) pentru a vă înregistra numele de domeniu.

Înregistrarea unui domeniu

Înregistrarea unui nume de domeniu este ușor și destul de ieftin. Există două modalități prin care se poate face acest lucru: poate compania dvs. de găzduire să o facă pentru dvs. sau să obțineți unul direct de la un registrator. Acesta a devenit obișnuit pentru companiile care furnizează găzduire web pentru a înregistra nume de domenii ca parte a procesului de înființare a unui cont. Acestea oferă acest serviciu pentru comoditatea dvs. de one-stop-shopping. Dar asigurați-vă că întrebați în mod specific – unii vă cer încă să vă înregistrați propriul domeniu. De asemenea, vă puteți înregistra unul singur direct de la un registrator de nume de domeniu. Registrele de nume de domeniu sunt reglementate și supravegheate de ICANN (Internet Corporation pentru numere și numere atribuite). De asemenea, ICANN se asigură că numele de domeniu sunt atribuite unui singur proprietar. Există doar un singur registrator de nume de domeniu, Network Solutions, dar acum există sute de regiștri acreditați de ICANN și nenumărați reselleri. Va trebui să faceți propriile dvs. cercetări pentru a găsi un registrar care vă place. Pentru a vedea lista completă a registratorilor acreditați, vizitați www.internic.net/regist.html. Unele dintre cele mai populare sunt Network Solutions (www.networksolutions.com), registratorul domeniului original; Register.com (www.register.com), care a fost, de asemenea, pe o perioadă lungă de timp; și GoDaddy (www.godaddy.com), cunoscută pentru prețurile sale de rock-bottom. Toți registratorii din S.U.A. pot înregistra nume de domenii care se termină în .com, .net sau .org, în timp ce unele oferă extensii mai noi și internaționale.

Toți registratorii din S.U.A. pot înregistra nume de domenii care se termină în .com, .net sau .org, în timp ce unele dintre ele oferă extensii mai noi și internaționale (a se vedea bara laterală, Dot Ce?).

O companie de înregistrare a domeniului vă va solicita următoarele:

Un contact administrativ pentru cont (nume și adresă)

Un contact de facturare pentru cont (nume și adresă)

Un contact tehnic pentru cont (în general numele și adresa serviciului de găzduire)

Două adrese IP

Dacă nu aveți adrese IP, majoritatea serviciilor de registru de domeniu vor oferi "parcarea" site-ului pentru dvs., pentru o taxă suplimentară. Parcarea unui site înseamnă că ați rezervat numele de domeniu, dar nu puteți face nimic cu el până când nu veți obține un server real pentru site. Practic, plătiți pentru privilegiul de a împrumuta anumite adrese IP. Asigurați-vă că faceți cumpărături cu înțelepciune. Pe lângă taxa de înregistrare de 35 USD pe an, nu cheltuiți mai mult de 35 până la 50 USD pe an pentru a parca un site. După cum am menționat mai devreme, unele companii de înregistrare de domenii oferă, de asemenea, servicii de bază de găzduire.

Este disponibil?

S-ar putea să fi auzit deja că numele de domeniu simplu din domeniul top-level coveted.com sunt foarte greu de preluat. Înainte de a vă atașa prea mult la un anumit nume, ar trebui să faceți o căutare pentru a vedea dacă este încă disponibilă. Toate site-urile de înregistrare a numelor de domenii au o căutare de nume de domeniu chiar pe prima pagină. Acesta este primul pas pentru crearea unui nou domeniu.

Dacă "numele dvs. de domeniu" la ".com" nu este disponibil, încercați unul dintre celelalte sufixe de nivel superior, cum ar fi .org, .info sau .us. De asemenea, puteți încerca variante pe numele propriu-zis. De exemplu, dacă am descoperit că jenrobbins.com nu a fost disponibilă, s-ar putea să fiu dispus să mă mulțumesc pentru jenrobbinsonline.com sau jenniferrobbins.com.

Unele site-uri de înregistrare vor furniza o listă cu alternative disponibile pentru dvs.

Dacă aveți inima setată pe un nume de domeniu și un buget pentru a crea o copie de rezervă, vă puteți oferi să cumpărați site-ul de la proprietar. Pentru a afla cine deține un nume de domeniu, puteți face o căutare WhoIs pe acel domeniu. Baza de date WhoIs listează numele și informațiile de contact pentru fiecare domeniu (cu excepția cazului în care proprietarul plătește suplimentar pentru a păstra informațiile de contact private). Puteți găsi o funcție de căutare WhoIs pe site-urile majorității registratorilor.

Găsirea Spațiului de Server

Pentru ca paginile dvs. să fie pe Web, acestea trebuie să locuiască pe un server web. Deși este posibil să rulați software-ul serverului de tip web pe computerul dvs. desktop (de fapt, fiecare nou Mac vine cu software de server de web instalat), este mai probabil că veți dori să închiriați spațiu pe un server care este dedicat sarcinii.

Căutarea spațiului pe un server web este, de asemenea, numită găsirea unei gazde pentru site-ul dvs.

Din fericire, există multe opțiuni de găzduire, variind în preț de la liber la multe mii de dolari pe an. Cel pe care îl alegeți ar trebui să corespundă obiectivelor de publicare. Va fi site-ul dvs. de afaceri sau personal? Va primi câteva hit-uri pe lună sau pe mii? Aveți nevoie de servicii cum ar fi e-commerce sau media streaming? Cât puteți să permiteți (sau clientului dvs.) să plătiți pentru serviciile de găzduire?

Dacă lucrați ca liber profesionist, clienții dvs. își vor asuma probabil responsabilitatea de a crea spațiu de server pentru site-urile lor. Clienții mai mici vă pot cere asistență în găsirea de spațiu, deci este bine să cunoașteți opțiunile disponibile.

În această secțiune, vă voi prezenta câteva dintre opțiunile disponibile pentru a vă aduce paginile web online. Acest lucru vă va oferi o idee generală despre tipul de serviciu de care aveți nevoie. Cu toate acestea, trebuie să continuați să faceți o cercetare corectă pentru a găsi cea potrivită pentru dvs.

În curtea ta proprie

Este posibil să nu aveți nevoie de magazin pentru a găzdui deloc. Dacă unul dintre aceste scenarii vă descrie, este posibil să aveți spațiu de server acolo pentru a lua.

Contul studentului.

Dacă sunteți student, vi se poate da un spațiu pentru a publica pagini personale ca parte a contului dvs. școlar. Adresați-vă departamentului care vă oferă contul dvs. de e-mail cum să profitați de spațiul web.

Servicii online și ISP-uri.

Dacă aveți un cont la un serviciu online cum ar fi America Online (www.aol.com) sau CompuServe (www.compuserve.com), probabil că aveți deja un spațiu de servere web care așteaptă să fie completat. Apple Computer oferă spațiu web pentru proprietarii de Mac cu conturi .Mac. Serviciile online oferă de obicei instrumente, șabloane și alte tipuri de asistență pentru a face pagini web și pentru a le putea accesa online. De asemenea, furnizorii de servicii de Internet (Internet Service Providers), cum ar fi Earthlink, oferă pentru membrii lor un spațiu de server de 10 MB.

Servere de companie.

Dacă lucrați ca designer web, este posibil să existe un server conectat la rețeaua companiei dvs. În acest caz, puteți să copiați fișierele pe serverul specificat.

Firmele de web design au de obicei servere pentru scopuri de testare.

Servicii de gazduire profesionala

Dacă lucrați pe un site de afaceri serios sau dacă sunteți doar serios cu privire la prezența dvs. personală pe web, va trebui să închiriați spațiu de server de la un serviciu de găzduire profesională. Ceea ce plătiți este un spațiu pe unul dintre serverele lor, o lățime de bandă pe lună pe conexiunea lor la Internet și suport tehnic. De asemenea, aceștia pot furniza astfel de servicii suplimentare, cum ar fi liste de corespondență, căruțe de cumpărături și așa mai departe. Serviciul de găzduire este responsabil pentru a vă asigura că site-ul dvs. este online și disponibil non-stop, non-stop.

Companiile de găzduire oferă, de obicei, o gamă largă de pachete de servere, de la doar câteva megabiți (MB) de spațiu și o singură adresă de e-mail la soluții complete de comerț electronic cu multe clopote și fluiere. Desigur, cu cât mai mult spațiu server și mai multe caracteristici, cu atât va fi mai mare factura lunară, așa că magazinul cu înțelepciune.

Avantaje:

Pachetele scalabile oferă soluții pentru toate dimensiunile site-ului Web. Cu unele cercetări, puteți găsi o gazdă care să corespundă cerințelor și bugetului dumneavoastră.

Veți obține propriul nume de domeniu (de exemplu, www.littlechair.com)

Dezavantaje:

Găsirea celui potrivit necesită cercetare.

Soluțiile robuste pentru servere pot deveni scumpe și trebuie să urmăriți taxele ascunse.

Cumpărături pentru servicii de găzduire

Când v-ați hotărât să găsiți o gazdă pentru site-ul dvs. web, ar trebui să începeți prin evaluarea nevoilor dvs. Următoarele sunt câteva dintre primele întrebări pe care ar trebui să le întrebați pe dvs. sau pe clientul dvs.:

Este un site comercial sau personal? Unele servicii de găzduire percep tarife mai mari pentru site-urile de afaceri decât pentru site-urile personale. Asigurați-vă că vă înscrieți pentru pachetul de găzduire adecvat pentru site-ul dvs. și nu încercați să purificați un site comercial într-un cont personal.

Ai nevoie de un nume de domeniu? Verificați dacă compania de găzduire va înregistra un nume de domeniu pentru dvs., ca parte a prețului pachetului. Acest lucru vă salvează un pas și taxa suplimentară pentru înregistrarea domeniului în altă parte.

Cât spațiu aveți nevoie? Cele mai multe site-uri mici vor fi bine cu 10 MB sau 15 MB de spațiu de server. Poate doriți să investiți mai mult dacă site-ul dvs. are sute de pagini, un număr mare de grafică sau un număr semnificativ de fișiere audio și video care ocupă mai mult spațiu.

Aveți nevoie de un server dedicat? Majoritatea planurilor de găzduire sunt pentru serverele partajate, care, așa cum se pare, înseamnă că site-ul dvs. va partaja spațiu pe un computer cu multe alte site-uri. Pentru majoritatea site-urilor, acest lucru este bine, deși este important să fiți conștienți de faptul că traficul excesiv către un alt site de pe server poate afecta performanța site-ului dvs. Unele site-uri comerciale mai mari, unde performanța este esențială, optează pentru un server dedicat, astfel încât să poată beneficia de toată puterea de procesare a mașinii respective. Planurile de server dedicate tind să fie mult mai scumpe decât planurile comune, dar pot fi cheltuiți bine pentru site-uri cu intensitate de procesare.

Cât de mult trafic veți obține? Asigurați-vă că acordați atenție cuantumului transferului de date pe care l-ați permis pe lună.

Aceasta este o funcție a mărimii fișierelor dvs. și a cantității de trafic pe care îl obțineți (adică numărul de descărcări către browsere). Cele mai multe servicii de hosting oferă 5-10 gigabytes (GB) de transfer pe lună, ceea ce este perfect pentru site-uri cu trafic redus sau moderat, dar după aceea încep să se încarce pe megabyte. Dacă oferiți fișiere media, cum ar fi audio sau video, acest lucru se poate adăuga. Odată am rulat un site popular cu un număr de filme care s-au dovedit a avea peste 30 GB de date transferate o lună. Din fericire, am avut un serviciu cu transfer nelimitat de date (sunt puțini acolo), dar cu o altă companie de găzduire aș fi putut câștiga un extra 500 dolari pe lună în taxe.

Câte conturi de e-mail aveți nevoie? Luați în considerare câte persoane vor dori e-mailuri la acest domeniu atunci când cumpărăți pachetul de server potrivit. Dacă aveți nevoie de multe conturi de e-mail, este posibil să aveți nevoie de un pachet mai robust și mai avantajos.

Aveți nevoie de funcționalitate suplimentară? Multe servicii de găzduire oferă caracteristici speciale ale site-ului web – unele vin ca parte a serviciului lor standard și altele costă bani în plus.

Acestea variază de la bibliotecile de scripturi spiffice (pentru formulare de e-mail sau cărți de oaspeți) până la soluții complete și securizate de comerț electronic. Când faceți cumpărături pentru spațiu, luați în considerare dacă aveți nevoie de funcții suplimentare, cum ar fi cărucioare de cumpărături, servere securizate (pentru tranzacții cu carduri de credit), un server media streaming (pentru streaming audio și video), liste de discuții și așa mai departe.

Te simți confortabil cu nivelul lor de suport tehnic? Aruncați o privire la politicile companiei de găzduire și înregistrați-vă cu privire la asistența tehnică. Furnizează un număr de telefon (preferabil), chat live online cu tehnicieni sau doar o adresă de e-mail pentru serviciul clienți? Este important să știți că compania dvs. de găzduire va fi acolo pentru a răspunde prompt la întrebările dvs.

Vor face backup-uri regulate? Întrebați dacă compania de găzduire face backup-uri periodice ale datelor dvs. în cazul în care există o problemă cu serverul.

Vrei să fii reseller? Dacă rulați o afacere de web design și anticipați că ați găsit spațiu de server pentru mai mulți clienți, poate doriți să deveniți un reseller hosting. Multe companii de hosting au programe în care oferă mai multe planuri de servere la prețuri reduse. Aveți posibilitatea să transmiteți economiile de-a lungul clienților dvs. sau să marcați prețul pentru a vă compensa pentru cheltuielile administrative.

Odată ce ați identificat nevoile dvs., este timpul să faceți vânătoare. În primul rând, întrebați-vă prietenii și colegii dacă au servicii de găzduire pe care le pot recomanda. Nu este nimic de genul experienței de la prima persoană de la cineva în care ai încredere. După aceea, Web-ul este cel mai bun loc de cercetare. Următoarele site-uri oferă recenzii și comparații ale diferitelor servicii de găzduire; ele pot fi puncte bune de pornire pentru serverul dvs. de cumpărături pentru servere:

CNET Recenzii de găzduire web

www.cnet.com (căutați Găzduire Web în baza recenziilor)

HostIndex

www.hostindex.com

TopHosts.com

www.tophosts.com

Opțiuni gratuite de găzduire

Dacă doriți doar să publicați un site personal și nu doriți să scufundați bani în el, există multe servicii care oferă spațiu liber pe Web.

Servicii de găzduire gratuită. Unele companii dau spațiu de server departe gratuit! Dezavantajele sunt că nu puteți avea propriul nume de domeniu și ei pot plasa publicitatea pe paginile dvs. Un loc bun pentru a începe căutarea pentru web hosting gratuit este www.freewebspace.net sau face o căutare pe web pentru "hosting gratuit web."

Servicii de blogare. Dacă doriți doar să publicați un blog (scurt pentru jurnalul web, un jurnal online), puteți profita de unul dintre serviciile gratuite de bloguri. Acestea vă permit să publicați tipul de informații de obicei găsite pe o pagină de blog: intrări, comentarii, blogroll (lista blogurilor similare) etc. Unele dintre cele mai populare sunt Blogger.com, LiveJournal.com și Typepad.com (care percepe o mică taxă lunară), dar dacă faceți o căutare web pentru "găzduire gratuită pe blog", veți găsi multe altele pentru a explora.

Site-uri comunitare online. Site-uri comunitare online cum ar fi Yahoo! GeoCities (geocities.yahoo.com) sau Tripod (www.tripod.lycos.com) organizează site-urile membrilor lor în categorii, astfel încât oamenii cu interese similare se pot găsi reciproc. În schimbul unui spațiu liber, aceștia pun anunțuri pe conținutul membrilor.

Site-uri de rețele sociale. O altă arenă pentru publicarea blogurilor, fotografiilor, muzicii și așa mai departe este să se alăture uneia dintre cele mai populare site-uri de rețele sociale. Aceste site-uri îi leagă pe membrii lor prin conexiuni prieten (și prieten de-un-prieten). Unele site-uri populare din rețeaua socială din această scriere sunt MySpace.com, Friendster.com și Facebook.com; cu toate acestea, aceasta este o utilizare rapidă a web-ului, deci este posibil să nu fie cele mai recente și cele mai mari rețele în momentul în care citiți această carte. Aceste servicii pot impune restricții asupra tipului de conținut pe care îl puteți publica și care oferă diferite nivele de personalizare, deci nu este același lucru cu publicarea propriului dvs. site pe serverele lor.

Avantaje:

Este gratis!

Bun pentru paginile web personale și de pasionați. De asemenea, o opțiune bună pentru adolescenții cu bugete limitate.

În funcție de serviciul pe care îl alegeți, puteți găsi persoane cu interese similare.

Dezavantaje:

Este posibil să fiți blocați cu bannere de anunțuri enervante sau ferestre pop-up.

S-ar putea să fii limitat în tipul de conținut pe care îl poți publica.

Este posibil să aveți un control limitat asupra aspectului paginii și navigării.

În general, nu obțineți propriul nume de domeniu.

Nu este potrivit pentru site-urile de afaceri.

Procesul de publicare

Deci, aveți domeniul dvs. și gazdele dvs. toate aliniate … ce acum? Este un moment bun pentru a examina pașii tipici implicați în crearea și publicarea unui site pe Web. Nu toate site-urile respectă acești pași exacți, dar acest lucru vă va oferi o idee generală despre acest proces.

Creați un director (folder) pentru site-ul de pe computer.

Acesta va fi directorul rădăcină local. "Local" înseamnă că se află pe hard disk, iar "root" este termenul tehnic folosit pentru a se referi la un director de nivel superior pentru site.

Aici salvezi toate documentele care alcătuiesc site-ul și vei fi transferat pe serverul web real. Fișierele suplimentare legate de site, cum ar fi fișiere Photoshop stratificate, documente de conținut brut și alte documente diverse de dezvoltare ar trebui păstrate într-un director separat. În Figura următoare, mi-am denumit directorul rădăcinilor locale jenskitchen.

Creați paginile web.

Acesta este pasul care ia toată munca grea. Este important să rețineți că toate fișierele HTML și imagine pentru acest site simplu au fost salvate în directorul rădăcină local, jenskitchen.

Verificați pagina la nivel local.

Înainte de a face pagina live, este o idee bună să verificați pagina într-un browser în timp ce este încă pe mașina dvs. Doar lansați browserul dvs. preferat și deschideți fișierul (X) HTML al paginii de pe hard disk, așa cum se arată în figura. Dacă are nevoie de unele ajustări, mergeți înapoi și editați fișierele (X) HTML și / sau CSS și salvați-le.

Trebuie să salvați fișierele pentru a vedea modificările în browser (asigurați-vă că le salvați în același director, astfel încât să suprascrie versiunea veche). Acum faceți clic pe Actualizați sau reîncărcați în browser pentru a vedea cum arată.

Figură 3.25. Creați și testați pagina dvs. web pe propriul calculator.

Încărcați fișierele. Când totul arată bine în browser, sunteți gata să încărcați pagina la serverul de la distanță care găzduiește site-ul dvs. (Figura următoare). Utilizați un program de transfer de fișiere (FTP) pentru a încărca fișierele dvs. (vom trece peste intrările și ieșirile din FTP în secțiunea următoare). Doar asigurați-vă că ați pus toate fișierele în directorul rădăcină al site-ului dvs. de pe server. Compania gazdă sau administratorul serverului vă va indica numele directorului rădăcină al site-ului dvs. atunci când configurați contul.

Verificați-l live pe Web. Odată ce toate fișierele au fost transferate pe server, tu (și oricine altcineva) îl puteți vedea introducând adresa URL în browser.

Figură 3.26. Încărcarea și vizualizarea unei pagini de pe serverul de la distanță

Transferarea fișierelor cu FTP

Cel mai probabil, serverul dvs. va fi într-o locație îndepărtată, accesibilă prin Internet.

Fișierele sunt transferate între computerele de pe Internet printr-un protocol numit FTP (File Transfer Protocol). Ați auzit, de asemenea, "FTP" folosit ocazional ca un verb, ca în "Voi trimite aceste fișiere FTP în această după-amiază."

Dacă sunteți într-un birou sau într-o școală care are un server web ca parte a rețelei sale, este posibil să puteți muta fișierele direct pe rețea fără a utiliza FTP.

Veți avea nevoie de informații utile pentru a transfera fișiere cu FTP:

Numele serverului dvs. web (gazdă). De exemplu, www.jenware.com.

Numele de conectare sau codul de utilizator. Veți obține un nume de conectare de la administratorul de server atunci când vă configurați contul de server, adesea prin intermediul unui e-mail. Dacă sunteți un liber profesionist, veți avea nevoie de acces la datele de conectare ale clientului dvs.

Parola dvs. Acest lucru va fi furnizat și de administratorul de server sau de client.

Directorul în care se află paginile dvs. web. Administratorul de server vă poate indica și directorul pe care îl puteți utiliza pentru paginile dvs. web, cu alte cuvinte, numele directorului rădăcină pentru site-ul dvs. Adesea, este www sau html. De asemenea, este posibil ca serverul dvs. să fie configurat să vă trimită automat la directorul corect atunci când vă conectați, caz în care nu va trebui să introduceți un nume de director. Din nou, obțineți instrucțiuni de la administrator.

Tipul transferului de date. În majoritatea cazurilor, veți folosi FTP pentru încărcare, dar unele servicii de găzduire necesită SFTP. Aceste informații vă vor fi furnizate cu instrucțiunile de conectare și FTP pentru contul dvs.

Software FTP

Deoarece FTP este un protocol Internet, trebuie să utilizați un software special FTP (numit un client FTP) conceput special pentru operația de transfer de fișiere.

Cele mai bune instrumente WYSIWYG de creare a web-urilor, cum ar fi Dreamweaver de la Adobe, Microsoft Expression Web și open source Nvu (pronunțat N-view) au clienți FTP încorporați. Aceasta este o caracteristică excelentă, deoarece vă puteți construi paginile și le puteți încărca într-un singur program.

Dacă nu ați investit încă în unul dintre aceste instrumente, există un număr de utilitare client FTP independente, cu interfețe simple, care fac transferul de fișiere la fel de ușor ca și mutarea fișierelor de pe propriul calculator. Pentru dispozitivele Mac, Transmite, Fetch și Interarchie permiteți transferul "drag and drop". Pe Windows, WS_FTP, CuteFTP și Filezilla sunt destul de populare. Puteți descărca aceste programe la www.download.com de la CNET.

Utilizarea FTP, pas cu pas

Clienții FTP au interfețe ușor diferite și folosesc terminologia diferită, dar în esență funcționează la fel.

Pasul 1: Asigurați-vă că sunteți online. Este posibil să aveți o conexiune la rețea sau la cablu, care este mereu online, dar este posibil să trebuiască să formați un modem. Puteți lansa programul FTP înainte sau după ce vă conectați online.

Pasul 2: Deschideți o conexiune la server și introduceți informațiile dvs. Acesta este, de obicei, punctul în care vi se cere să introduceți numele serverului, datele de conectare, parola și setările opționale menționate anterior. Unele programe FTP vă permit să salvați setările și să dați conexiunii un nume pentru a facilita conectarea ulterioară. Instrumentul dvs. poate apela acest proces pentru a configura un nou "site" sau "conexiune". Fereastra din partea de sus a Figura următoare arată setările serverului din Transmitere, dar instrumentul dvs. poate utiliza un proces "expert" pentru mai multe ecrane pentru colectarea și salvarea setările site-ului.

Pasul 3: Navigați la serverele rădăcină locale și la distanță. Mulți clienți FTP au două ferestre: una vă oferă o vedere a fișierelor de pe unitatea hard disk locală, cealaltă este o vizualizare a fișierelor de pe serverul de la distanță.

De asemenea, ferestrele oferă, de asemenea, metode pentru navigarea prin directoare. Unii clienți, cum ar fi Fetch, afișează numai o vizualizare a serverului de la distanță. Indiferent de instrumentul pe care îl utilizați, asigurați-vă că este selectat directorul rădăcină de pe serverul dvs. (sau directorul corespunzător din cadrul rădăcină).

Pasul 4: Selectați fișierul de pe unitatea hard disk locală și încărcați-l. Programele FTP variază în funcție de modul în care este prezentată opțiunea de încărcare odată ce fișierul este selectat, dar de obicei este destul de intuitiv. Unele vă solicită să selectați Încărcați, Trimiteți sau Puneți dintr-un meniu sau un buton; altele utilizează o săgeată în sus sau o săgeată spre dreapta pentru a indica direcția de transfer de la computer la serverul de la distanță.

De asemenea, puteți să trageți și să plasați fișierul din fereastra locală în fereastra serverului pentru a începe încărcarea.

Anumiți clienți FTP, cum ar fi Fetch, vă pot cere, de asemenea, să indicați formatul sau tipul de fișier transferat. Documentele HTML trebuie trimise ca Text sau ASCII. Pentru imagini și alte suporturi media, alegeți date binare sau brute. Mulți clienți FTP aleg automat formatul pentru dvs.

Pasul 5: Urmăriți încărcarea. Odată ce faceți clic pe butonul Încărcare sau pe săgeată, fișierul dvs. începe să se răsucească peste linii și pe server. Clientul dvs. FTP va oferi, probabil, un fel de feedback care arată progresul încărcării. Când fișierul apare în lista de fișiere din fereastra serverului la distanță și dimensiunea fișierului se potrivește cu cea afișată pe calculatorul local, știți că a sosit.

Figură 3.27. Trei interfețe client FTP populare.

Pasul 6: Verificați-l într-un browser. Acum documentul este oficial pe Web.

Doar pentru a fi sigur, verificați-l cu un browser. Deschideți un browser și introduceți URL-ul dvs., și acolo este! Dacă trebuie să faceți modificări, faceți acest lucru pe documentul local, salvați-l și încărcați-l din nou.

Organizarea și încărcarea unui întreg site

Dacă site-ul dvs. conține mai mult de o duzină de documente și fișiere grafice, ar trebui să vă organizați fișierele în directoare și subdirectoare. Acest lucru necesită o muncă și o planificare atentă, dar face mult mai ușor gestionarea site-ului pe termen lung.

O convenție comună este păstrarea tuturor fișierelor grafice dintr-un director numit imagini sau grafice. În majoritatea cazurilor, structura generală a directoarelor se bazează pe structura site-ului în sine. De exemplu, dacă aveți o categorie "Știri" pe site-ul dvs., ar exista un director de știri corespunzător pentru aceste fișiere.

Vestea bună este că poți încărca un întreg site dintr-o dată.

Când selectați un director pentru a fi FTP'd, acesta va încărca totul în acel director – lăsând structura subdirectorului intactă.

Urmați instrucțiunile FTP menționate mai sus, dar selectați numele directorului în loc de un singur nume de fișier pentru încărcare.

Programul FTP verifică formatul fiecărui fișier și selectează text sau date brute / binare, după caz, în timpul încărcării.

Este o idee bună să configurați structura directorului site-ului așa cum o doriți mai întâi pe hard diskul local, apoi să încărcați totul pe serverul final după ce acesta este gata.

Capitolul 4. Manual de utilizare

Manualul utilizatorului

Clientul tastează în bara de adrese

https://marianaiuliana.000webhostapp.com/index.html

Site-ul este alcătuit din 4 meniuri: Acasa, Platouri, Mancare gatita și Contact.

Pagina Platouri prezintă exemple de platouri reci ce pot fi făcute la comandă după preferința clientului.

În cazul în care clientul dorește să consume mâncare gătită ca la mama acasă are această opțiune în meniul Mancare gatita.

Pentru a putea comanda mâncare de pe site-ul nostru clientul are nevoie de date contact sau locația noastră. Pentru aceste informații se accesează meniul Contact.

Concluzii

Prin intermediul acestei lucrări am încercat să evidențiez utilitatea combinării tehnologiilor HTML, CSS și JavaScript pentru obținerea de pagini Web cu continut static.

În cadrul lucrării de față, plecând de la prezentarea elementelor teoretice de bază din domeniul informatic am ajuns la elaborarea unui model informatic de afacere virtuală adaptabilă mediului de afaceri din România și nu numai.

Pentru modul în care elementele site-ului trebuie redate pe ecran, pe hârtie, în vorbire sau pe alte suporturi media folosesc un limbaj foi de stil CSS. CSS oferă mai multe instrumente excelente pentru construirea de machete frumoase.

Am vorbit despre limbaje de programare și anume JavaScript. El poate fi folosit pentru a adăuga un comportament interactiv simplu unei pagini HTML prin intermediul unui script de cuvinte cheie inserate într-o pagină web.

BIBLIOGRAFIE

Jon Duckett – HTML & CSS Design and Build Websites, 2011, Page 452-472

Jennifer Niederst Robbins – Learning Web Design Third Edition, 2007, Page 311-337

Jennifer Niederst Robbins – Learning Web Design, Fourth Edition, 2012, Page 505-540

Lara Hogan – JavaScript for webdesigners, 2016 – Pag 3-5

https://www.w3schools.com

Anexe

Index.html

<!DOCTYPE html>

<html lang="en">

<head>

<title>Mihaila Mariana Iuliana | </title>

<meta charset="utf-8">

<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">

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

<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">

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

<script src="js/cufon-yui.js" type="text/javascript"></script>

<script src="js/cufon-replace.js" type="text/javascript"></script>

<script src="js/Kozuka_Gothic_Pro_OpenType_300.font.js" type="text/javascript"></script>

<script src="js/Kozuka_Gothic_Pro_OpenType_700.font.js" type="text/javascript"></script>

<script src="js/Kozuka_Gothic_Pro_OpenType_900.font.js" type="text/javascript"></script>

<script src="js/FF-cash.js" type="text/javascript"></script>

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

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

<!–[if lt IE 9]>

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

<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">

<![endif]–>

</head>

<body id="page2">

<!–==============================header=================================–>

<header>

<div class="main">

<h1><a href="index.html">food like home mother</a></h1>

<nav>

<ul class="menu">

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

<li><a href="platouri.html">Platouri</a></li>

<li><a href="mancare_gatita.html">Mancare gatita</a></li>

<li><a class="active" href="contacts.html">Contact</a></li>

</ul>

</nav>

<div class="clear"></div>

</div>

<div class="slider-wrapper">

<div class="slider">

<div class="banner"> <strong>Ai nevoie <strong>de idei de meniu?</strong></strong> <em>Sa cream un platou dupa pofta inimii!</em> </div>

</div>

</div>

</header>

<!–==============================content================================–>

<section id="content">

<div class="main">

<div class="container_12">

<div class="wrapper p2">

<article class="grid_12">

<h3>Cum lucram</h3>

<p class="indent-bot">Cauta in meniu felul tau preferat, apoi suna la numarul de telefon din rubrica Contact.</p>

</article>

</div>

</div>

</section>

<!–==============================footer=================================–>

<footer>

</footer>

<script type="text/javascript">Cufon.now();</script>

</body>

</html>

Mancare_gatita.html

<!DOCTYPE html>

<html lang="en">

<head>

<title>Mihaila Mariana Iuliana</title>

<meta charset="utf-8">

<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">

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

<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">

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

<script src="js/cufon-yui.js" type="text/javascript"></script>

<script src="js/cufon-replace.js" type="text/javascript"></script>

<script src="js/Kozuka_Gothic_Pro_OpenType_300.font.js" type="text/javascript"></script>

<script src="js/Kozuka_Gothic_Pro_OpenType_500.font.js" type="text/javascript"></script>

<script src="js/Kozuka_Gothic_Pro_OpenType_700.font.js" type="text/javascript"></script>

<script src="js/Kozuka_Gothic_Pro_OpenType_900.font.js" type="text/javascript"></script>

<script src="js/FF-cash.js" type="text/javascript"></script>

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

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

<!–[if lt IE 9]>

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

<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">

<![endif]–>

</head>

<body id="page3">

<!–==============================header=================================–>

<header>

<div class="main">

<h1><a href="index.html">food like home mother</a></h1>

<nav>

<ul class="menu">

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

<li><a href="platouri.html">Platouri</a></li>

<li><a href="mancare_gatita.html">Mancare gatita</a></li>

<li><a class="active" href="contacts.html">Contact</a></li>

</ul>

</nav>

<div class="clear"></div>

</div>

</header>

<!–==============================content================================–>

<section id="content">

<div class="main">

<div class="container_12">

<div class="wrapper">

<article class="grid_12">

<div class="wrapper indent-bot">

<article class="grid_4 alpha">

<div class="wrapper">

<figure class="img-indent2"><img src="images/page3-img4.png" alt=""></figure>

<div class="extra-wrap"> <strong class="title-1">Ciorbe</strong> Bors Taranesc de Pui 10 lei </div>

</div>

</article>

<article class="grid_4">

<div class="indent-left">

<div class="wrapper">

<figure class="img-indent2"><img src="images/page3-img5.png" alt=""></figure>

<div class="extra-wrap"> <strong class="title-1">Fasole ca la mama acasa</strong> 10 lei </div>

</div>

</div>

</article>

<article class="grid_4 omega">

<div class="indent-left">

<div class="wrapper">

<figure class="img-indent2"><img src="images/page3-img6.png" alt=""></figure>

<div class="extra-wrap"> <strong class="title-1">Ardei umpluti</strong> Gatiti la cuptor 10 lei</div>

</div>

</div>

</article>

</div>

</div>

</div>

</section>

<!–==============================footer=================================–>

<footer>

</footer>

<script type="text/javascript">Cufon.now();</script>

</body>

</html>

Contacts.html

<!DOCTYPE html>

<html lang="en">

<head>

<title>Mihaila Mariana Iuliana | Contacts</title>

<meta charset="utf-8">

<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">

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

<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">

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

<script src="js/cufon-yui.js" type="text/javascript"></script>

<script src="js/cufon-replace.js" type="text/javascript"></script>

<script src="js/Kozuka_Gothic_Pro_OpenType_300.font.js" type="text/javascript"></script>

<script src="js/Kozuka_Gothic_Pro_OpenType_500.font.js" type="text/javascript"></script>

<script src="js/Kozuka_Gothic_Pro_OpenType_700.font.js" type="text/javascript"></script>

<script src="js/Kozuka_Gothic_Pro_OpenType_900.font.js" type="text/javascript"></script>

<script src="js/FF-cash.js" type="text/javascript"></script>

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

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

<!–[if lt IE 9]>

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

<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">

<![endif]–>

</head>

<body id="page5">

<!–==============================header=================================–>

<header>

<div class="main">

<h1><a href="index.html">food like home mother</a></h1>

<nav>

<ul class="menu">

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

<li><a href="platouri.html">Platouri</a></li>

<li><a href="mancare_gatita.html">Mancare gatita</a></li>

<li><a class="active" href="contacts.html">Contact</a></li>

</ul>

</nav>

<div class="clear"></div>

</div>

</header>

<!–==============================content================================–>

<section id="content">

<div class="main">

<div class="container_12">

<div class="wrapper">

<article class="grid_9">

<h3>Contact </h3>

<FORM action="adauga.php" method="post">

Numele si prenumele:<INPUT type="text" size="50" maxlenght="50" name="numeprenume">

<br><br>

Email:<INPUT type="text" size="50" maxlenght="50" name="email">

<br><br>

Mesaj:<INPUT type="text" size="200" maxlenght="200" name="mesaj">

<br><br>

<br><br>

<INPUT type="submit" value="Trimite mesaj!">

</FORM>

<br>

<FORM action="afisare.php" method="post">

<INPUT type="submit" value="Afisati mesajele!">

</FORM>

</div>

</div>

</fieldset>

</form>

</article>

<article class="grid_3">

<h2>Locatia noastra</h2>

<div class="wrapper img-indent-bot">

<figure class="map-border">

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11439.783944016159!2d28.623206196798243!3d44.208178834874154!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sro!2sro!4v1558030754521!5m2!1sro!2sro" width="216" height="180" frameborder="0" style="border:0" allowfullscreen></iframe>

</figure>

</div>

<dl>

<dt class="p2">Constanta</dt>

<dd><span>Telefon:</span> 000000000</dd>

<dd><span>Fax:</span> 00000000</dd>

<dd><span>Email:</span> <a class="link" href="#">mail@demolink.org</a></dd>

</dl>

</article>

</div>

</div>

</div>

</section>

<!–==============================footer=================================–>

<footer>

</footer>

<script type="text/javascript">Cufon.now();</script>

</body>

</html>

Conectare.php

<?php

$servername = "localhost";

$username = "root";

$password = "vertrigo";

try {

$conn = new PDO("mysql:host=$servername;dbname=mesaje", $username, $password);

$conn->query('SET character_set_client="utf8",character_set_connection="utf8",character_set_results="utf8";'); // Setare encoding caractere UTF-8

// set the PDO error mode to exception

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// echo "Connected successfully";

}

catch(PDOException $e)

{

echo "Connection failed: " . $e->getMessage();

}

?>

Afisare.php

<!DOCTYPE html>

<html lang="ro">

<head>

<title> Afisare mesaje de la clienti</title>

<meta charset="UTF-8">

</head>

<body style="background-color:white;margin:30px">

<?php

require 'conectare.php';

$sql = "SELECT numeprenume,email,mesaj FROM clienti";

$result = $conn->query($sql);

echo "<br>";

while($row = $result->fetch(PDO::FETCH_ASSOC)){

$numeprenume=$row["numeprenume"];

$email=$row["email"];

$mesaj=$row["mesaj"];

echo "<br>";echo "<br>";

echo 'Nume si prenume: '.$numeprenume;

echo 'Continut mesaj: '.$mesaj;

}

$conn=null;

echo '<br>';echo '<br>';echo '<br>';

echo '<a href="index.html"><img src="back.jpg" alt="" width="50" height="50">';

?>

</body>

</html>

Adauga.php

<!DOCTYPE html>

<html lang="ro">

<head>

<meta charset="UTF-8">

</head>

<body style="background-color:white;margin:30px">

<?php

require "conectare.php";

$numeprenume=$_POST['numeprenume'];

$email=$_POST['email'];

$mesaj=$_POST['mesaj'];

$sql = "INSERT INTO clienti (numeprenume, email, mesaj)

VALUES ('$numeprenume','$email','$mesaj')";

$result = $conn->exec($sql);

echo '<br>';

if($result) echo "Mesajul dvs. a fost transmis!";

else echo "ATENTIE EROARE!!! Mesajul nu a fost livrat.";

$conn=null;

echo '<br>';echo '<br>';echo '<br>';

echo '<a href="index.html"><img src="back.jpg" alt="" width="50" height="50">';

?>