Forma si Culoare prin CSS

Principalul motiv care a dus la aparitia CSS (Cascading Style Sheet) a fost lipsa de flexibilitate pe care o avea formatul HTML, care a inglobat atat datele cat si forma lor de prezentare. Aceasta tendinta a dus la greseli de proiectare a site-urilor, care au costat mult pe programatori, deoarece nimanui nu-i place sa schimbe culoarea unui chenar pe website-ul sau, daca trebuie sa modifice 30 de tabele in 10 pagini, care au setate border color.

Asadar, a luat nastere CSS, care doreste sa desparta pentru totdeauna datele de nivelul de prezentare. HTML va fi folosit strict pentru informatie, iar CSS va fi folosit strict pentru aspectul paginii. Avantajele sunt enorme: se poate modifica un singur fisier, si tot site-ul se va schimba, ceea ce a introdus si ideea "temelor" si "stilurilor" de culori interschimbabile. Practic, exista site-uri pe care nu le mai recunosti odata ce si-au schimbat CSS-ul in cel mai simplu mod posibil.

Dar nu tot ce e CSS e si... evident! Exista foarte multe tricks pentru a face o pagina sa arate ca pagina de start a portalului dvs. favorit, iar un designer trebuie sa aiba mai presus de "ochiul sau artistic", si imaginatia de a realiza ceea ce-si doreste. Dar sa vedem la ce anume e bun CSS si ce poate sa faca!

Pe scurt, este un document format text in care sunt date reguli de afisare pentru elementele ce ar putea sa apara intr-un HTML. Exista anumite proprietati modificabile:

* Background
* Text
* Font
* Border
* Outline
* Margin
* Padding
* List
* Table

Totul se schimba printr-o sintaxa foarte simpla: selector {proprietate: valoare;}. Pot fi mai multe proprietati schimbate pentru acelasi selector. Selectorul este in general dat prin 3 forme: o clasa intreaga de elemente HTML, cum ar fi in exemplul de mai jos, care pune culoare de fond rosie la toate paragrafele:

p {
background-color: rgb(255,0,0);
}

O alta modalitate de a preciza o culoare este prin numele ei: red! sau prin valoarea hexa: #FF0000

A doua metoda de selectare este a unei anumite subclase a unor elemente HTML, pe care o folosim ca sa aliniem textul, de exemplu:

p.right {
text-align: right;
}

(in HTML)

Text aliniat la dreapta

A treia modalitate de a specifica un selector este printr-un id care apartine unui element unic, ca sa-l diferentiem de restul:

p#trei {
font: italic small-caps bold 12px arial
}

(in HTML)

unic

Bineinteles, selectorii se pot grupa, definind pentru toti un contur albastru.

p,a,td {
border-style: solid double; border-color: rgb(0,0,255)
}

Cea din urma modalitate este de a defini o clasa generala, care poate fi pusa la orice alt element, fara diferente.

.red {
color: red
}

(in HTML)

unic

cal

Acestea sunt doar cateva din lucrurile interesante care se pot face in CSS, precum meniuri! Nu uitati sa verificati documentatia pentru mai multe informatii.

Referinte:

* http://www.w3schools.com/css/default.asp
* http://www.freecsstemplates.org/
* http://www.csstutorial.net/

e XML

XML este acronimul de la Extensible Markup Language, si, ca si multe alte idei de formate stralucite, a aparut intai ca un working draft, in anul 1996. 2 ani mai tarziu s-a redactat primul standard, iar acum este deja la a 4-a editie revizuita. Problemele pe care a vrut sa le rezolve XML au fost aglomeratia de tag-uri din SGML si chiar HTML. De exemplu, HTML-ul are tags care nu sunt case sensitive, lucru ce a dus la neconcordante intre modul de scriere a tagurilor, chiar si in cuprinsul aceleiasi pagini. Deoarece fondatorii si-au dorit un format care sa poata exprima informatie intr-un format care sa fie inteligibil atat de om cat si de masina, era necesar impunerea unor constrangeri mult mai dure.

In prezent, XML se foloseste in orice aplicatie care doreste sa aiba fisiere de configurare. Toate setarile de interfata, de exemplu ale unui browser ca Firefox, sunt stocate in xml-uri. Exista parsere foarte eficiente, si suport pentru citit/scris/parsat XML in orice limbaj de programare. Lucru care are ceva greutate in lumea tehnologiei, in care totul se schimba de la an la an. Iata ca XML a devenit intre timp un standard iubit de toata lumea, in special pentru simplitatea lui, motiv pentru care a si ramas aproape la fel. Dar ce este XML?

