Zorzoane

..smart AND sexi ;)


Am dat şi eu de boala javascriptului întru împopoţonarea site-ului. Ca dovadă, nu m-am lăsat pâna nu am adăugat (trebuie sa aveti javascriptul activat)

• Alex


• Raluca


• Iulia


• Tudor

pe blog, asta pt că widgetul "noi suntem" din dreapta e chiar anost (Tudor, scuze, nu am avut poză cu tine).

Instructiuni: mouseover menu. Efectul e luat de pe http://www.phatfusion.net/imagemenu/index.htm.

Nu la fel de spectaculos, dar subliminal arătos, javascript-ul ştie să pună chenare, umbre frumoase şi spin pozelor. Fără pic de photoshop şi cu doar 23.6kB. Check out
http://www.netzgesta.de/instant/ .

Adăugăm şi puţină comunicare cu serverul, şi voila: http://imageflow.finnrudolph.de/ - o galerie de imagini extrem de sexi şi sofisticată.

Precautii: excesul de javascript poate dăuna interfeţei.

Obs: Daca nu apar niste poze care slideaza cand dai cu mousu' pe ele, e vina serverelor .dap, care gazduiesc niste javascripturi folosite in efect, dar care pica din cand in cand zilnic.

Sarbatori fericite!

Interfetele web inteligente va ureaza: Sarbatori fericite!
Va asteptam in noul an cu si mai multe articole interesante si utile despre lumea interfetelor web profesioniste!

Glossy rollover buttton

Salut!

M-am gandit ca daca vorbim despre interfete, ar fi interesant sa vedem si cum putem realiza cateva elemente grafice pentru acestea.

Programul cel mai popular si probabil si cel mai indicat pentru acest lucru este Adobe Photoshop. Insa si un utilizator al altui soft de procesare grafica destul de complex va putea urma pasii descrisi in continuare.

Si acum sa trecem la cazul concret. Vom realiza un buton glossy dragut in Adobe Photoshop si folosind si putin css va rezulta un rollover button grozav :).

Pentru realizarea butonului apelam la un tutorial foarte simplu pe care il gasiti aici : http://www.tutorialized.com/view/tutorial/Menu-Bar/38920

Iata rezultatul muncii mele :)








Iar folosind un tag style si si un div cu id-ul corespunzator in felul urmator, integram
butonul nou creat intr-o pagina web.

#home a{
overflow:hidden;
left:0px;
width:174px;
height:91px;
display:block;
background:transparent url(buton1.jpg) no-repeat;
}

#home a:hover {
background:transparent url(buton2.jpg) no-repeat;
}

Nu e Flash, e Flex

Adobe a lansat in 2004 FLEX, o colectie de tehnologii pentru dezvoltarea de interfete web care sa impresioneze ochiul navigatorului pe internet.

Ce face Flex in plus fata de vechiul Flash si Action Script?
Doar le uneste intr-un produs unic, usurand astfel munca dezvoltatorului de interfete.
Mai mult, pentru realizarea interfetelor, este utilizat un limbaj numit MXML, bazat pe XML, care este familiar programatorului traditional.

Sa facem deci primii pasi...
Intram pe site-ul de la Adobe http://www.adobe.com/products/flex/, luam SDK-ul si Flex Builder-ul, care este un IDE special pentru dezvoltarea de aplicatii Flex si Air, gratuit pentru studenti (modul de obtinere a acestei licente gratuite este insa putin mai complicat, asa ca vom folosi trial-ul). FlexBuilder este bazat pe eclipse, deci un nou plus in ceea ce priveste usurinta programatorilor de a lucra cu el.
Cream un nou proiect si observam ca ni se deschide fisierul MXML pentru editare.

Ne jucam putin.
Folosim drept container un panel:
< mx:Panel layout="horizontal" title="Buna Flex">
...

Adaugam butoane,
< mx:Button id="but" label="Click!">

un label,
< mx:Text id="label" text="Buna lume Flex!">
si ce ne mai trece prin cap.


