Tutorial 2 - Interfete web

Bine ati venit la tutorialul 2 de interfete web!
Va voi prezenta o mica aplicatie ce combina Ajax,Html,PHP si MySQL, care insereaza intr-un camp select anumite optiuni aflate intr-o baza de date.
Codul sursa il poti lua de la un link specificat de:
www.interfete-w3b.com/index.php?option=com_content&view=article&id=46&Itemid=34
(luati de acolo numele arhivei pentru fiecare tutorial)

Va recomand sa folositi un editor ce va arata numarul liniei, deoarece pentru a nu incarca in mod inutil tutorialul voi specifica mai mult numarul liniei decat codul sursa.(aveti grija doar sa nu modificati textul)

1. MySQL
Pentru tutorialele ce urmeaza va voi ruga sa faceti o baza de date intitulata 'test', prin faptul ca vom lucra doar cu ea.
In cadrul acesti baze de date va trebui sa creati un tabel intitulat 'tutorial2', cu un camp varchar (dimensiunea o alegeti voi in functie de necesitate, la mine este de 33), ce poate avea orice nume va doriti.
Inserati cateva informatii in noul tabel (nume, spre exemplu).

2. Html
Rolul html-ului va fi doar acela de a afisa select-ul cu informatiile luate din baza de date, sa includa codul javascript si sa il apeleze.

3. PHP-ul
In fisierul interogare.php, va trebui sa modificati liniile 2 si 3, astfel incat sa puteti avea o conexiune valida la baza de date (eu am folosit default...localhost,root,fara parola)
Explicatie:
Programul ia toate informatiile din baza de date si le memoreaza in variabila $query.
Pentru fiecare rand valid, voi afisa informatia din acel rand separata de ";". Folosesc acest simbol, prin faptul ca atunci cand Javascript(Ajax) va primi informatia de la server sa stie unde anume se termina o optiune si unde incepe o alta optiune (astfel incat in datele inserate in tabelul tutorial2 nu trebuie sa existe acest caracter special).
Desigur ca am fi putut insera direct informatia in HTML, folosind php-ul, dar acest tutorial foloseste avantajele AJAX, acela de a putea modifica dinamic informatia (scopul fiind cel care face diferenta, in aplicatia pe care o veti dezvolta ulterior).

4.Ajax (Javascript)
Functia ajax() este cea care ne va oferi informatiile necesare pentru campurile din select-ul nostru.
Initial (incepand cu randul 3 si pana la randul 26), se incearca initializarea variabilei xmlHttp. Primul try, incearca sa o initializeze pentru Opera,Safari,Firefox, urmatoarele incercari (ce folosesc ActiveXObject) de initializare sunt specifice pentru Windows Explorer.
Ulterior va fi atasat acestui obiect o functie ce trebuie sa se execute atunci cand starea obiectului se modifica (atunci cand primim informatii de la server). Ne intereseaza apoi ca readyState sa fie 4, adica informatia sa fie trimisa complet de catre server. Dupa ce stim ca server-ul a trimis toata informatie, o putem parsa pentru a o adauga select-ului din html.
Luam elementul select din html, folosind un id, spargem in atomi raspunsul de la server (in functie de caracterul ";", specificat anterior). Acum avand informatia in variabila 'vectorul', putem incepe sa o parcurgem si sa o adaugam. In primul rand, cream un nou nod cu tag-ul 'option' (linia 38), ii setam textul si valoarea ca fiind informatia din vector de pe pozitia corespunzatoare (liniile 39,40) si in final il adaugam in select (tinand cont din nou, de diferentele intre browsere).

Sper ca acest cod sursa sa va fie de folos!
Va astept si la urmatorul tutorial de interfete web.

Interfete Web 101 - Tema

Salutare!
Am sa va vorbesc astazi despre un aspect foarte important ce tine de partea de interfata a unui website, si anume despre tema.
Indiferent daca avem de-a face cu Joomla, Wordpress sau orice alt CMS, task-ul alegerii unei teme potrivite petru site-ul nostru este unul destul de anevoios, deoarece avem sute de teme la dispozitia noastra atat contra cost cat si gratuit.

