Interfete Web

Enter Silverlight - partea a doua

2009-01-12T11:17:00.002+02:00

Am spus mai devreme ca ma voi intoarce cu mai multe detalii legate de limbajul XAML folosit pentru definirea interfetei cu utilizatorul. Si iata ca m-am intors. Sa vedem...

Limbajul XAML (sau Extensible Application Markup Language) este un limbaj declarativ bazat pe regulile XML. Din punct de vedere al sintaxei, regulile sunt destul de putine si foarte clare. In primul rand, trebuie ca tot continutul fisierului XAML sa fie inclus intr-un nod radacina de tipul Canvas.

Dupa cum stim, standardele XML permit introducerea de date in noduri ca atribute, sau sub forma de continut. Un feature foarte util prezent in limbajul XAML este sintaxa elementelor proprietate, care permite acordarea de valori complexe proprietatilor. Cum ar fi, de exemplu, definirea unui fundal ca un gradient dat prin culorile in anumite puncte "ancora". Sintaxa de baza presupun adaugarea in interiorul nodului obiect, a unuia sau a mai multor noduri de forma NumeObiect.NumeProprietate, iar in interiorul acestora, a unor noduri ValoareProprietate.

Aceasta sintaxa are atat avantajul de a permite definirea unor proprietati practic oricat de complexe, cat si acela al faptului ca lasa loc pentru continutul propriu-zis al obiectului parinte. Astfel, definirea proprietatilor poate fi interpretata ca un header, dupa care se poate adauga continutul.

Un alt tip de proprietate implementat in XAML este cel al proprietatilor atasate, adica al unor proprietati pe care elementul respectiv nu le detine in mod nativ, dar daca ii sunt atasate le poate interpreta prin referire la proprietatile elementului parinte. Spre exemplu proprietatile Top si Left (distanta fata de marginea de sus, respectiv din stanga a containerului), sunt dependente de contextul in care se afla elementul respectiv.

O ultima nota asupra sintaxei XAML va face referire la tratarea evenimentelor. Acestea sunt definite in XAML in mod foarte asemanator cu HTML. Asocierea dintre lansarea unui eveniment si metoda ce il trateaza se face prin adaugarea la elementul vizat a unei proprietati de forma NumeEveniment="FunctieHandler()".

Acestea fiind zise, voi incheia aici partea a doua a seriei Silverlight, urmand sa revin data viitoare cu o serie de probleme cunoscute ale versiunii curente de Silverlight si cele mai uzuale solutii de work-around.

Catalina

Interfete web - Tutorial 4

2009-01-12T10:50:00.002+02:00

In acest nou tutorial legat de interfete web vom aplica o tactica diferita.
Aveti acces la codul sursa a proiectului dand click aici .

La fel ca si tutorialul anterior este vorba de un "magazin online".
Trebuie sa aveti grija la instalarea bazei de date (procedurile folosite nu pot fi introduse direct asa cum sunt ele scrise in acele query), asa ca va trebui sa gasiti o modalitate de a le introduce direct in baza de date.

Cu acest tutorial 4, va doresc un an nou fericit si sa ne revedem cu bine!

Cu respect,
Valentin

Interfete web - Tutorial 3

2009-01-12T10:13:00.003+02:00

Salut la tutorialul 3 legat de interfete web, mai exact legat de un magazin online.

Codul il gasiti la adresa:
Sursa

In stilul cunoscut vom analiza pe rand partile componente:

1. MySQL
Pentru a simplifica instalarea bazei de date am exportat eu datele folosite magazin.sql, dar pentru a putea sa le folositi va trebui sa creati, totusi, o baza de date numita magizin. In cazul in care nu sunteti familiari cu import si export din phpmyadmin, atunci puteti (dupa ce ati creat baza de date si ati setat si parametrii corecti de conectare - din conectare.php) pur si simplu sa rulati fisierul instalare.php.

2. Javascript (functii.js)
Contine 3 functii: primele doua doar deschid noi ferestre si le seteaza anumiti parametri. Functia "what" primeste 4 argumente: primele doua in principiu identifica id-ul produsului si id-ul utilizatorului, al treile argument identifica actiunea ce trebuie executat si cel de-al patrulea argument este numele div-ul unde se va scrie informatia.