Remarcam atributele folosite pentru butoane, care ne duc cu gandul la HTML.
Observam ca putem introduce atat cod asemanator cu CSS, cat si Script de tip Action Script, ceea ce ni se pare de asemenea foarte similar cu CSS-ul si JavaScript-ul folosite pana acum in dezvoltarea de interfete web.

Remarcam similitudinea modului de organizare a interfetei cu cea de la Java, sau Visual C:
se merge pe principiul de mai multe straturi, straturi reprezentate de containere, si pe existenta a mai multor layout-uri.

Daca utilizam Flex Builder, acesta are inclus un al doilea mod de a aranja usor elementele din interfata noastra, folosind Design View-ul. Aici avem lista de componente pe care le putem utiliza, care pot fi aranjate acolo unde dorim printr-un simplu drag 'n drop

Rulam aplicatia si ne minunam de cat de glossy arata.

Concluzia acestei prima intalniri?
Acum Flash-ul este mult mai la indemana programatorilor traditionalisti, poate mai putini atenti la asectul unei pagini.
Efectele ce se pot realiza sunt nelimitate, iar tindand cont de faptul ca acum Google a inceput sa indexeze fisierele SWF, putem sa renuntam putin la mult prea indragitul html&css&ajax, pentru a cerceta macar, ceea ce Flex poate face.

Pentru un imbold, check this out:
StumbleUpon

Primul meu mashup

Ce este un mashup?
Un site/o aplicatie web care combina date de la diverse surse web.
Integrarea datelor trebuie sa fie relativ usoara, rapida si este des realizata folosind API-uri puse la dispozitie de site-urile sursa.
Cele mai multe mashup-uri sunt cele ce folosesc Google maps, sau Yahoo Maps. Caci sa recunoastem, cate nu poti face cu o harta?;)

Supunandu-ma tendintei, am realizat un mic mashup folosind Yahoo Maps.
De ce Yahoo si nu Google? Pentru ca, cel putin momentan, Yahoo are bine integrata harta Romaniei.

Yahoo pune la dispozitie API pentru site-uri ce folosesc Ajax, Flex de la Adobe, precum si forme REST.
Am ales API-ul de tip Ajax, pentru ca imi este cel mai usor de utilizat.

Mashup-ul meu isi propune sa realizeze o harta personalizata a Bucurestiului. Concret, imi marchez locurile importante cu poze semnificative. In versiunea simplificata prezentata aici, locul insemnat este Gradina Cismigiu.

Pentru a folosi o harta Yahoo! trebuie sa lucram cu:
* obiectul/obiectele de tip harta
* locatia pe harta, mai exact latitudinea si longitudinea, care se pot obtine prin deiverse metode
* marcaje - o mica "bula" portocalie in care se poate introduce cod html; marcajele pot fi pozitionate oriunde pe harta
* ferestre inteligente - care pot fi atasate in diverse zone ale hartii si cu care se pot obtine efecte deosebite.
* evenimente

Ne suflecam manecile si in cateva miscari terminam:
1) Includem API-ul de la Yahoo, introducand urmatorul script in sectiunea head:
< type="text/javascript"> src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=YD-eQRpTl0_JX2E95l_xAFs5UwZUlNQhhn7lj1H">


2) Legam de evenimentul onload al ferestrei scriptul care afiseaza harta:
* Instantiem o noua harta.
var map = new YMap('map');

* Centram harta pe locul dorit, aici Bucuresti:
map.drawZoomAndCenter("Bucharest", 4);

* Realizam un marcaj pentru zona Cismigiu:
var point = new YGeoPoint(44.435434605825975, 26.090641021728516);
var marker = new YMarker(point);

* De evenimentul mouseClick al marcajului legam o functie care deschide o fereastra inteligenta, ce afiseaza o poza cu Cismigiu:
YEvent.Capture(marker,EventsList.MouseClick, function(o) { var markup = "< style="'position:relative;"> < style="'color:"> Cismigiu &ltimg src='cismigiu1.bmp' style='position:relative; width:130px; height:80px;'/> "; marker.openSmartWindow(markup); });

* Adaugam marcajul pe harta:
map.addOverlay(marker);

