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