XML este un document in format text, care are un header si corp, definit recursiv prin tags imbricate, si avand un singur tag de root, obligatoriu. Astfel, orice am vrea sa punem intr-un XML, trebuie incapsulat intr-un arbore de tags. Iata un exemplu de XML simplu:



verde
galbena


Se pot observa cateva din regulile xml-ului:

* fiecare tag trebuie deschis si inchis corect, in ordinea inversa deschiderii, cand avem imbricari eu
* tags au nume CASE-SENSITIVE. Adica e diferit de
* atributele iau valori astfel: attr = "val"

De remarcat ca browserele adapteaza HTML si uneori chiar daca sintaxa e incorecta, ele tot afiseaza pagina ok. In cazul XML, daca ceva nu e bine, da eroare. Alte reguli de tinut minte sunt cele legate de interpretarea caracterelor din document. De exemplu, in HTML, oricate spatii ati insera, browserul trateaza totul ca un unic space. IN XML, fiecare caracter reprezinta o portiune de informatie, si trebuie pastrata exact asa cum o introduce utilizatorul. Acest lucru include sfarsitul de linie (LF).

Dupa cum se poate observa, un XML nu e complicat de creat. Partea cu adevarat interesanta este ce s-a dezvoltat in paralel cu XML-ul, pentru a utiliza formatul. XML e similar unui recipient, care controleaza forma, dar nu poate controla continutul pe care userul vrea sa-l puna inauntru. Pentru a face asta, exista alte formate, numite DTD si XMLSchema, prin care se pot defini reguli suplimentare la care trebuie sa se conforme un XML, pe langa cele de "bine-format", pe care le-am prezentat inainte. Cu aceste doua noi formate de fisiere, XML devine un format foarte puternic de validare a datelor, si de stocare.

Bineinteles, XML nu va fi folosit niciodata pentru a stoca informatie redundanta, de genul documente, imagini, etc, din cauza dimensiunilor mari ale formatului sau necompresat. Desi o varianta ar fi sa impachetezi un fisier XML si apoi sa fie arhivat, se obtin rezultate mai bune gasind un format mai potrivit pentru fisier.

Dar nu se stie niciodata ce ne va aduce viitorul!

Referinte:

* http://www.w3schools.com/xml/xml_whatis.asp
* http://en.wikipedia.org/wiki/XML

Puterea MySQL in PHP

PHP este una din cele mai folosite tehnologii la ora actuala atunci cand avem de-a face cu continut dinamic care implica informatii despre useri. Limbajul permite generarea usoara prin linii de cod a unei pagini HTML care sa fie servita browser-ului clientului, fara ca acesta sa poata avea acces la acest cod. Aceasta particularitate face din PHP limbajul preferat de acces la informatii sensibile de pe server, care sunt de obicei stocate in baze de date.

Imaginati-va un forum, care are o lista de utilizatori, fiecare cu informatii despre profilul sau, email, eventual o imagine avatar, drepturi de acces la paginile forumului, si toate mesajele postate de utilizatori. Toate aceste informatii se stocheaza usor si convenabil la o baza de date, care se afla pe un server ce ruleaza pe un workstation si deserveste browser-ul. Avem nevoie totusi de o modalitate de acces a bazei de date din interiorul scripturilor noastre ce genereaza informatia de pe pagina afisata. Asadar, iata ca am ajuns in miezul problemei: cum accesez o baza de date in PHP si ce pot face cu ea?

Sa pornim de la configuratia serverului de baze de date. Exista bineinteles, mai multe variante de software pe care le putem instala, dar cel mai ieftin si popular este MySQL, deoarece permite oricarui utilizator sa-si instaleze gratuit si sa foloseasca pachetul Community. Dupa ce s-a instalat, avem nevoie sa setam un user/pass de root, care va avea drepturi depline asupra serverului MySQL. Pe langa acest user, ar fi indicat sa existe si altul, cu drepturi limitate, si specifice activitatii pe care trebuie sa o desfasoare. Pentru conectarea la server, avem nevoie doar de host, dat prin IP (sau "localhost" daca dorim sa scriem scripturi pe care le testam doar local), username si password. Portul implicit este 3306.