Si gata.
Dupa cum ne-am obisnuit deja, API-ul de la Yahoo este foarte usor de folosit.
De aici ramane doar sa il 'exploatam' pentru necesitatile noastre:)

Post Scriptum:
Un mashup care te ajuta sa compari Yahoo Maps, Google Maps si nu numai:
http://www.rockstarapps.com/samples/map-compare/
Aruncati o privire:)

Din ciclul "cum să"...

În episodul de azi, cum să rezolvi problema Wordpress "am ales opţiunea 'Protejaţi cu parola această pagină', însă, după primul acces la care s-a cerut parola, pagina se afişează direct".

O chestiune care m-a cam întristat la blogurile Wordpress a fost faptul că, deşi autorul are posibilitatea de a parola articolele sau paginile, cititorii vor constata că la al doilea acces pe pagina respectivă în decurs de zece zile, de la acelaşi calculator, pagina apare direct, fără nicio pretenţie. Doesn't seem that smart of an interface, does it?

Nu cunosc ratiunile poate logice pentru atat timp, dar ideea e că (doar) pentru ultima parolă introdusă în blogul respectiv, se creează un cookie ce rămâne în calculator 10 zile.

Tratamentul simptomatic pe care l-am găsit eu a fost să editez fişierul "wp-pass.php" din rădăcina wordpress prin modificarea numărului de secunde corespunzător perioadei cât va fi pastrat cookie-ul. So, linia

setcookie('wp-postpass_' . COOKIEHASH, $_POST['post_password'], time() + 864000, COOKIEPATH);

a devenit

setcookie('wp-postpass_' . COOKIEHASH, $_POST['post_password'], time() + 1, COOKIEPATH);

Noul numar de secunde e dupa necesitate.

Acu pare sa mearga.

Off-topic

Sunt singura care isi da ochii peste cap cand vede pe forumurile curs.cs postari la modul "da, deci as vrea si eu sa spun ceva despre tema, si anume intrati pe blogul nostru http://www.vreautraficinterfeteweb.blogspot.com/ pentru a afla ce" ?

Sa luam un exemplu:

Am vazut ca deja a inceput lumea sa anunte diferitele bug-uri aparute in
rezolvarea temei. Completez si eu acesta lista cu ceva observatii puse pe blog, http://interfeteweb4c.blogspot.com/

Felicitari! You scored! Inca un click, inca un link! Sa oferim cititorilor si un delicios preview din ce urmeaza sa afle de pe blog si nu se putea pe thread:

Pentru cei ce inca nu s-au apucat de tema si pentru cei ce nu au terminat,
enumerez cateva lucruri de luat in considerare:

Acu' de ce sa nu recunosc ca enumerezarea care urmeaza e chiar utila. E atat de utila incat va invit sa intrati pe http://interfetewebsmart.blogspot.com/ sa aflati cat. (Auto-linkurile astea se pun? :-s )

P.S.: Da, da, bine, stiu ca suntem in interiorul unei mici comunitati, a celor cu I.O.M., si incercam sa ne marketam si noi dupa putere micile noastre produse, dar...c'mmon..

Agenti Inteligenti in Internet (1)

Web-ul Semantic

Cu totii ne-am dori sa existe roboti care sa caute in Internet raspunsuri la intrebarile noastre. Sa presupunem ca vreti sa aflati cine este autorul fotografiei zilei de pe National Geographic. Nu ar fi deloc greu. Ati putea afla acest lucru in doar cateva secunde. Ati introduce adresa http://photography.nationalgeographic.com/photography/photo-of-the-day in browser si ati citi, imediat sub imagine, numele fotografului.

Cum am putea scrie un program care sa raspunda la aceeasi intrebare? Nu ar fi la fel de usor. In primul rand, acesta va trebui sa gaseasca adresa paginii pe care se afla fotografia si apoi sa inspecteze continutul sursei. Mai departe, lucrurile se complica. Programul trebuie sa fie capabil sa inteleaga limbajul natural, cautand cuvinte care ar putea sa se refere la autorul fotografiei ("author", "photographer", "photograph by"). Mai mult, repetarea unor astfel de cuvinte cheie in sursa paginii ar complica si mai mult sarcina agentului.