De ce este tema un element important?
Deoarece conteaza foarte mult la prima impresie pe care o au vizitatorii despre site. Iar prima impresie joaca un rol esential in conditiile in care vrem ca un vizitator sa revina pe site-ul nostru sau sa devina un cititor fidel in cazul in care vorbim de un blog.
Cu ce ne poate ajuta o tema buna?
* Atragerea de trafic pe site.
* Scoaterea in evidenta a anumitor produse.
* Aranjarea informatiei pentru a putea fi usor perceputa de cititori.
* Interactiune intre cititori si proprietarii site-ului sau intre cititori si cititori.

De asemenea ea poate fi privita ca o extensie a ceea ce prezinta site-ul si poate spune multe despre persoana sau firma pe care o reprezinta. Astfel trebuie luate in considerare aspecte de genul 'Ce vrea sa ne vanda/prezinte site-ul?' in cazul in care vorbim de site-ul unei companii, si sa alegem o tema adecvata. Sau daca avem de a face cu un blog, se pune problema daca vrem reclame pe el sau nu. Daca da, putem opta pentru teme cu 3 coloane sau cu un spatiu mai amplu in partea de sus pentru a fi pozitionate banner-ele. Un rol important il joaca aici si plug-in-urile care mai pot fi folosite.

Ca o ultima observatie, dupa ce ne-am hotarat asupra unei teme este nevoie si de o testare amanuntita a ei pe mai multe browsere pentru a evita surprizele neplacute :-).
Atat pentru azi, see you soon.
Vali

Prezenta la datorie

Salutare!

Am gasit ca ar fi cazul sa ma prezint si eu - resident .NET geek.
Ati ghicit, eu voi veni cu articole legate de .NET si de majoritatea tehnologiilor incluse in aceasta arie. Veti avea la dispozitie atat tutoriale pas-cu-pas, cat si diverse "fun-facts" - un fel de "Stiati ca?..." din lumea programarii pentru interfete web.

Cum stiu din proprie experienta ca orice ajutor e binevenit pentru cei care lucreaza cu (relativ) noua tehnologie Silverlight, si care probabil se confrunta in permanenta cu noi si noi obstacole aparent inexplicabile, voi tinde ocazional sa pun mai mult accent pe acest tip de articole. Nu mi-o luati in nume de rau. Stiti cum e cu deformatiile profesionale...

Acestea fiind zise, imi inchei introducerea cu un zambaret "class dismissed". Ca nu-i frumos sa tii lumea in plus de la primul curs.

Pana data viitoare,
Catalina

Interfete Web - Butonul Back si Usability

Butonul “Back” este unul dintre cele mai importante butoane web pe orice site. Cu toate acestea, multi dintre web designeri nu se gandesc la aceste butoane atunci cand isi creeaza paginile. De fapt, este ceva obisnuit sa vedem linkuri “Back to home” sau “Back to start” sau doar “Back”.

Daca aceste linkuri nu au o logica care cunoaste exact unde clientul site-ului a fost inainte de a da click ( asa cum poate face butonul “Back” al browserului ), atunci ele nu sunt decat niste presupuneri asupra caii pe care clientul a parcurs-o prin site-ul dumneavoastra.

Cum foloseste majoritatea oamenilor o pagina de web

Majoritatea oamenilor ajunge pe o pagina web si, daca nu gasesc ceea ce vroiau sa citeasca sau sa invete, pleaca. Si cea mai rapida cale de a iesi de pe o pagina web este, ati ghicit cred, butonul “Back”.

De fapt, foarte multi oameni nici nu isi dau seama ca fac asta. Stau pe o pagina web cu mouse-ul peste portiunea de scroll-bar, in caz ca e nevoie sa dea scroll pe pagina. Apoi, daca nu apare nimic cu adevarat interesant, ei trag mouse-el spre coltul din stanga-sus al browserului si merg inapoi la locatia anterioara.

Web Designerii pot sa aiba un efect negativ asupra acestui aspect.

Poata ca va ganditi: “Dar nu vreau sa plece!” Si multi designeri gandesc asa. Si ajung sa faca lucruri foarte enervante precum sa faca pop-up cu pagina lor intr-o fereastra fara buton de “Back”. Am vazut site-uri care merg pana la a inchide fereastra initiala si de a deschide pagina web intr-o noua fereastra fara butoane de control ( fara “Back”, “Forward”, “Refresh” ).

Foarte enervant.

