Enter Silverlight - partea a doua

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

Enter Silverlight...

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

Interfete Web 101 - Moda blog-urilor

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

Interfete Web 101 - CMS

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 :-)

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