Astfel de programe sunt greu de scris, Web-ul fiind gandit pentru utilizarea lui de catre om, si nu de catre masini.

Ca in majoritatea task-urilor din programare, problema se poate simplifica foarte mult prin utilizarea unor structuri de date potrivite. Daca, in afara textului propriu-zis, site-urile ar avea specificatii formale referitoare la continut, astfel de probleme ar deveni triviale.

Ar fi extrem de usor de extras automat informatia dintr-un XML care ar arata cam asa:

<site name="National Geographic">

<page name="Photo Of The Day">

...

<photographer>John Stanmeyer</photographer>

...

</page>

</site>

Mai mult, daca toate site-urile care au o sectiune "Photo Of The Day" ar avea un XML similar, programul ar putea cauta raspunsul la aceeasi intrebare pentru toate acestea.

Web-ul Semantic ar putea fi noul context ce ar face aceste lucruri posibile.

Reprezentarea Cunostintelor si Motoare de Inferenta

O aplicatie din inteligenta artificiala are la baza doua concepte: reprezentarea cunostintelor si motorul de inferenta. Primul descrie semantica folosita pentru descrierea cunostintelor din domeniul aplicatiei, iar cel de-al doilea utilizeaza aceste cunostinte pentru a raspunde la intrebari. Cu cat reprezentarea cunostintelor este mai clara si mai consistenta si motorul de inferenta devine din ce in ce mai simplu.

Web-ul semantic isi propune standardizarea intr-un mod flexibil si extensibil a reprezentarii informatiei in Internet. Acest lucru deschide orizontul unei noi generatii de aplicatii Web.

Tehnologii folosite in Web-ul semantic

XML-ul este tehnologia de baza. Acesta permite adnotarea documentelor stocate electronic, fiind totodata extensibil (spre deosebire de HTML).

RDF-ul (Resource Description Framework) foloseste o metoda traditionala de reprezentare a cunostintelor: tripletele obiect-atribut-valoare. De exemplu:

automobil:culoare:verde

automobil:roti:4

Se foloseste mai des descrierea tripletelor ca fiind: subiect-predicat-obiect (in exemplu automobilul este subiectul, culoarea este predicatul, iar verde este obiectul).

De exemplu, o descriere in RDF a paginii de pe National Geographic ar fi:

<rdf:Description rdf:ID="National Geographic Photo Of The Day">

<photo:title>Drying Mud</photo:title>

<photo:location>Sidoarjo, East Java, Indonesia</photo:location>

<photo:author>John Stanmeyer</photo:author>

</rdf:Description>

Pentru standardizarea predicatelor folosite in documetele RDF, exista tehnologia RDF Schema. Aceste documente (RDFS) definesc limbajul de reprezentare a cunostintelor in RDF.

Un astfel de set de definitii este The Dublin Core.

Ceea ce nu se poate descrie direct prin RDF, relationarea intre predicate, poate fi realizat folosind OWL (Web Ontology Language).

Conceptele care stau la baza RDF si OWL vin din domeniul logicii. Sunt evidente asemanarile dintre relatiile si predicatele discutate mai sus si principiile de la care au plecat bazele de date relationale, respectiv limbajele de programare logica. Astfel RDF si OWL pot fi tehnologiile care sa "lipeasca" informatiile de pe site-uri cu baze de date si limbaje de programare logica folosite pentru crearea agentilor inteligenti pentru Web.

OWL face posibile inferentele bazate pe asocieri reprezentate in modele prin relationare. Exista motoare de inferenta ce pot opera cu tehnologiile web-ului semantic descrise mai sus, printre care:

Jena Reasoner - framework open-source Java dezvoltat de cei de la HP Labs

Jess - scris la Carnegie Melon University, face posibila dezvoltarea de software Java care sa poata rationa utilizand cunostinte reprezentate prin reguli declarative