Si nu iti face site-ul mai usor de folosit, ci dimpotriva. Pentru ca metodele standard pe care clientii le folosesc in navigare sunt blocate. De indata ce isi vor da seama cum pot sa inchida fereastra cu site-ul dumneavoastra, o vor face. Si nu se vor mai intoarce.

Nu luati butonul de “Back” vizitatorilor site-ului vostru. Nu ii veti impiedica sa plece, ci ii veti face sa nu se mai intoarca vreodata.

Folositi avantajele butonului “Back”

Nu zic ca ar trebui sa puneti undeva pe site un text de genul “Dati click pe butonul <> al browser-ului pentru a merge la locatia anterioara”. Majoritatea oamenilor stie asta deja si textul ar parea, in cazul acesta, pe putin stupid. In schimb, fiti constienti de faptul ca vizitatorii vostri vor sa foloseasca butonul “Back”, pregatiti-va pentru asta. De exemplu:

1. Puneti-va Brand-ul sus, langa butonul “Back” al browserului.

In timp ce foarte multi oameni nu trebuie sa se uite neaparat atunci cand dau click pe butonul “Back” al browserului, punerea logo-ului vostru acolo va atrage mai multa atentie din partea vizitatorilor atunci cand vor vrea sa plece.

2. Faceti elementele din acea zona click-uibile.

Logo-ul dumneavoastra ar trebui sa contina hyperlink, dar si alte elemente text care sunt in coltul din stanga sus al paginii ar trebui sa fie click-uibile de asemenea. Astfel, daca vizitatorii nu nimeresc butonul “Back”, ar putea ajunge intr-un alt loc util de pe site-ul dumneavoastra.

3. Folositi logurile de server pentru a vedea de unde vin vizitatorii.

Daca stiti de unde vin vizitatorii, ati putea sa modificati pagina web, cu elemente dinamice, care sa afiseze anumite informatii, in functie de locatia din care vin acestia. De exemplu, cineva care vine de pe un motor de cautare s-ar putea sa nu stie cele mai bune metode de a cauta prin site-ul dumneavoastra. Daca includeti detalii despre cum se poate cauta pe paginile site-ului dumneavoastra atunci cand vin de pe un motor de cautare, i-ati putea face sa stea mai mult. Sursa: about.com

A fost folositor ?

Bulent

Interfete Web - Resursa usability

Am gasit azi o resursa foarte buna pentru verificarea accesibilitatii site-ului dumneavoastra.
Daca nu ati auzit inca de Web Content Accesibility Guidelines (WCAG), aflati de aici.
In caz ca va intrebati cum puteti evalua asa ceva. :)

Toate cele bune,
Bulent

Interfete web - Tutorial 1 (introducere)

Bine ati venit la primul tutorial introductiv de interfete web!
Imi doresc ca prin aceste tutoriale sa ofer informatii combinate despre PHP, JavaScript,Ajax,CSS,HTML,MySQL. Pe internet se gasesc o multitudine de informatii despre oricare dintre limbajele anterior mentionate, insa programe in care toate sunt legate intre ele sunt destul de putine (si mai ales in limba romana). Nu voi oferi tutoriale pentru incepatori ci pentru acele persoane care deja au anumite cunostinte in domeniu, insa care doresc sa si le dezvolte mai mult.
Vom lucra pe exemple concrete ce vor fi explicate si comentate!
Sper ca aceste tutoriale de interfete web sa va fie de folos!

Valentin.

Bine v-am gasit !

Echipa "Solutii W3B" va saluta !
Suntem o firma tanara, entuziasta si cu multe de zis.

Domeniul nostru principal de activitate este legat de interfete web.
Prin acest blog vrem sa va transmitem lucruri utile legate de tehnologiile pe care le folosim, problemele si satisfactiile echipei noastre in aventura pe care am inceput-o de curand - firma "Solutii W3B".

Aici veti gasi, de asemenea, diverse tutoriale si coduri sursa pe care le puteti folosi.
Speram ca existenta noastra sa aduca plus valoare vietii online si fiecare minut petrecut alaturi de blogul nostru sa fie pierdut cu folos.

Urmeaza niste articole in care fiecare dintre noi, cei din echipa, ne vom prezenta :)
Sa auzim de bine !

Echipa "Solutii W3B"