3. PHP
a) Login.php - permite unui utilizator sa se logheze
b) Register.php - permite inregistrarea unui nou utilizator
c) Admin.php - adauga un nou produs in baza de date
d) Functii.php
- este partea apelata de Ajax
- pune la dispozitie 3 actiuni posibile: 1 - adaugarea unui produs in cos, 2 - stergerea unui produs din cos, 3 - cumpararea produselor din cos
e) Index.php
- este pagina principala si in functie de un id cu care este chemata are un comportament diferit
- daca id-ul este 1 atunci se afiseaza toate produsele disponibile (se poate observa faptul ca se permite o navigare si o cumparare fara ca initial sa existe un login)
- pentru id 2 se permite cumpararea produselor din cos
- pentru id 3 se afiseaza un istoric al tuturor cumparaturilor
- pentru id 4 se face logout

4. CSS
- dupa cum se poate observa css-ul are aproximativ 9k, site-ul pornind de la un template free, aplicatia fiind construita pe acest template

Enter Silverlight...

2009-01-12T05:04:00.003+02:00

Salutare din nou!

Voi face o mica pauza in seria articolelor ce au ca tema comparatia intre VB si C#, pentru a va prezenta o tehnologie relativ noua, si foarte promitatoare, in ciuda problemelor adesea evidente pe care inca le mai are - tehnologia Microsoft Silverlight.

Acestea fiind zise, sa trecem la treaba - deci ce este Silverlight?
Silverlight este o tehnologie web disponibila in cadrul framework-ului .NET, portabila din punct de vedere al browserului si al platformei, si creata cu scopul de a permite dezvoltarea a ceea ce a fost denumit ultima generatie de RIA (Rich Interactive Application), intr-un mod mai vizual si mai orientat pe design decat oricand. Pe partea clientului, functioneaza pe orice browser, incluzand Internet Explorer, Firefox, Safari, Opera, etc, fiind necesara doar instalarea unui mic plugin.

Ca sa punem problema in modul cel mai simplu, Silverlight este raspunsul Microsoft la Adobe Flash. Iar in ciuda problemelor inca nerezolvate in versiunea curenta (v2.0 - release candidate 0 la momentul scrierii articolului), isi atinge in general obiectivul prin faptul ca este mai versatil, mai puternic , si mai "comunicativ" cu alte tehnologii, daca putem spune astfel. Putin mai tarziu vom vedea in ce constau si problemele pe care le-am mentionat. Dar sa revenim.

De ce spun ca este mai versatil? Silverlight este, tehnic vorbind, o combinatie de mai multe tehnologii accesibile din acceasi platforma de dezvoltare, fapt ce permite developerului sa-si aleaga uneltele si limbajul de programare pe care doreste sa le foloseasca (lux inaccesibil developerului orientat pe Flash). Se integreaza fara probleme cu codul deja existent de Javascript si Ajax, pentru a completa functionalitatea deja existenta.

Urmatoarea intrebare - ce contine o aplicatie Silverlight? Raspuns - cel putin 3 elemente:
- un fisier html radacina, ce are ca singur scop lansarea apelului "Create Silverlight" ce porneste randarea aplicatiei propriu-zise,
- unul sau mai multe fisiere XAML, ce compun interfata aplicatiei (voi detalia putin mai tarziu structura unui fisier XAML, deocamdata voi mentiona doar ca limbajul folosit este foarte asemanator cu XHTML)
- un assembly DLL, referentiat din fisierele XAML, si care dupa incarcare, ruleaza client-side, asemanator cu javascript, dand astfel impresia de aplicatie desktop. In acesta assembly se incorporeaza toate celelalte module si biblioteci necesare.

In incheierea acestei prime parti a seriei Silverlight, voi mentiona motivele pentru care Microsoft sustine ca Silverlight va revolutiona dezvoltarea web. Daca au dreptate sau nu, vom vedea in continuare.

1. Cross-platform, cross-browser - permite dezvoltarea de aplicatii web ce vor functiona pe orice browser, sub orice sistem de operare.
2. Developerii si designerii grafici pot lucra acum independent (cu alte cuvinte, nu mai pot da vina unii pe altii cand nu iese bine :) ) - datorita gradului ceva mai mare de independenta dintre partea client-side (sursa XAML) si server-side (codul din spate), orice designer cu un minimum de cunostine HTML va prinde imediat "din zbor" limbajul XAML si va putea crea layout-ul cu mana lui, fara a-i explica developerului cum ar vrea sa arate aplicatia, lasand implementare layoutului tot in mainile acestuia din urma.
3. Costuri mai mici - Silverlight este cel mai ieftin mod de a realiza video streaming la cea mai buna calitate, licentierea este foarte simpla, iar ca requirements suplimentare, nu este necesar altceva decat IIS.
4. Suport pentru limbaje third-party - datorita noului DLR (Dynamic Language Runtime), developerii vor putea scrie codul server-side intr-o multime de alte limbaje, cum ar fi Ruby, Python, etc (pe langa evidentele VB si C#).
5. Viteza mai mare - din studiile Microsoft (ce raman, evident, a fi verificate), aplicatiile web bazate pe Silverlight sunt mult mai responsive si mai rapide decat cele bazate strict pe Ajax (evident, strict din punct de vedere al interfetei).

Aici se incheie introducerea in tehnologia numita Silverlight. Voi reveni in continuare cu mai multe detalii, si cu o scurta prezentare a partilor nu asa de promitatoare ale acesteia.

Catalina

de incheiere... (sau nu)

2009-01-11T23:06:00.001+02:00

Hello friends,

Well well well, cred ca ma aflu in fata ultimului meu post pe acest blog dragut. Astfel inchei aceasta mica aventura in care trebuie sa recunosc ca am mai invat cateva tips & tricks despre ce inseamna a contribuii cu o pagina web decenta la cele 43 de miliarde de pagini deja existente. Nu in ultimul rand am mai invatat si cum sa te faci observat (in afara de a pune link-ul la status la messenger cu textul 'NU DA CLICK!!') si placut de catre cititori/vizitatori.
Imi voi continua "activitatea online" pe un alt blog/site, cel mai probabil dupa sesiune, fiind instigat si de doi buni amici ai mei care si-au tras blog-uri recent.
Ii salut in primul rand pe colegii mei din echipa, Vali, Catalina si Billy, pe care din pacate nu am apucat sa-i vad in 2009. Va urez un 'La multi ani!' intarziat dar calduros si mult succes in anul asta greu care ne asteapta. Cat despre restul care apuca sa citeasca acest post, tineti-mi va rog pumnii in aceasta sesiune :-D

Ne auzim cat de curand,
Vali

Spotify Rocks !!

2009-01-11T19:56:00.004+02:00

Ati descoperit vreodata o carte, un film, sau poate o aplicatie care sa va placa asa de mult incat sa tineti neaparat sa povestiti la altii despre ea? Cam in postura asta ma aflu eu acum si vreau sa va fac o recomandare a unui serviciu descoperit in ultimele zile cu ajutorul unui foarte bun amic :

* Ce este Spotify?
Spotify este o aplicatie de streaming de melodii care va pune la dispozitie o baza de date (biblioteca, librarie) impresionanta de piese spre a fi ascultate. Aplicatia este dezvoltata de Ludvig Strigeus, software engineer-ul care a creat uTorrent, si de aceea este si foarte resource-friendly.

* De ce e Spotify asa misto?
Partea interesanta e ca streaming-ul propriu-zis al pieselor se face prin metoda clasica, de la un server de streaming, dar si peer-to-peer intre utilizatori. Exact ca la BitTorrent: odata cu log-area unui utilizator pe server melodiile aflate in cache-ul sau sunt indexate si trimise la hub-ul de stream Spotify. Acest index este folosit pentru a anunta alti utilizatori de posibilitatea de a se conecta direct pentru a accesa piesele respective. Si cu ce ne ajuta asta? Incarcarea si seek-ul prin melodii se face aproape instant si astfel poti beneficia de o auditie neintrerupta chiar si cu o conexiune de internet mai slaba.
Cele mai ascultate piese sunt in general stream-uite interutilizatori fara a mai aglomera serverul, care poate servi spre ascultarea pieselor mai putin populare.

* GUI & Usability
Interfata e o combinatie intre cea de la iTunes si cea a playerul-ui Last.fm. Playlisturile se pot crea si modifica foarte usor prin drag'n'drop, iar orice informatie a melodiei (Artist, Titlu, Album) reprezinta un link spre a naviga prin libraria de piese mai usor. Spotify prezinta si o parte sociala:
se pot crea playlisturi colaborative de catre mai multi useri simultan iar playlist-urile si melodiile se poate impartii cu alti utilizatori prin link-uri specifice Spotify. Linkurile se pot obtine din aplicatie sau direct prin drag'n'drop in browser, mail sau client de chat.
O alta facilitate o reprezinta optiunea ce permite integrarea cu Last.fm

What is Spotify? from Philip Harrison on Vimeo.

* What's the catch? E legal?
Exista doua pachete Spotify: unul free in care auditia este intrerupta in anumite momente de reclame, sau pachetul Premium (9.99€/luna) care nu include nici o reclama si confera utilizatorilor acces la preview-uri de piese si stiri.
Pentru a-si umple libraria audio cei de la Spotify au incheiat contracte cu EMI, Warner Music, Sony BMG si inca 3 mari case de discuri internationale care au fost foarte deschise la noul concept.
Spotify se vrea o alternativa la pirateria muzicala si a primit un feedback foarte pozitiv de la utilizatorii sai. Baza sa de date este updatata constant cu numeroase albume si piese (noi si vechi) iar viteza si usurinta sa de utilizare fac totul sa para ca si cum ar fi local si nu prin streaming.

Daca v-am convins sa incercati acest serviciu, care din punctul meu de vedere va avea un succes enorm, va anunt ca inregistrarea se face pe baza de invitatii pe care ulterior le primiti pe masura ce ascultati mai multa muzica :-) Dati un click pe profilul meu si imi dati un mail de request si o sa primiti o invitatie din partea mea. Odata facut contul mai urmeaza descarcarea clientului si... voila, muzica ta preferata la cateva click-uri distanta.
Ca un bonus va invit, dupa ce va inregistrati, sa ascultati un playlist facut de mine impreuna cu un amic de-al meu (acelasi amic care mi-a recomandat Spotify) ce contine o selectie de piese foarte relaxante, romantice si vioaie pe alocuri :) enjoy!
Vali