SWI-Prolog Semantic Web Library - limbaj Prolog care permite dezvoltarea aplicatiilor cu OWL si RDF, cat si un sistem pentru rationare

FaCT++ - reimplementare FaCT care suporta OWL.

Mai multe despre aceste unelte, incepand cu postul urmator.

Probleme cu EasyPHP?

Am avut de curand 'ocazia' sa ma lovesc de faptul ca EasyPHP nu functioneaza asa de usor cum ii spune numele.
Concret, am intampinat probleme in incercarea de a configura serverul Apache.
Daca v-a dat si voua dureri de cap acest programel, la mine solutia a fost wampserv, o aplicatie care, spre surprinderea mea, este si franceza si functionala in acelasi timp.

Variabilele de mediu din JavaScript

Netscape, IE, Google Chrome, rezolutie mare pentru Desktop-uri, rezolutie mica pentru PDA-uri... trebuie sa tinem cont de toate atunci cand cream o interfata web.
Dar cum putem obtine aceste informatii?
JavaScript pune la dispozitie posibilitatea accesarii unor variabile de mediu care ne-ar putea ajuta in detectia browser-ului, rezolutiei si nu numai.
Astfel,
pentru aflarea tipului / versiunii de browser - folosim variabila navigator
<html>
<body>
<script type="text/javascript">
document.write('<hr />');
document.write('Browser >>'+ navigator.appName);
document.write('<br/>');
document.write('Versiunea >>'+navigator.appVersion);
</script>
</body>
</html>

,iar pentru aflarea rezolutiei - folosim variabila screen
<html>
<body>
<script type="text/javascript">
document.write('Rezolutie >>' + screen.width + 'x' + screen.height)
</script>
</body>
</html>

Simplu, nu? Dar in aceasta era a 'razboiului rece' dintre browserele web, variabilele navigator si screen se dovedesc a fi foarte utile in realizarea
unei interfete ce nu are culoare 'browsereasca'.

Interfetele evoluate ale cartilor

Un aspect din ce in ce mai intalnit in ultimii ani este aparitia cartilor virtuale. Eu unul m-am intalnit cu acest concept incepand cu literatura de specialitate, fiind destul de populare variantele electronice ale cartilor de IT. Insa lucrurile nu se mai opresc de mult timp la bibliile de C sau C++.


Un pas important a fost facut de Google, cand a introdus Google Books. Probabil ati auzit de aceasta initiativa si stiti mai mult sau mai putin despre proiect. Ei bine, corporatia a oferit o alternativa virtuala banalelor si demodatelor biblioteci ( a se citi observandu-se ironia evidenta) si ne da ocazia sa rasfoim mii de volume online.

Ne putem bucura de toate avantajele unor versiuni electronice, cum ar fi o cautare in carti dupa keywords , pasaje populare, o descriere scurta a cartilor, reviewuri, facilitati pentru a gasi cartea intr-o biblioteca aproape de utilizator samd.

Singura mica problema ar fi legile de copyright. Google nu a cumparat drepturile in totalitate pentur majoritatea cartilor,lucru ce se aplica mai ales la cartile noi. Ce se intampla de fapt, este ca putem face un preview al cartii, sa citim un numar limitat de pagini. Apoi suntem indrumati politicos catre un site de unde am putea cumpara cartea.

Interfata site-ului este una specifica google. Simpla si intuitiva, fara briz-brizuri. Cu toate ca nu sunt un fan al cititului la calculator, in caz de nevoie ( fie ca este o nevoie de documentare stiintifica sau una emotionala, utilizatorul neputandu-si stapani dorinta de a citi pasajul preferat din cartea preferata) se poate apela la Google Books. Initiativa trebuie salutata, deoarece aduce un mare plus de informatie pretioasa pe web.

BOSS-ul de la Yahoo!

..nu, nu este vorba despre CEO, ci despre serviciul de căutare personalizată oferit gratuit entuziaştilor searchurilor de către Yahoo!.

