Tema 3 nu e chiar simpla :)
Read more...
Noutati despre interfete web si interfete evoluate
Motto-ul : "Simple is beautiful" exprima foarte clar si modul in care echipa IntelliWeb vede interfetele web. De aceea cei de la Jing m-au cucerit de prima data cand am descoperit tool-ul lor care face lucrurile mai complicate sa devina o joaca.
Stiu ca dupa titlu ca asteptati poate sa vorbesc despre sarbatorile care sunt pe buzele tututor, insa eu vreau sa sparg tiparele :) Asa ca , taa daaa, o sa va spun de ce mi-a placut acest programel de screen capture si screencasting.
Asa ca here we go :
Din pacate pentru colegii mei, nu am idei care sa fie legate in mod direct de interfetele web. Insa...
Astazi am avut niste probleme de layout intr-o aplicatie. Cautand pe net sa vad care-i problema, am dat peste o chestie interesanta, de care simt nevoia sa spun si altora.
Toata lumea stie ca browserele afiseaza in mod diferit aceeasi pagina. Motivul se datoreaza faptului ca fiecare browser are un motor diferit (afirmatie oarecum valabila deoarece exista motoare care se regasesc in mai multe browsere - ex. Gecko se gaseste in Firefox, Camino, Netscape si Thunderbird (stiu ca asta nu e browser)). Evident, fiecare motor e mai mult sau putin compliant cu standardele asa ca apar diferente.
Insa, ceea ce nu stiam este faptul ca exista un test care iti poate arata cat de compliant este un browser cu standardul CSS3. Pe scurt, va duceti la URL-ul: http://www.webstandards.org/files/acid2/test.html, si faceti testul.
Mai multe detalii gasiti aici: http://en.wikipedia.org/wiki/Acid2
Ionut
UPDATE: Cristi a semnalat printr-un comentariu faptul ca am facut o greseala in articol: ACID2 este pentru CSS2, nu CSS3... Mea culpa...
Am sa incep cu un disclaimer: acest post nu reprezinta o insiruire a unor idei personale. Mai degraba, am gasit niste lucruri pe net despre care consider ca ar putea fi utile si altor persoane, asa ca m-am gandit sa le public aici.
Azi am aflat ca a aparut un nou beta al browser-ului Firefox 3.1. Ca un programator curios, m-am dus si io pe site-ul lor ca sa vad ce lucruri noi aduce aceasta versiune. Printre chestiile insiruite se afla si informatii despre acesti "Web Workers". In fapt, un web worker este un "thread" (pun ghilimele deoarece notiunea de thread nu este neaparat identica cu ce se intelege prin thread intr-un sistem de operare) care executa cod Javascript.
In acest articol exista mai multe informatii despre partea cu Web Workers in Firefox 3.1. Partea cea mai interesanta o reprezinta acel cod Javascript a carui executie, chiar dureaza ceva timp...
Detalii suplimentare despre Web Workers gasiti pe site-ul: http://www.whatwg.org/specs/web-workers/current-work/
Ca observatie Web Worker-ii nu sunt specifici Firefox. http://www.whatwg.org/ sunt cei care se ocupa de intretinerea HTML.
Ionut
Orice interfata web ce ofera acces la o serie de servicii web precum (Yahoo, Gmail, SourceForge ... ) necesita o forma de autentificare. O posibila problema o reprezinta multimea de nume si parole ce trebuie retinute. Una dintre solutiile acestei probleme o reprezinta folosirea autentificarii de tipul Single Sign-on.
Conceptul din spatele Single Sign-on este destul de simplu: utilizatorul se inregistreaza la un Identity Provider ce apoi ofera verificarii identitatii pentru utilizatorul respectiv. In continuare, voi exemplifica procesul de autentificare pentru sistemul OpenID.
Un site ce necesita autentificare in mod normal afiseaza doua campuri text pentru introducerea numelui si a parolei, insa un site ce foloseste OpenID va afisa doar un camp text, pentru introducerea identificatorului OpenID. Dupa comletarea acestui camp si trimiterea spre validare a identificatorului, site-ul contacteaza site-ul OpenID (de exemplu myopenid.com) pentru a valida utilizatorul, in general prin introducerea unei parole. Dupa autentificarea utilizatorului pe pagina OpenID, site-ul care a cerut autentificarea va primi acces la un document XRDS (eXtensible Resource Descriptor Sequence) care este un format XML folosit pentru descoperirea de metadate despre resurse (in cazul nostru datele utilizatorului). In continuare, utilizatorul primeste acces la site-ul dorit.
Iata cum folosind un singur cont puteti accesa o multime de resurse. Printre site-urile ce ofera autentificare folosind OpenID se numara: Technorati, SourceForge, Yahoo, Google, chiar si blogspot.com ofera posibilitatea autentificarii cu un cont OpenID in vederea comentarii articolelor.
Voi ce solutii de Single Sign-on folositi?
Florin
Se pare ca in curand se va rezolva si problema cartilor digitale utilizand e-book reader-ele de tipul Sony Reader. In felul acesta vom avea acess mai usor la interfetele web ale site-urilor preferate sau la site-urile ce contin carti in format digital.
Ce este un e-book reader? Este un dispozitiv, similar cu un mp4 player, dar cu un display mai mare, capabil de a afisa carti in format digital. Pana aici, nimic deosebit.
Partea interesanta o reprezinta display-ul dispozitivului, care este electrophoretic. Practic, acest display nu are nevoie de o iluminare din spate deoarece reflecta lumina ambienta. Aceasta duce la renuntarea la reimprospatarea imaginii, ceea ce se traduce intr-o imagine mult mai relaxanta pentru ochiul uman ce poate fi citita chiar si afara in soare.
In ultima perioada, au aparut destul de multe astfel de dispozitive, cateva exemple fiind Sony Reader, Amazon Kindle, iRex iLiad si alte cateva.
Printre alte avantaje se numara durata mare de viata a bateriei, greutatea redusa a reader-ului, portabilitate foarte ridicata.
Un astfel de reader poate monitoriza feed-urile RSS si descarca stirile preferate, poate descarca reviste inainte de a aparea in format printat, poate afisa blog-urile preferate. Aceste functionalitati se gasesc in cadrul reader-ului Amazon Kindle care ofera printere altele si conectarea permanenta la Internet printr-o maniera asemanatoare cu cea a telefoanelor mobile, insa fara a fi necesara plata unui abonament.
Din pacate, tehnologia nu este inca suficient de matura, ceea ce se traduce printr-o slaba reproducere a culorilor (mai degraba dispozitivele afiseaza text alb-negru), imaginea seamana cu aceea a unui ziar de slaba calitate si nu se pot adauga efecte multimedia (meniuri, animatii, pointeri) datorita refresh-ului extrem de redus. Un alt "inconvenient" il reprezinta pretul, destul de mare, ~300$.
Sunt convis insa ca vor aparea readere din ce in ce mai performante. Un exemplu este Sony Reader, ajuns deja la a treia versiune (Sony Reader 700) ce include functionalitati precum ecran tactil, recunoasterea gesturilor, posibilitatea sublinierii pasajelor importante si altele...
Mai multe detalii despre display-urile electrophoretice si aplicatiile lor puteti gasi aici.
Florin
L-am descoperit pe Gliffy in incercarea de a realiza o diagrama de retea decenta. Fiindca nu am Visio instalat si imi doream sa termin repede cu pasul acesta am cautat pe Google si foarte repede am dat peste acest website.
La ce este util Gliffy? Este un software online pentru crearea de diagrame, si in urma primei experiente cu interfata lui - ce contine toate functionalizatile potrivite si care este usor de utilizat - am ramas cu o impresie foarte buna. Gliffy ofera toata gama de diagrame de la floorplan-uri, la diagrame UML, flowchart-rui, retele si interfete utilizator. In plus, varianta basic, este gratuita, nelimitata in timp si ofera acces la toate shape-urile pentru diagrame. Totusi nu poti avea decat 5 diagrame publice - ceea ce este un trade-off mai mult decat rezonabil daca planuiesti sa il utilizezi ocazional pentru proiecte personale.
In concluzie, il recomand pentru realizarea de diagrame rapid, usor si fara costuri. Nu-i asa ca e grozav cand gasesti un tool online care face toata treaba de care ai nevoie, te scuteste de instalat alt program mare si complicat, si mai este si gratuit pe deasupra?
Daca aveti vreun tip despre alte software-uri online la fel de utile si usor de utilizat, nu ezitati sa ne lasati un comentariu.
Am citit de curand despre una din acele descoperiri stiintifice care modifica tehnologia, asa cum o stim noi. Este vorba despre memristor.
Timp de aproape 170 de ani au existat trei dispozitive electronice fundamentale: capacitorul (descoperit in 1745), rezistorul (descoperit in 1827) si inductorul (descoperit in 1831). Problema era ca, cel putin la nivel teoretic, trebuia sa mai existe in un dispozitiv fundamental. Descoperit in 1971 de catre Leon Chua, profesor la University of California, Berkeley, acest dispozitiv teoretic nu a fost deloc apreciat. El trebuia sa creeze o legatura intre sarcina electrica ce trece prin el si fluxul magnetic generat.
A trebuit sa treaca aproape 30 de ani, pana in 1995 cand HP s-a hotarat sa porneasca un amplu proiect de cercetare cu scopul de descoperii cum poate fi realizat acest al patrulea dispozitiv. Dupa aproape 10 ani de cercetare, rezultate exceptionale au fost obtinute.
Practic, cercetatorii de la HP au reusit sa creeze un dispozitiv care se comporta ca o memorie nevolatila: memristorul. Dispozitivul isi modifica rezistenta electrica functie de sensul si valoarea curentului care trece prin el. Implicatiile sunt imense: mermristorii vor putea fi folositi pentru crearea de memorii nevolatile extrem de rapide (imaginati-va doar o memorie RAM foarte rapida, cu un consum foarte mic de energie electrica si care nu isi pierde continutul atunci cand nu mai este alimentata - vom putea porni si opri computerele instantaneu).
O alta aplicatie directa memristorilor o vor reprezenta emularea (nu simularea) sinapselor din creier. In stadiul actual, simularea creierului unui soarece necesita un computer de dimensiunea unui oras, iar cantitatea de energie ... (ar trebui cam doua centrale nucleare). Folosind memristori, aceasta s-ar putea face cu un dispozitiv de dimensiunea unui laptop.
Pentru emularea functionalitatii memristorilor este nevoie de un dispozitiv realizat cu 15 tranzistori si mai multe componente pasive. Avantajul folosirii memristorilor va fi imens. Oricum, tranzistorul a ramas aproape 30 de ani o curiozitate, pana a fost creata o aplicatie (aparatul auditiv) care sa il foloseasca si sa il popularizeze.
Mai multe informatii despre memristor, istoria sa si posibile aplicatii pot fi gasit pe site-ul revistei Spectrum.
Florin
E destul de greu sa gasesti o idee pentru un blog, insa, cateodata, ea este chiar sub ochii tai.
Toata lumea stie de motor de cautare Google. Multi stiu si de Google Analytics, care ofera posibilitatea de a analiza traficul. Insa putini stiu cum se leaga motorul de cautare de analizatorul de trafic.
In mod normal, un utilizator se duce pe site-ul unui motor de cautare, de exemplu, www.google.ro. Aici introduce un text, apasa butonul Search (sau Cauta), vede rezultatele, alege ce-i trebuie si da un click pe link-ul dorit. Gata. Asta-i tot ce se vede:Insa, in spate, existe cateva lucruri ascunse putin. In mod normal, "Interfete web" din screenshot-ul de mai sus ar trebui sa fie un simplu link HTML (<a href=...>...</a>). Insa nu e doar atata. Practic, fiecare element din pagina arata cam asa:
<a class=... onmousedown=... href=...><em>...</em></a>
Evident, partea cea mai interesant este reprezentata de codul executat cand se da click pe un link (atributul onmouseover al elementului HTML a). Acesta arata cam asa:
return clk(this.href,'','','res','166','')
Atributul href este cat se poate de simplu. In cazul de mai sus, el este un simplu link catre site-ul cautat:
http://www.interfete-evoluate.eu/index.php
Nu voi intra in detalii prea amanuntite despre ce face functia javascript clk (doar ca paranteza, parametrul '166' reprezinta locul efectiv in ierarhie). Insa voi arata doar rezultatul functie. Practic, atributul onmouseover permite scrierea unei functii care poate sa returneze un boolean sau nu. Daca functia nu returneaza un boolean, atunci, dupa ce se da click, se executa functia (sau codul), dupa care se executa continutul atributului href. Insa, daca functia returneaza un boolean, acesta indica daca se va continua cu analiza atributului href. Practic, daca functia intoarce false, atunci nu se face jump catre noul site.
Dar, foarte interesant, functia clk nu face decat sa incarce o poza (1x1, evident). :) Adica un element image/gif. Ce este si mai interesant este URL-ul de unde se ia aceasta poza. In cazul prezentat de mine mai sus, acesta este:
http://www.google-analytics.com/__utm.gif?utmwv=4.3&utmn=1104772560&utmhn=www.interfete-evoluate.eu&utmcs=ISO-8859-1&utmsr=1280x1024&utmsc=32-bit&utmul=en-us&utmje=1&utmfl=10.0%20r12&utmcn=1&utmdt=Interfete%20web&utmhid=1942208334&utmr=http://www.google.ro/search?num=100&hl=en&q=interfete+web&start=100&sa=N&filter=0&utmp=/index.php&utmac=UA-6192221-1&utmcc=__utma%3D37387768.3033006558281806300.1228290852.1228290852.1228290852.1%3B%2B__utmz%3D37387768.1228290852.1.1.utmcsr%3Dgoogle%7Cutmccn%3D(organic)%7Cutmcmd%3Dorganic%7Cutmctr%3Dinterfete%2520web%3B
Nu cred ca are rost sa mai intru in comentarii legate de componenta parametrilor apelului GET de mai sus. Banuiesc ca se vede cu ochiul liber faptul ca este indicat site-ul cautat, detaliile date la cautarea de pe Google s.a.m.d.
Ionut
Astazi m-am jucat cu optimizarea URL-urilor pentru un website facut in Joomla! . Mai precis, intentia era devenim prietenosi atat cu userii cat si cu motoarele de cautare folosin ceea ce se numeste SEF URLs - Saerch Engine Friendly URLs. Dupa ce am tot cautat explicatii si sfaturi despre cum sa folosesc fisierul .htaccess pentru a-mi atinge scopurile - si am gasit un tutorial bunicel aici m-am hotarat sa merg pe calea mai batatorita si sa incerc sa instalze o extensie pentru Joomla! care face munca aceasta mai usoara.
La prima vedere, OpenSEF parea sa fie alegerea cea mai buna. Totusi avea nevoie ca fisierul .htaccess sa fie modificat corespunzator, si nici asa nu am reusit sa scot ceva functional. Asa ca am mers mai departe si am incercat extensia sh404SEF care are avantajul ca functioneaza si fara fisierul .htaccess. In plus imediat dupa configurarea destul de intuitiva a interfetei noii componente, website-ul a devenit prietenos cu toata lumea afisand URL-uri bazate pe titlurile paginilor. Pentru ca perfectiunea este ceva greu de atins, inca nu am reusit sa scap de un index.php, intre baza URL-ului si sfarsitul prietenos. Dar sa zicem ca am facut un pas destul de mare catre imprietenirea cu utliziatorii si cu motoarele de cautare.
Care este experienta ta cu URL rewriting. Ai gasit un tutorial mai complet despre cum sa faci asta doar din .htaccess. Daca da, spune-ne si noua! Sau poate folosesti chiar Joomla!. Care este extensia castigatoare din punctul tau de vedere?
Cu siguranta ati auzit despre DNS, acel sistem distribuit care face posibila utilizarea internetului. Practic, DNS sau Domain Name System, este un sistem distribuit in intreg Internetul ce face posibila utilizarea de adrese "human readable", precum www.google.ro in loc de 64.233.183.99. Folosind DNS, adresele simbolice sunt transformate in adrese IP. DNS-ul utilizeaza protocolul UDP pentru transmiterea cererii si a raspunsului pentru aflarea unei anumite adrese.
Pana aici, totul este OK. Sau poate ca nu. Sa luam un exemplu banal de utilizare. Tastati in browser-ul preferat adresa www.google.ro si apasati enter. In scurt timp, browserul afiseaza continutul paginii cerute. Insa foarte multe lucuri s-au intamplat intre timp, unul dintre ele fiind afarea adresei IP a computerului pe care se afla pagina ceruta. Acest lucru s-a realizat prin intermediului DNS, astfel: browserul a trimis o cerere de rezolvare a adresei www.google.ro catre serverul DNS default. Daca serverul respectiv are adresa ceruta in cache, va returna adresa IP ceruta, altfel, va interoga si el la randul sau un alt server DNS iar aceasta secventa se va repeta pana cand unul dintre servere are informatia ceruta sau se ajunge la un server autoritar.
Problema poate aparea la unul dintre serverele intermediare. Daca printr-un mecanism obscur, serverul DNS este pacalit si ii este injectata o adresa IP falsa, atunci acesta va raspunde la cereri cu adresa respectiva. Acest lucru a fost descoperit de catre Kaminski in iulie anul acesta.
Care sunt implicatiile? Destul de mari. Daca un utilizator rau intentionat doreste sa redirecteze traficul de la google.ro catre goggle.ro atunci el va initia un atac Kaminski catre un server DNS preferat si in aproximativ 10 secunde serverul respectiv va fi compomis, daca nu se iau masuri de precautie.
O astfel de masura poate consta in configurarea serverelor DNS sa utilizeze un alt port pentru fiecare cerere, ceea ce ar micsora foarte mult sansele unui atacator de a injecta un raspuns fals. O alta masura ar putea fi utilizarea protocolului DNSSEC.
Serverul DNS pe care il folositi este securizat?
Florin