Interfete Web 101 - Moda blog-urilor

2009-01-10T22:52:00.000+02:00

Salutare,

Astazi o sa vorbim cate putin despre blog-uri, aceste 'jurnale' ajunse asa de populare si complexe incat am putea umple sute de posturi pe tema lor :-) Initial nu aceasta era subiectul de care vroiam sa ma ating, dar am observat ca multi dintre prietenii mei si-au facut blog-uri recent (in ultima luna) si se pare ca blogging-ul a ajuns cu adevarat mainstream.

Pe scurt
Termenul de "blog" vine de la asocierea "web log" si reprezinta un site intretinut de regula de o singura persoana cu rolul de jurnal virtual si public. Autorul sau are postari regulate despre intamplari din viata sa, stiri, comentarii sau orice fel de continut audio sau video. Postarile sunt in general in scris, sub forma de text, combinate cu poze si link-uri catre alte referinte. De asemenea, aceste postari sunt deseori insotite de comentarii din partea cititorilor si interventii ulterioare ale autorului ca raspuns la comentarii. Exista si blog-uri specializate pe un anumit tip de continut : blog-uri photo(photoblog), video bloguri(vlog), blog-uri audio(MP3 blog), cartoon blogs, etc.

De ce le aduc in discutie cand noi vorbim de interfete web?
Pentru ca intr-un fel blog-urile pot fi privite ca o 'interfata' intre cititori si autorul blog-ului, o modalitate de cunoastere a acestuia si de intra in contact direct cu el. Si bineinteles suportul prin care se face aceasta interactiune este 'web-ul'. Un blog poate fi foarte usor pus pe picioare apeland la un CMS specializat. Cele mai des intalnite sunt Wordpress si cel oferit de Google prin www.blogger.com .

Si care e treaba cu moda asta pana la urma?
Conform unui studiu realizat de Technorati pe 2008, cand au fost intrebati de ce tin un blog majoritatea celor care detin un blog personal au raspuns ca din distractie. De asemenea tot din acelasi studiu reiese ca 20% din bloggeri obtin sume de bani de pe seama blog-ului iar 42% vor sa obtina in viitorul apropiat. Media de castiguri insa este de aproape 200$ din care 50$ sunt reinvestiti in blog.
Blogul poate fi si o sursa de notorietate, 37% dintre bloggeri din acelasi studiu fiind citati de mass-media pentru una din postarile lor.
Motivele de a porni un blog sunt foarte multe, fie ca e un blog corporate, o tema data la facultate sau pur si simplu un loc de refugiu cu gandurile in scris.
Numarul blog-urilor s-a tot dublat in ultimii ani, deci avem de a face cu o crestere exponentiala. In prezent nu stim concret numarul total al blog-urilor pe plan mondial, singura modalitate mai exacta de a le numara fiind prin intermediul motoarelor de indexare care le acopera. Astfel Technorati cauta in 133 de milioane de bloguri; acest numar nu include cele 72.82 de milioane de blog-uri chinezesti raportate de The China Internet Network Information Center, sau numeroasele blog-uri de SPAM.

