Blog-ul de proiect Interfete Evoluate al echipei Interfete Tunate si Evoluate. Tehnologii web in discutie: Flash, XML, CSS, HTML, si alte interfete evoluate. O experienta unica cu cele mai evoluate interfete.
A sosit momentul ca invatamantul romanesc (chiar si putinul care ne-a mai ramas) sa invete sa supravietuiasca in blogosfera. Acesta este totusi un deziderat oarecum nerealist tinand cont ca mai bine de jumatate din populatie nu are acces constant la internet. Insa, subiectul este unul care merita adus in discutie, macar pentru viitor...
Iata cum pot fi blogurile folosite ca o metoda de invatare colaborativa in scoala:
Profesorii posteaza pe blog activitatile si temele din ziua respectiva pe care elevii le pot vizualiza online. Elevii/studentii colaboreaza la rezolvarea problemei sau pentru crearea unei retele de invatare. Elevii mentin astfel de jurnale online pe care le pot accesa si modifica usor si pot primi feedback de la professor. Cu sigurata o solutie superioara celeia bazata pe hartie si creion. J Elevii vad, asculta si share-uiesc video-uri si podcast-uri. Elevii creaza portofolii multimedia pentru a arata ce au invatat. Notitele de cercetare si link-uri catre site-urile folosite sunt adunate in mod compact si impartasite intregii scoli.
Blogurile sustin modelul de invatare constructivist deoarece ofera o modalitate accesibila de a comunica, organiza reflecta, crea si coordona. Pot fi create rapid ca bloguri de grup sau individuale. Blogurile elimina necesitatea de a intelege cod html complex sau de a plati pentru spatiu web. Cele mai cunoscute servicii de hosting sunt: TypePad, Blogger, LiveJournal. Acestea ofera multe template-uri atragatoare pentru bloguri, cu care elevii isi pot personaliza lucrul online.
In lumea virtuala aproape orice este posibil :), deci este o resursa extraordinara de exprimare. De ce sa nu profite de ea chiar principala institutie formatoare?
Toate marile corporatii se ingramadesc in ultima vreme sa prinda o bucatica din placinta generoasa a web 2.0. La ultima conferinta telefonica cu seful cel mare din minunata corporatie la care prestez ne-am inteles sa dam un shot de tequila de fiecare data cand zice "web 2.0" :). Si cum nu esti in rand cu lumea daca nu ai blog in care sa ridici probleme corporatiste, toti care simt ca au ceva de transmis au pornit un blog. Un blog corporate (apartinand oficial de o companie) poate fi cu circuit inchis (intern) sau public. Cel intern ii ajuta pe angajati sa comunice si sa discute problemele mult mai usor (stim ca in fata computerului, individul devine mai dezinhibat si mult mai dispus sa-si exprime gandurile decat prin viu grai, face to face). Blogul corporate public e o forma evidenta de relationare cu consumatorul, existent sau potential.
Se poate transforma intr-un serviciu de promovare a produselor sau de comunicare cu publicul si cu presa. Blogul corporate este insa un instrument extrem de periculos, orice inabilitate transformandu-l intr-o arma care se indreapta impotriva autorului. De pilda, nu poti spala rufele in public cu clientii sau competitorii si nici nu poti divulga secrete de serviciu, pentru ca vei fi zburat de la job cat ai zice blog.
Daca ai ceva de spus despre corporatia ta, blogul is the way to do it! ;)
Suntem indexati de Google. Against all odds, se pare ca tîrîtorul de la Google ne-a bagat si pe noi in a -3-a pagina pentru cautarea " iterfete evoluate". Asa ca sa pastram cat mai noua informatia pe site si blog. Nu se stie niciodata cand vom ajune pe pagina 2 sau poate chiar 1.
Provocarea SEO: Un site creat in Flash 100% , cu tot continutul si navigatia intr-un singur fisier Flash incarcat intr-o singura pagina HTML. (Daca site-ul este construit cu pagini HTML multiple in care sunt introduse componente Flash, atunci situatia este cu mult mai bune dpdv SEO.)
De ce reprezinta aceasta o problema? Un site numai cu Flash este un dezavantaj major pentru SEO. In primul rand, motoarele de cautare vor vedea intreg site-ul ca o singura pagina. Asta inseamna ca nu ai posibilitatea sa optimizezi diferite pagini pentru diferite cuvinte cheie. Si totodata nu vei avea avantajele SEO care decurg din existenta a mai multor pagini: orice pagina web unica are, din oficiu, un anume rang in candru motorului de cautare.
In al doilea rand, site-urile externe nu pot avea link-uri catre pagini din interiorul site-ului - sunt fortate sa aiba link-uri numai catre pagina principala. Sunt oameni de marketing care cred ca acest lucru e grozav: utilizatorii vor fi intotdeauna directionati catre pagina noastra principala. Dar vei pierde avantajul de a folosi "deep links" (link-uri interioare) care ar putea aduce mai multi utilizatori pe site si totodata imbunatati ranking-ul pe motorul de cautare. Pentru website-urile cu o componenta de shopping online, deep linking-ul este mult mai avantajos decat directionarea catre pagina principala, deoarece utilizatorul se poate pierde si se rateaza o posibila vanzare.
In ultimul rand, cu toate ca este adevarat faptul ca majoritatea motoarelor de cautare mari poate indexa Flash-ul, continutul pe care spider-ul motorului de cautare il poate extrage din fisierul Flash va semana foarte putin cu ceea ce utilizatorii vad pe site (vezi si postul Indexeaza Google Flash-ul?). De exemplu, sa consideram o animatie Flash simpla care arata o linie de text ce se misca de-a lungul eranului. utilizatorii umani o vor citi ca o singura linie de text, in schimb ce spider-ul o va vedea ca o serie de cuvinte care se repeta de sute de ori. Acesta este doar un exemplu despre cum optimizarea textului in Flash poate fi dificila.
Ce se poate face? Iata cateva strategii de impunatatire SEO al paginilor Flash:
Imparte site-ul in mai multe parti distincte. Ai putea sa-ti reconstruiesti site-ul, impartind fisierul Flash si mutand fiecare sectiune in propria pagina HTML. Din punct de vedere SEO, aceasta ar fi o impunatatire majora.
Foloseste URL-uri distincte. Chiar daca nu vrei sa imparti fisierul Flash in altele mai mici, tot poti sa obtii beneficiile care vin din a avea URL-uri separate pentru fiecare sectiune, folosind SWFAdress ca baietii destepti de la Blitz agency labs. blog-ul lor povesteste tot ce trebuie stiut, pana la detaliile amanuntite pe care le pot urmari doar pasionatii(nerds) de Flash :).
Concentreaza-te asupra factorilor off-page. Factorii "off-page", care nu au nici o legatura cu continutul de pe paginile site-ului, sunt o parte importanta din algoritmii de ranking folositi de motoarele de cautare. Fara a face nici o modificare site-ului tau poti impunatati ranking-ului convingand multe alte site-uri sa aiba link-uri catre site-ul tau. Textul de hyperlink pe care il folosesc celelalte site-uri cand fac lin catre site-ul tau va influenta ranking-ul tau pentru acel text. De exemplu, daca vrei sa ai un ranking bun atunci cand oamenii cauta "cea mai tare", atunci vei cere celorlalte site-uri sa faca link catre site-ul tau folosind textul: "Bianca este cea mai tare". :)
Foloseste avantajele oferite de optiunile de accesibilitate. Flash-ul poate fi setat cu optiuni de accesibilitate pentru a imbunatati experienta utilizatorilor cu disabilitati. Aceleasi optiuni pot imbunatati si vizibilitatea continutului site-ului pentru motorul de cautare. De exemplu, optiunile de accesibilitate in Flash 8 permit developer-ului sa specifice un Nume si o Descriere pentru orice element din Flash. Vezi Flash 8 Accessibility si articolul SWF Metadata in Flash 8.
Alternativa HTML. Expertii sunt de parere ca alternativa HTML este cea mai buna optiune pentru SEO pentru Flash. Realizand continut alternativ in format HTML este folositor nu doar pentru motoarele de cautare, dar si pentru utilizatrii fara plug-in de Flash in browser sau pentru persoanele cu disabilitati.
Google este capabil in prezent sa indexeze continutul text din interiorul Flash-ului. Poti sa downloadez Macromedia's Flash SDK pentru a extrage textul din flash si a vedea cum arata acesta pentru motorul de cautare. Poti verifica cum arata fisierele flash listate de Google realizand o cautare cu sintaxa: "filetype:swf". Adevarul este ca s-ar putea sa nu-ti placa ce vezi. :D
Ce se poate spune despre cazul in care content-ul se incarca dinamic in Flash dintr-un XML? Stim ca Google poate sa indexeze XML. Multi folosesc fisiere XML pentru a incarca content-ul Flash. Ai putea spera ca Google vede minunatul tau content in fisierul XML si ca urmare va lista fisierul Flash printre rezultatele cautarii; dar nu este asa sigur ca Google va directiona cautarea catre Flash si nu catre fisierul XML, lucru ce nu e tocmai prietenos pentru utilizatori. De ce sa nu faci o alternativa HTML-only la pagina cu Flash? Din moment ce ai deja XML-ul, ar fi destul de usor sa construiesti HTML-ul sau chiar un PDF cu acelasi continut.
Trebuie sa lamurim un aspect destul de important: nu ne dorim ca Google sa ne indexeze fisierele Flash, ci continutul acestora. Este foarte important pentru aceasta ca atunci cand faci dezvoltarea unui site folosind Flash sa muti tot continutul intr-un fisier XML sau intr-o baza de date (cum am mentionat si mai sus). Acest lucru ii permite motorului de cautare sa indexeze acest continut folosind metoda "dezvoltarii progresive". Aceasta metoda de web development (care merge mana in mana cu standardele web) spune ce vei incepe in construierea site-ului cu HTML-ul (continutul), vei adauga apoi CSS (aspect) si in final vei adauga lucruri ce tin de comportamentul site-ului, de functionalitate (avascript, Ajax, Flash si alte tipuri de interactivitate). Cea mai buna modalitate de a adauga Flash progresiv este prin folosirea Javascript, a unei functii gen SWFObject. Initial faci layout-ul paginii ca si cum nu ai folosi Flash si introduci in HTML continutul Flash-ului pe care il tii fie intr-o baza de date, fie in XML. Apoi folosesti SWFObject pentru a inlocui acest continut doar daca utilizatorul are activat in browser JS si plug-in-ul de Flash necesar. Iata un exemplu de cod:
<div id="flashcontent"> This text is replaced by the Flash movie. </div>
<script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699"); so.write("flashcontent"); </script>
Aceasta abordare face ca Google sa nu ia in considerare fisierele .swf si sa indexeze numai continutul HTML. Poti adauga link-uri catre alte pagini, imagini sau orice doresti sa fie indexat de Google. Si daca continutul tau este extras dintr-o baza de date controlata de un editor, paginile se vor updata automat si noul content va fi indexat fara sa fie necesara reincarcarea fisierelor swf.
- Aplicatiile ASP.NET sunt aplicatii server-side care randeaza HTML intr-o pagina web - Aplicatiile ASP.NET sunt create definind fisiere .aspx (cu fisiere .cs sau .vb asociate) si compilarea lor intr-un set de DLL-uri care ruleaza pe un server (care suporta ASP.NET) - Logica aplicatiei, layot-ul interfetei si comportamentul sunt definite pe server. - ASP.NET pune la dispozite o implementare default a HTML-ului si JavaScript-ului necesar pentru crearea interfetei - Componentele sunt executate cand un browser acceseaza serverul, output-ul fiind in forma de HTML/Javascript/CSS
- In ASP logica aplicatiei cat si layout-ul sunt stabilite si executate pe server, pe cand fisierele SWF se executa pe masina client. ASP.NET centralizeaza executia pe server. - GUI pentru ASP.NET e HTML generat de web forms. - ASP.NET poate comunica direct cu un database server, putand fi folosit la scrierea de web services. Flex nu poate fi folosit in acest scop, dar poate folosi datele dintr-un web service si afisarea lor.
Pe 22 octombrie a expirat enuntul temei 1 la IE. Enuntul ei suna cam asa: Sa se defineasca (folosind DTD) un format de fisier XML pentru descrierea profilului personal precum si al relatiilor sociale. Profilul personal ar trebui sa contina atat date de identificare personala cat si date despre studii, serviciu, etc. Datele despre relatiile sociale ar trebui sa refere alte profile si sa descrie tipul de relatie (prietenie, business, etc) Sa se creeze un fisier XML (corespunzator cu fisierul DTD creat) care sa descrie profilul personal al autorului temei.
Adobe Flex reprezinta un software development kit pe care l-am folosit la realizarea site-ului nostru. In continuare e o scurta descriere a acestui pachet:
Pentru programatorii de aplicatii traditionale, adaptarea la tehnicile de animatie propuse de platforma Flash a fost destul de grea. Aici intervine Flex: incearca sa minimizeze aceasta problema asigurand un workspace si un mediu de programare mai apropiat de dezvoltatorii de aplicatii. Flex a fost initial lansat ca o aplicatie J2EE sau librarie JSP care compila MXML si ActionScript in aplicatii Flash (fisiere binare .swf). Ultimele versiuni de Flex permit crearea de fisiere statice care pot fi uploadate fara necesitatea unui server de licentiere. Scopul Flex-ului e de a permite dezvoltatorilor sa realizeze cu usurinta rich Internet aplications. Pune la dispozitie o interfata grafica ce utilizeaza MXML (un limbaj bazat pe XML). Permite o multitudine de componente cum ar fi web services, remote objects, drag and drop, sortable colums, animatii build-in. Deoarece clientul se incarca o singura data, exista imbunatatiri semnificative fata de aplicatiile bazate pe HTML ( PHP, ASP, JSP, CFMX) care necesita executarea de template-uri pe server la fiecare actiune. Limbajul oferit de flex cauta sa detaseze logica aplicatiilor de design.
Flash este un software care incearca sa reconcilieze marea schisma existenta la ora actuala in lumea IT, intre developer-i care folosesc partea stanga a creierului (rationalul) si designer-i care folosesc partea dreapta (artisticul).
Daca ai un back-ground de programare hardcore in C++, Java sau alte limbaje de programare, vei gasi alinare in faptul ca Actionscript este un limbaj bazat pe ECMAScript (sau JavaScript). Daca ai un background artistic vei fi incantat sa afli ca Flash e cuprins in tool-uri care sunt foarte similare cu cele folosite in mod uzual in design, ca Fireworks, Photoshop, etc.
Daca nu apartii nici unei categorii din cele mentionate mai sus, e chiar si mai bine, pentru ca Flash este un software care va fi utilizat la maxim de o persoana care apartine ambelor lumi (programare si design). Flash reconciliaza dualitatea aceasta. Daca vor vrea sa fie eficienti, developerii nu vor avea incotro si vor folosi tool-urile pentru desen si vor invatata conceptele animatiei in Flash. Designerii vor trebui sa-si puna ma contributie si partea stanga a creierului pentru a prinde conceptele de baza ale programarii in Actionscript, daca vor vrea sa injecteze un pic de viata in graficele statice.
Flash este un software orientat pe obiecte. A lucra cu Flash inseamna a lucra cu obiecte. Un obiect in Flash este un container care poate include alte container-uri. Un timeline contine un movie clip care contine la randul lui alte timeline-uri si movie clips.. si asha mai departe, ca si papusile Matrioshka. Ceea ce numim un Falsh movie mai poate fi numit si Flash movie clip. Acesta este filmul principal (care poate fi vazut si ca Falsh player-ul) si contine toate celelalte movie clips. Fiecare film are un timeline principal si fiecare movie clip are propriul tmeline cu activitati independente date de proprietatile atribuite prin actionscript.
Actionscript este OOP. Prin urmare lucreaza cu: obiecte, instante, proprietati, metode. Movie clip-ul initial sta in biblioteca sub forma unui Obiect generic, care trebuie instantiat. Odata instantiat ii poti accesa proprietatile si metodele.
In exemplul urmator de Actionscript instanta de movie clip se numeste myMovieClip si _width este o proprietate a acesteia, gotoAndPlay() este o metoda apelata:
