Roundup #5 – Responsive Google Map, Speakke, 3D jQuery Image Slider, Wordsmith, Peerbind, MobileCartly

Roundup #5 - Responsive Google Map, Speakke, 3D jQuery Image Slider

Responsive Google Map

Responsywne mapy od Google, przygotowane dla ekranu Retina w najnowszym iPadzie 3, to tutorial od serwisu Webdesigntuts+. Wykorzystując możliwości HTML5 i CSS3 jesteśmy w stanie stworzyć świetnie wyglądające mapy i zaprezentować je na naszej stronie. Niezwykle przydatna rzecz dla stron mobilnych, budowanych w oparciu o responsive design. Dodatkowo – dzięki meta tagom w nagłówku naszego dokumentu HTML5 dostajemy także wsparcie dla ekranów Retina.

Responsive, Retinafied Google Maps Images


Speakke

To naprawdę świetnie wyglądający player audio. Po raz kolejny wykorzystano tutaj możliwości HTML5, a pewnie będzie tak tylko częściej, w związku, że od wczoraj Flash nie jest już wspierany na platformie Android (Huraa!). Trochę CSS, kilka linii JavaScript i trochę własnych ustawień i możemy osadzić na swojej stronie pełnoprawny odtwarzacz plików audio. Poza tym – wsparcie dla wielu przeglądarek, możliwość tworzenia playlist oraz integracji z  Last.fm. Chcecie czegoś więcej?

Speakker: A Crossbrowser Audio Solution with HTML5


3D jQuery Image Slider

No i mamy kolejny ciekawy tutorial od serwisu Codrops. Tym razem jest to trzyczęściowy panel 3D, na którym prezentować możemy nasze obrazki, a zarazem osadzić możliwość ich przewijania. Całość prezentuje się bardzo efektownie. Zresztą – nie spotkałem jeszcze się na tym serwisie ze słabej jakości treścią. Myślę, że takie rozwiązanie przyda się grafikom oraz ludziom chcącym urozmaicić jakoś swoje portfolio, a może nawet i CV. Skorzystalibyście z takiego rozwiązania?

TRIPLE PANEL IMAGE SLIDER


Wordsmith

Biblioteka jQuery, która pozwala tagować słowa na naszej stronie i pobierać ich definicje z zewnętrznego serwera. Całość prosta i intuicyjna w obsłudze. Demo rozwiązania zaprezentował sam autor na swojej stronie.


Peerbind

To kolejny projekt wykorzystujący bibliotekę jQuery. Pozwala na przypisywanie zdarzeń konkretnym elementom lub strukturom na naszej stronie. Obsługuje zdarzenia już wbudowane, ale pozwala tworzyć także własne oraz definiować sposób ich działania. Demonstrację działania oraz dokumentację znaleźć można na stronie oficjalnej.

Peerbind: Share Events with All Visitors on Same Page


MobileCartly

Jest to projekt e-Commerce mający umożliwić sprzedaż naszych produktów na urządzeniach mobilnych, na platformach takich jak iPhone, Android, Blackberry, czy Windows Mobile. Jako źródło danych przyjmuje dokumenty CSV, więc dane możemy budować przy pomocy zwykłego Open Office, czy Google Docs.

Open Source Mobile E-Commerce App: MobileCartly


[1], [2], [3], [4]

Notyfikacje PUSH dla urządzeń z Androidem w PHP – GCM

Google Cloud Messaging for Android

Google Cloud Messaging to usługa uruchomiona przez Google niecały miesiąc temu (wcześniej C2DM). Pozwala ona na wysyłanie powiadomień PUSH na urządzenia z Androidem bezpośrednio z serwera obsługującego aplikację mobilną. Takie rozwiązanie posiadają wszystkie największe platformy – iOS, Windows Phone 7, Blackberry, a sama platforma Android praktycznie od samego początku swojego istnienia. Jednak to urządzenia od Apple cieszą się większą popularnością takiej usługi. Google postanowiło to zmienić i zbudowało od nowa całą usługę, tak by ułatwić deweloperom implementację w swoich projektach, a także obsługę takich notyfikacji po stronie serwera aplikacji. Jako, że w pracy przymierzam się do zadania stworzenia ogólnodostępnego API REST na wiele platform mobilnych, postanowiłem, że zacznę od napisania prostej klasy w PHP, która obsługuje właśnie GCM do Google.