Pentru inceput, vrem sa afisam un mesaj daca ne-am conectat la baza de date. Editati un fisier connect.php

$link = mysql_connect("localhost:3306", "me", "God");
if (!$link) {
die(mysql_error());
}

echo "M-am conectat!"
mysql_close($link);
?>

$link este o variabila "resursa", si care tine minte starea conexiunii. E similara unui file pointer, cu care se face accesul la fisier. In cazul de fata, fiecare comanda va avea nevoie de o resursa pe care sa lucreze -> linkul la baza de date. In general e bine sa inchideti linkul daca nu este folosit, pentru ca altfel va fi deschis pana cand se face timeout sau scriptul php face die(), comanda care intrerupe executia interpretorului si se iese din script. MySQL dispune de doua functii care ajuta la debugging, in caz ca apar erori, deoarece altfel ar trebui afisate mesaje dupa fiecare linie (interpretorul se opreste la fiecare operatie care da eroare, lucru care face debugging dificil). Este vorba de mysql_error() care intoarce mesajul de eroare, si mysql_errno(), care intoarce doar codul erorii.

Urmatorul pas este fie deschiderea unei baze de date de pe server, fie... crearea uneia, deoarece initial nu avem cum sa stocam tabele. Exista mai multe moduri de creare a unei baze de date:

* printr-un mysql_query ce contine comanda SQL de creare
* prin mysql_create_db, cu sintaxa similara

Recomand sa consultati documentatia MySQL aferenta pentru limbajul de definire date, sau manipulare date, deoarece este foarte utila cand nu se stie exact cum arata o comanda. Vom crea o baza de date noua, si o vom selecta ca fiind cea activa pentru orice operatie ulterioara.

$link = mysql_connect('localhost', 'me', 'God');

$sql = 'CREATE DATABASE cadouri';
if (mysql_query($sql, $link)) {
echo "Ok!\n";
} else {
echo mysql_error()."\n";
} mysql_close($link); ?>

Se observa cum arata forma cea mai simpla a comenzii SQL de creare DB, si operatorul . folosit la concatenarea mesajului de eroare cu un endline. In mod similar se creeaza o tabela in baza de date, dupa ce este selectata mai intai ca default, cu mysql_select_db

Si ultimul pas reprezinta obtinerea informatiei, in urma efectuarii unui query. Exista o comanda speciala de query, mysql_query, care intoarce un alt fel de resursa-rezultat, si care poate fi accesata in mai multe moduri. PHP permite atat arrays obisnuite, cat si asociative, pe baza de key. Exact acest feature este exploatat si de functiile mysql_fetch_row si mysql_fetch_assoc

$result = mysql_query("SELECT id,cadou FROM cadouri WHERE luna = 'Decembrie'");
if (!$result) {
die(mysql_error());
}
$row = mysql_fetch_row($result);

echo $row[0]; // 4
echo $row[1]; // trenulet

In acest mod puteti realiza orice operatie doriti cu baza de date, deoarece sunt doar doua tipuri de query: care intorc informatie, sau care fac o operatie asupra bazei de date/tabela/etc.

Va urez conectare placuta!

Referinte:

* http://www.php.net/download-docs.php
* http://dev.mysql.com/downloads/mysql/5.0.html

Web Mining intro

[Ne propunem in acest articol sa explicam conceptele Web Mining, Data Mining pentru a putea restrange apoi discutia pe un exemplu concret ce reliefeaza utilitatea acestor concepte.]

Pentru a discuta conceptul de WEB MINING trebuie sa ne referim pentru inceput la domeniul ce-l include: DATA MINING. La modul cel mai simplu cu putinta Data Mining ar reprezenta extragerea unor informatii despre date din seturi de date foarte mari.

La ce ne-ar putea ajuta asta? Domeniile de aplicatie a descoperirilor din domeniul Data Mining sunt diverse:

• Statistica (mai concret Statistica bazata pe inferente unde folosind modele de date putem construi inferente pe o scara larga; testarea pe baza unor ipoteze, estimarea unor caracteristici numerice, descrierea asocierilor sau modelarea unor relatii sunt deasemenea tehnici ce folosesc Data Mining)
• Inteligenta Artificiala – invatarea automata este deseori identificata cu data mining, spre exemplu: http://www.aaai.org/AITopics/html/mining.html - aici puteti gasi mai multe lucruri despre acest subiect.
• Clustering Algorithms – pot fi folositi in Data Mining pentru impartirea seturilor de date in mai multe subseturi pe baza unor calcule de distanta (relativ la criteriile pe care le alegem). Cateva exemple de lucrari din acest domeniu puteti gasi aici: http://mars.csie.ntu.edu.tw/~cychen/olddoc/ClusteringDataMining.html .
• Vizualizarea datelor – tehnicile de Data Mining sunt folosite pentru reliefarea unor informatii despre date ce nu sunt sesizatea la prima vedere. Un exemplu ar putea fi urmatorul: daca cineva priveste o imagine si este specialist in domeniul in care se incadreaza imaginea, aceasta ar putea fi remodelata intr-un mod mai simplu pentru ca acea persoana sa poata intelege mai multe lucruri despre modelarea obiectului spre exemplu.
• Bazele de date – Un bun exemplu in acest caz ar fi DSS (Decision Support Systems) ce se constituie ca un ansamblu format din baze si depozite de date, precum si alte ansambluri de informatii utile, impreuna cu produse soft adecvate întocmirii rapoartelor, analizei datelor, precum si implementarii unor algoritmi de optimizare în vederea sprijinirii actului decizional al oamenilor de afaceri si nu numai.

Acum pentru ca stim mai multe lucruri despre Data Mining putem reveni la Web Mining. Web Mining este de fapt aplicarea tehnicilor de Data Mining avand la dispozitie cantitatea imensa de informatii existenta in Internet. “Intriga” pentru aplicarea Web Mining ar putea-o constitui urmatoarele probleme:

• Gasirea de informatii relevante in Internet
• Crearea de noi informatii folosind unele deja existente in Internet
• Personalizarea informatiilor – ne referim la modul in care se prezinta informatia
• Extragerea de anumite informatii despre utilizatori

Pentru a reduce confuzia cu privire la termenul de Web Mining vom imparti aceasta tehnica in mai multe activitati:

• Gasirea resurselor
• Selectarea informatiilor si preprocesarea lor
• Generalizarea – gasirea modelelor
• Analiza – interpretarea rezultatelor gasite prin modele

Pentru a exemplifica cele spuse mai sus ne vom referi la un proiect IBM – Speed Tracer (http://www.research.ibm.com/journal/sj/371/wu.html). Acesta este un tool analizarea utilizarii Internetului (Web Usage Mining) prin folosirea unor modele de browsing si generarea de rapoarte pentru a ajuta administratorii site-urilor sa restructureze continutul site-urilor si modul de navigare prin ele.

Aplicatia utilizeaza algoritmi bazati pe inferente pentru a construi arbori de traversare si identificarea sesiunilor utilizatorilor.

Rezultatul este o colectie de modele de browsing folosite la intelegerea comportamentului. Mai concret, se vor genera 3 tipuri de statistici: per user (reliefeaza numarul de referinte accesate de user si durata accesului), per cale (identificarea cailor frecevente de acces), per grup (inforamtii despre grupuri de site-uri vizitate frecvent).

Linkuri utile:

• http://www.byte.ro/byte97-02/18tend.html
• http://www.galeas.de/webmining.html
• http://en.wikipedia.org/wiki/Web_mining
• http://www.dmoz.org/Computers/Software/Databases/Data_Mining//

Poze!

Am adaugat o sectiune noua pe site ce vrea sa surprinda un mic strop din locul unde ne-am petrecut cinci ani din viata:

Politehnica!

Ionutz

Primii pasi cu Ajax

Salut. Tema 3 la Interfete Evoluate mi-a oferit ocazia de-a invata sa lucrez cu Ajax. Mi-a placut atat de mult incat m-am gandit sa va impartasesc si voua cateva din "tainele" acestei metode inedite de actualizare dinamica a continutului paginilor Web. "Primii pasi cu Ajax" poate fi citit aici. El este gazduit de binecunoscutul nostru site http://www.zeit.3x.ro/

Puteti de asemenea vedea Ajax in actiune navigand catre http://www.zeit.3x.ro/despre.html si apasand pe numele membrilor echipei. Enjoy! :)

Ionutz

Tutorial & Quiz JavaScript

Intra pe www.zeit.3x.ro si vei gasi un tutorial de JavaScript proaspat scris de colega noastra, Alexandra.

Dupa ce l-ai citit, poti sa testezi cat de mult ai retinut.