Moda sau nu, in final se rezuma la faptul ca fiecare vrea sa isi lase amprenta undeva in Internet spre a fi descoperita de alti curiosi.
PS: Nu uitati sa recititi postul despre teme pentru site-uri/blog-uri daca vreti sa va apucati de treaba.

Vali

La ce sa fim atenti cand testam uzabilitatea unui site

2009-01-03T11:44:00.005+02:00

La ce sa fim atenti cand testam uzabilitatea unui site

Sunt patru lucruri importante de care trebuie sa avem grija atunci cand testam uzabilitatea propriei pagini web.

Testati site-ul si nu userii.
Bazati-va mai mult pe ce aflati despre performanta decat despre preferinte.
Folositi-va de ce aflati din testare.
Incercati sa gasiti solutia cea mai buna avand in vedere ce gandeste majoritatea utilizatorilor vostri.

Testati site-ul si nu userii

Pentru unii utilizatori, termenul "testare" are o conotatie negativa. Ne chinuim sa ne asiguram ca participantii nu se gandesc ca ii testam. Ii ajutam sa inteleaga ca ne ajuta sa testam prototipul sau pagina web. De fapt, nu folositi termenul "testare" in fata participantilor deloc. In schimb, invitati participantii sa ajute la "incercarea prototipului".

Cand utilizatorii intampina greutati in finalizarea unei sarcini, remediem pagina web, nu utilizatorii. Intrebarea care trebuie pusa este: " Cat de bine permite pagina mea utilizatorilor obisnuiti sa isi atinga obiectivele de la intrarea pe site ?" in loc de " Cat de bine se descurca utilizatorii pe site ? "

Bazati-va mai mult pe ce aflati despre performanta decat despre preferinte.

Putem masura atat performanta, cat si preferintele. Indicatorii performantei includ succesul, timpul, erorile etc. Indicatorii preferintelor sunt indici ai satisfactiei si confortului utilizatorilor.

Unii designeri cred ca daca fac designul unei pagini web pentru a satisface cerintele utilizatorilor, site-ul va face ca utilizatorii sa actioneze bine. Realitatea nu sustine acest lucru.
De fapt, performanta utilizatorilor si preferintele lor nu se potrivesc mereu. Un studiu a aflat ca in jur de 70% din utilizatori au avut indicatori ai performantei si ai preferintei care se potriveau.
Asta inseamna ca fie s-au descurcat bine si le-a placut pagina web, fie nu s-au descurcat si nu le-a placut pagina.

Cu toate astea, ramane un procent destul de mare de oameni - 30% pentru care indicii performantei si ai preferintelor nu se potriveau. Asta inseamna ca fie s-au descurcat bine pe pagina web, dar nu le-a placut, fie nu s-au descurcat bine, dar le-a placut.

Diverse motive au fost propuse pentru a explica de ce deseori oamenii dau unui site o nota mai mare decat ne-am astepta din indicii de performanta. Se poate sa dea vina pe ei insisi pentru problemele pe care le au pe site. Se pot gandi ca pot rani sentimentele administratorilor paginii web daca acorda site-ului o nota mica. Poate ca nu au fost constienti de problemele pe care le-au avut pe site, atunci cand le-au avut. Toate aceste motive sustin recomandarea de a va baza mai mult pe ce aflati din indicii de performanta decat din indicii de preferinte.

Folositi-va de ce aflati din testare

Testarea uzabilitatii nu este doar un to-do care trebuie bifat cat mai repede in proiectul paginii web. Un test de uzabilitate nu este terminat atunci cand ultimul participant termina testarea. Echipa trebuie sa se gandeasca la cele aflate, sa seteze prioritati si sa schimbe prototipul sau pagina web pe baza celor intamplate in testarea uzabilitatii.

Incercati sa gasiti solutia cea mai buna avand in vedere ce gandeste majoritatea utilizatorilor vostri.

Creare oricarui produs, inclusiv o pagina web, necesita luarea in considerare a multor utilizatori diferiti cu diferite modalitati de lucru, diferite experiente si diferite intrebari si nevoi. Cele mai multe proiecte, incluzand designul si update-urile paginilor web, trebuie sa faca fata constrangerilor de timp, buget si resurse. Punerea in balanta a tuturor acestor lucruri este o provocare majora a majoratatii proiectelor.