Cała dokumentacja usługi od Google dostępna jest na stronie oficjalnej i nie ma sensu tutaj przytaczać tego co bardzo dobrze opisano właśnie tam. Bibliotekę JAR dla Javy mamy dostępną “od ręki” i możemy wykorzystać ją w swoim projekcie, ale z PHP nie jest już tak wesoło i sami musimy podjąć się implementacji GCM po swojej stronie.

Do napisania poniżej klasy posłużyłem się biblioteką Buzz, która jest niczym więcej jak oprogramowanym cURL’em.

<?php

namespace Service\Gcm;

use Buzz\Browser;
use Buzz\Client\MultiCurl;

class Gcm
{
    /**
     * @var string
     */
    protected $apiUrl = 'https://android.googleapis.com/gcm/send';

    /**
     * @var string
     */
    protected $apiKey;

    /**
     * @var string
     */
    protected $registrationIdMaxCount = 1000;

    /**
     * @var \Buzz\Browser
     */
    protected $browser;

    /**
     * @var array
     */
    protected $responses;

    /**
     * Class constructor
     *
     * @param $apiKey
     * @param null $baseUrl
     */
    public function __construct($apiKey, $apiUrl = null)
    {
        $this->apiKey = $apiKey;

        if ($apiUrl) {
            $this->apiUrl = $apiUrl;
        }

        $this->browser = new Browser(new MultiCurl());
    }

    /**
     * Sends the data to the given registration ID's via the GCM server
     *
     * @param mixed $data
     * @param array $registrationIds
     * @param array $options to add along with message, such as collapse_key, time_to_live, delay_while_idle
     * @return bool
     */
    public function send($data, array $registrationIds, array $options = array())
    {
        $headers = array(
            'Authorization: key='.$this->apiKey,
            'Content-Type: application/json'
        );

        $data = array_merge($options, array(
            'data' => $data,
        ));

        // Chunk number of registration ID's according to the maximum allowed by GCM
        $chunks = array_chunk($registrationIds, $this->registrationIdMaxCount);

        // Perform the calls (in parallel)
        $this->responses = array();
        foreach ($chunks as $registrationIds) {
            $data['registration_ids'] = $registrationIds;
            $this->responses[] = $this->browser->post($this->apiUrl, $headers, json_encode($data));
        }
        $this->browser->getClient()->flush();

        // Determine success
        foreach ($this->responses as $response) {
            $message = json_decode($response->getContent());
            if ($message === null || $message->success == 0 || $message->failure > 0) {
                return false;
            }
        }

        return true;
    }

    /**
     * @return array
     */
    public function getResponses()
    {
        return $this->responses;
    }
}

Prawda, że nie wygląda to skomplikowanie? Jest to tak naprawdę klasa-interfejs, do użycia w naszym kodzie, gdzie z bazy danych będziemy mogli pobrać zapisanie urządzenia oraz wysłać im przygotowane powiadomienia. Brakuje tutaj obsługi błędów, ale to dopiero przede mną :)

Tłumaczenie ze zdjęć w nowym Google Translate na Androida!

Google Translate AndroidTłumacz Google (Google Translate) jest to serwis internetowy Google umożliwiający tłumaczenie tekstów, plików tekstowych oraz całych stron internetowych na różne języki. W przypadku wpisania tekstu, serwis tłumaczy go w czasie rzeczywistym (bez potrzeby klikania w przycisk “tłumacz”). Po wpisaniu w okienko translatora pojedynczego słowa działa on jak słownik – podając zwykle kilka lub kilkanaście propozycji tłumaczenia.

W najnowszej wersji Google Translate dodano nową opcję, jaką jest tłumaczenie ze zrobionego za pomocą mobilnego urządzenia zdjęcia. Wystarczy, że w aplikacji wybierzemy opcję robienia zdjęcia i dokonamy tego, fotografując zdanie, dokument, okładkę itp. Następnie, na zrobionym zdjęciu zaznaczamy palcem, który fragment chcemy aby aplikacja dla nas przetłumaczyła i.. gotowe!

Google Translate Image Example

Z pewnością takie rozwiązanie jest znacznie szybsze niż tradycyjne przepisywanie tekstu ręcznie, a na pewno niezbędne dla osób podróżujących chociażby do krajów, gdzie alfabetem są tzw. “krzaczki”. Mam tutaj na myśli kraje takie jak Chiny, Japonia itp.

Co myślicie o takim rozwiązaniu? Mi, nowa funkcja bardzo się podoba i zachęcam do aktualizowania swoich aplikacji na urządzeniach z Androidem.