Build your Own Search Service ne ajută, asadar, să creăm motoare de căutare după pofta inimii. Că tot vorbim de pofte, este deja celebru :) http://www.v3ggie.com/, un produs BOSS menit să facă viaţa vegetarienilor mult mai uşoară, punându-le acestora pe tavă de la adrese ale restaurantelor de profil pâna la reţete delicioase fără ingrediente care cândva au avut faţă. Eu însa voi propune un exemplu mult mai digerabil, mai la îndemână şi mai simplu: site-search-ul.

Cei care doresc un site-search nu trebuie acum decât scrie un minuscul php.

Se începe cu un appid (application id), pe care îl obţii de la http://developer.yahoo.com/search/boss/.
În principiu, rezultatele căutarii sunt înscrise într-un xml (sau json, în funcţie de formatul preferat), pe care îl primeşti de la url-ul format astfel:

http://boss.yahooapis.com/ysearch/web/v1/ +
ce cauţi +
site-ul pe care cauţi +
paramterii 'appid' şi 'format'

Odată obţinut xml-ul - să zicem, extragi elementele care te interesează şi le afişezi. În php există pentru asta SimpleXMLElement. Mai precis:

$query = 'ceva';
$Appid = [appid-ul tau];
$Site="+site:www.siteultau.ro";
$results = new SimpleXMLElement('http://boss.yahooapis.com/ysearch/web/v1/'.$query.$Site.'?appid='.$Appid.'&format=xml',NULL,TRUE);

Iterezi, apoi, prin rezultate cu:

foreach ($results->resultset_web->result as $result)

şi poate ai nevoie de:

$result->clickurl
$result->title
$result->abstract
$result->dispurl.

Un exemplu complet pentru download pe Interfete Web Smart.

In concluzie, BOSS-ul nu va găsi chiar the purpose of meaning, dar este un tool util în materie de search.

Căutare placută!

CSS Specificity

Incepem cu esentialul:

De ce este importanta specificitatea in CSS?

Pentru ca proprietatile unui element html care vor fi luate in considerare vor fi acelea care au specificitatea cea mai mare.

De exemplu, avand acest code html :

<div id="principal">

<p>Interfete web in actiune!</p>

</div>

si css-ul asociat:

p{color: red} /*proprietate A*/

#principal p{color: green} /*proprietate B*/

culoarea paragrafului va fi cea verde, intrucat aceasta este cea mai specifica.

Concret, specificitatea se poate calcula astfel:

Fiecare selector se situeaza pe unul dintre aceste 4 nivele:

(1) Stiluri imbricate in codul html

de exemplu <p style="color: red;">

(2) Identificatori

de exemplu #principal

(3) Clase, atribute sau pseudo-clase

de exemplu .clasa, [atribut], :hover

(4) Elemente si pseudo-elemente

de exemplu p, :before

Putem asocia unui element X urmatoarea formula:

specificitate(X) = 1000*(1) + 100*(2) + 10*(3) + (4),

unde (niv) = numarul de selectori de pe nivelul niv.

In cazul nostru,

specificitate(proprietate A) = 1000*0 + 100*0 + 10*0 + 1 = 1,

specificitate(proprietate B) = 1000*0 + 100*1 + 10*0 + 1 = 101,

ceea ce inseamna ca a doua regula este cea mai specifica, deci ea va fi luata in considerare.

In cazul in care exista 2 proprietati cu aceiasi specificitate, va fi luata in considerare ultima propritate.

Si de ce este asa de utila specificitatea?

Poate nu se observa imediat importanta acestui mecanism, dar privind inapoi, prin analogie, este aceeasi diferenta ca intre limbajele de programare moderne si cele de la inceputuri.

Mecanismul specificitatii devine foarte comod pentru modularizarea si reutilizarea codului, iar interfata are de castigat in claritate si performanta.

3, 2, 1 ... Start!

Noi, adica Iulia, Raluca, Alex si Tudor, va uram bun venit pe blogul nostru, unde vom "diseca" interfetele web, punandu-va la curent cu tehnologiile si tendintele de succes din acest domeniu.
Pentru a ne cunoaste mai bine, vizitati-ne pe site-ul oficial al firmei noastre - www.interfetewebsmart.dap.ro