Incercati sa creati pagini web care vor permite unui procentaj foarte mare dintre utilizatorii vostri sa isi raspunda la intrebari si sa isi finalizeze taskurile pentru care au intrat pe pagina web. Cercetarile arata ca acele costuri suportate pentru revizuirea paginii web din cauza utilizatorilor care nu au succes pe site sunt mult mai mari decat costul gandirii paginii web sa corespunda nevoilor userilor inainte ca aceasta sa fie lansata.

Avand in vedere nevoile identificate in timpul testarii uzabilitatii, incercati sa gasiti cele mai bune solutii pentru problemele de design ale paginii web. O interfata web bine gandita asigura succesul utilizatorilor pe site, ceea ce duce la revenirea lor pe pagina si la satisfactie mai mare cu privire la site. sursa: usability.gov

Pentru o testare a uzabilitatii de succes !
Bulent

Validatori CSS ( Cascading Style Sheets )

2009-01-03T11:32:00.002+02:00

Pentru a valida sursele CSS pe care le creati, am gasit cateva unelte care va pot fi de folos:

CSSCheckup
Verifica un CSS de pe hard drive pentru a fi in conformitate cu standardele.

"Validate your CSS"
Pentru a valida CSS conform specificatiilor W3C.

CSS Check
Aceasta unealta este utila pentru a verifica acuratetea CSS-ului.

CSS Validator
Un validator CSS in java, care poate fi downloadat.

Pentru coduri CSS frumos scrise :)
Bulent

Interfete Web 101 - CMS

2008-12-08T02:47:00.001+02:00

Salut din nou!

Tot din categoria elementelor de baza (101) ce trebuie luate in vedere cand vine vorba de construirea unui site, face parte si termenul de Content Management System, pe scurt CMS.

Ce este un CMS?
Dupa cum ii zice si traducerea mot-a-mot din engleza, un CMS reprezinta un sistem de administrare al continutului unui website. El este format in general din doua componente:
- CMA (Content Management Application): partea ce permite unui manager sau utilizator sa creeze, modifice, sau stearga continutul unui site fara a avea cunostinte specializate (Webmaster, HTML).
- CDA (Content Delivery Application): componenta ce foloseste si compileaza informatiile din CMS pentru a actualiza website-ul nostru.

Functionalitatea unui CMS

sursa photo
Dupa cum se poate observa in figura functiile de baza ale unui CMS sunt:

* Crearea de continut : Un CMS ofera o interfata usoara de adaugare de fisiere text, poze, video, documente unui utilizator care nu are cunostinte de HTML sau Web design. De asemenea are functii de structurare a informatiei, folosind chiar drag-and-drop intre pagini, si de stabilire a legaturilor existente intre ele.

* Managementul continutului : Sunt puse la dispozitie mecanisme ce asigura salvarea tuturor versiunilor unei pagini pe masura ce ea este actualizata, impreuna cu informatii despre cine a facut modificarea si cand. De asemenea se poate asigura accesul userilor doar la anumite parti ale unui website care pot fi editate, si pentru a asigura un control mai bun al continutului fiecare actualizare poate fi notificata unui supervisor pentru a primi o confirmare inainte ca acesta sa fie publicat efectiv de catre CDA.

* Publicarea : Odata ce continutul este gata acesta poate fi publicat foarte usor pe unul sau mai multe site-uri simultan. CMS-ul lasa loc pentru o customizare grafica prin numeroase teme si plug-in-uri, si asigura consistenta paginilor pe website-ul nostru. Aceasta face ca atentia autorului sa fie mai concentrata asupra calitatii continutului, in timp ce partea de look & feel sa revina CMS-ului.

* Prezentare : Un CMS cuprinde numeroase modalitati de imbunatatire a calitatii si flexibilitatii unui site. Asigura o compatibilitate cu numeroase browsere si face ca site-ul sa fie accesibil la un numar cat mai mare de vizitatori. Poate genera automat structura paginilor si meniurile din site si deasemenea il poate face mai interactiv cu vizitatorii si mai dinamic.

In plus fata de cele prezentate mai sus, un CMS mai prezinta si alte avantaje: costuri reduse de mentenanta a site-ului impreuna cu suport pe numeroase forumuri, optiuni de securitate avansate, timp scurt de punere in functiune si un potential mai mare de crestere a site-ului datorita contributiei simultane a mai multor autori la el.

Exemple
Printre cele mai cunoscute CMS-uri se regasesc Joomla!, Drupal, si specializat pe partea de blog-uri, Wordpress. Exista si evaluari ale CMS-urilor anuale iar o lista sumara a premiilor acordate o gasiti aici. Un exemplu de site construit pe Joomla! si cu tutoriale pe partea de interfete web este www.interfete-w3b.com

Va salut si ne reauzim in curand :-)

C# vs. VB - Partea a doua

2008-12-08T02:14:00.000+02:00

Revin cu partea a doua a micutei noastre comparatii intre C# si VB, si va voi prezenta in continuare diferentele concrete, la nivel de sintaxa, intre cele doua limbaje.

Structura
Din punct de vedere al organizarii generale, codul C# si cel VB sunt foarte asemanatoare, majoritatea diferentelor fiind pur cosmetice - spre exemplu, C# foloseste acolade pentru a deschide si inchide blocuri, VB - "End ". Ceea ce este, insa, bine de stiut, este faptul ca in timp ce C# permite scrierea mai multor instructiuni pe o singura linie, sau a unei singure instructiuni pe mai multe linii, VB nu permite acest lucru. Cu alte cuvinte, in VB avem "linia si intructiunea", sau putem folosi caracterul "_" (underscore) pentru a continua pe linia urmatoare. Majoritatea tutorialelor de tip "coding style guidelines" chiar recomanda folosirea acestei alternative pentru a face codul cat mai lizibil.

Comentarii
La prima vedere, aceasta sectiune poate parea nu foarte importanta, dar de dragul coding style (din nou) si al documentarii codului (mai ales in cazul lucrului in echipa, sau al unui proiect al carui cod sursa urmeaza a fi inspectat de un superior, client, etc.) - voi discuta si acest aspect. Ce este interesant de observat - si o bila alba pentru C# in defavoarea lui VB - este faptul ca C# ofera o mult mai mare flexibilitate a comentariilor - se pot comenta atat cate o linie intreaga sau o portiune finala de linie ("//"), cat si mai multe linii consecutive ("/*...*/"). In VB, in schimb, nu se pot comenta decat linii intregi sau portiuni finale de linii (prin inserarea unui apostrof), si nu paragrafe. Din fericire, insa, Visual Studio compenseaza acest neajuns prin optiunea de a comenta automat o selectie a cursorului.
O facilitate demna de mentionat (chiar daca nu reprezinta o diferenta, fiind accesibila pentru ambele limbaje) este aceea de adauga un summary oricarei functii sau metode.

Tipuri de date
Tipurile primitive de date sunt aceleasi atat in C#, cat si in VB, singurele diferente fiind de scriere a denumirilor acestora. Ca regula, in VB denumirile sunt scrise cu litera mare, iar in C# cu litera mica, singura exceptie fiind DateTime din C#. Tipurile principale de date la care apar si alte diferente sunt (VB/C#): Boolean/bool, Integer/int, UInteger/uint, Single/float, Date/DateTime.
Ce ar mai fi de mentionat aici este conversia intre tipuri. In VB, cea generala se face prin functia CType(obiect, tip), cu forme particulare, cum ar fi CInt, CStr, etc. Iar in C#, conversia se face prin cast, de forma (tip_nou)obiect.

Constante si enumerari
Nu se pot spune prea multe la acest capitol - declararea si folosirea constantelor si a enumerarilor sunt aproape identice intre cele doua limbaje, iar cuvintele cheie (const, respectiv enum), sunt si ele aceleasi (mai putin capitalizarea).

Operatori
Principalele diferente intre operatorii C# si cei VB sunt faptul ca C#, spre deosebire de VB, foloseste doi operatori diferiti pentru atribuire si comparatie de egalitate (=, respectiv ==), si apropierea de limbajul natural a operatorilor logici in VB, fata de C# - spre exemplu AndAlso/And, fata de &&/&, OrElse/Or, fata de ||/|, etc.

Voi continua in posturile urmatoare cu restul diferentelor. Intre timp, puteti arunca un ochi aici, pentru exemple de cod si pentru detalii suplimentare pe marginea a ceea ce am mentionat de mai sus, dar nu uitati sa va intoarceti pentru explicatii :).

Catalina

C# vs. VB - The Series

2008-12-01T13:29:00.005+02:00

Salutare din nou!

