Egy éve megjelent tanulmány alapján csináltam egy google boríték készítő oldalt. Az ötlet jó, érdemes megnézni.
A mutatvány
Nemrég megjelent egy tanulmány arról, milyen lenne ha a Gmail tartalmazna egy funkciót aminek segítségével olyan borítékot nyomtathatnánk, ami sokakat megmosolyogtatna ötletességével, és egy kis színt vinne a boríték egyhangú fehérségébe.
Látogassatok el az oldalra, próbáljátok ki, majd olvassátok tovább, ha érdekel hogyan készült.
Ha jobboldalt kitöltitek a feladó és címzett városát, már meg is nézhetitek milyen lesz a boríték. 4 fajtából lehet választani, az első három szabvány méret, a negyediket csak úgy heccből csináltam.
Úgy hallottam Németországban vagy Ausztriában működik egy posta, ahol direkt ilyeneket készítenek, persze sokkal szebben.
Egy kis technika
Először javascript segítségével próbáltam trükközni, hátha meg tudom oldani hogy a két város arra a helyre biztosan ne kerüljön, ahova a feladó és címzett lesz kiírva. Sajnos ezt nem sikerült kibűvészkedni, ezért egy egyszerűbb megoldást választottam: a Google Maps API-t használva egy statikus képet kérek le.
1. | <img class="envelope_map" src="http://maps.google.com/maps/api/staticmap?size=<?php echo $data['Envelope']['map_size']; ?>&markers=icon:http://67developer.hu/img/envelopes/pre_mail.png|<?php echo $data['Envelope']['recipient_city']?>+<?php echo $data['Envelope']['recipient_street']?>&markers=icon:http://67developer.hu/img/envelopes/email.png|<?php echo $data['Envelope']['sender_city']?>+<?php echo $data['Envelope']['sender_street']?>&sensor=false" /> |
A következő paramétereket adom át:
- Google térkép mérete:
size=600x200 - Címzettet jelölő ikon:
markers=icon:http://67developer.hu/img/envelopes/pre_mail.png - Címzett címe: Veszprém
- Feladó ikonja: markers=icon:http://67developer.hu/img/envelopes/email.png
- Feladó címe: Dunaszekcső
Ennyi az egész, a többi már történelem sima css. Ha lesz még időm kísérletezgetni vele, előbb utóbb rájövök hogyan lehet egy használhatót előállítani, addig nézegetni ez is megteszi.
Összegzés
Az oldal kódját sajnos nem tudom odaadni, mivel cakephp keretrendszeren belül van, viszont az első kódot fel töltöm róla, ami anno össze lett barkácsolva. A kód nem a legszebb, de működik, és van aki talán ebből is tanul valamit.