Intamplator m-am intalnit zilele trecute cu amic "fellow .NET monkey". Evident, cand conversatia a ajuns la capitolul "cu ce te ocupi?", prima intrebare a fost "VB sau C#?". Cum aceasta pare intrebarea zilei (de cam multe zile), m-am gandit sa incerc sa formulez si propriul meu raspuns.

Prima parte a acestui raspuns va trata aspectul istoric, sa spunem asa, al diferentelor intre cele doua limbaje - mai exact, contextul in care a aparut fiecare si publicul caruia ii era fiecare destinat.

1. Visual Basic

Scopul limbajului Visual Basic a fost de a crea o piata mai larga pentru uneltele de software development. Inainte de aparitia sa, in martie 1991, limbajele de programare erau percepute ca fiind complexe si accesibile numai programatorilor cu multa pregatire si experienta. VB, in schimb, este simplu din punct de vedere sintactic, apropiat de limbajul natural, si permite practic oricui sa creeze aplicatii de baza, dupa numai cateva ore de exercitiu. In contextul in care la momentul aparitiei VB, programarea era vazuta ca un soi de arta elitista, posibilitatea de a se alatura acestei "elite" a generat o adevarata miscare de masa in randurile "calculatoristilor" cu experienta in "butonare", dar nu in programare.

Faptul ca Visual Basic (cel de la vremea aceea, cel putin), nu dispunea de uneltele de baza ale programarii orientate pe obiecte nu a contat foarte mult pe moment. Aplicatiile pentru care exista cerere erau inca suficient de simple - client-server in cel mai fericit caz, iar aplicatiile web nu depaseau stadiul de experimente si improvizatii. Fapt ce a reprezentat o lama cu doua taisuri.

Varful "modei" VB a coincis cu varful fenomenului numit "Internet boom". Armate de programatori cu lacune grave in pregatire si in gandire erau platiti cu sume fabuloase pentru a incropi orice semana cat de cat cu o aplicatie software. Iar limbajul VB, cu lipsa sa de formalitate si de constrangeri, a constituit mediul perfect.

Schimbarea a intervenit in 2000, cand Microsoft a anuntat lansarea .NET, iar tot ceea ce a insemnat pana atunci VB a fost inlocuit cu un model cu totul nou. Engine-ul din spate a fost rescris de la zero, si toate uneltele third party mai mult sau mai putin functionale, elegante, etc. au fost inlocuite cu un framework nou, organizat, si consistent. Cu aceste schimbari, functionalitatea VB a fost adusa la nivelul unui C# si Java.

Cu toate acestea, mentalitatea VB a ramas pana astazi cam aceeasi, si exista o explicatie pentru care, statistic vorbind, programatorul mediu C# da dovada de ceva mai multa disciplina decat cel VB. Evident, cu exceptiile de rigoare.

2. C#

Prin comparatie, C# a pastrat formalitatea si constrangerile specifice C, apoi Java. Efectul indirect a fost perpetuarea mentalitatii oarecum elitiste ce domina aria programarii pana la aparitia VB. Multi programatori C# inca ii privesc cu un anume aer de superioritate pe cei VB. O posibila explicatie a mentalitatii C# ar fi sintaxa putin mai abstracta, fata de cea VB, foarte apropiata de limbajul natural. O alta, dupa cum am precizat mai sus, numarul mult mai mare de programatori VB.

Adevarul este, in proprie experienta, cel putin, ca din punct de vedere functional, cele doua limbaje ofera aceleasi unelte si se pot realiza aceleasi lucruri la fel de bine. Dovada sta faptul ca orice sursa poate fi tradusa dintr-un limbaj in celalalt. Diferenta este ca unele "bucatele" de functionalitate pot fi implementate mai usor/mai repede/in mai putine linii, in C# fata de VB, sau invers.

Iar exact aceste diferente concrete in sintaxa, evaluare, organizare a memoriei, vor constitui subiectul urmatoarelor articole din aceasta mini-serie.

Pe data viitoare,
Catalina

Tutorial 2 - Interfete web

2008-11-23T15:31:00.003+02:00

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

2008-11-10T12:25:00.007+02:00

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

2008-11-10T00:05:00.004+02:00

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

2008-11-06T17:20:00.003+02:00

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

2008-11-06T16:29:00.003+02:00

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)

2008-11-06T14:29:00.000+02:00

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 !

2008-11-03T00:14:00.000+02:00

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"