Roundup #7 – PDF Sketch Sheets, Prism, CSS3Ps, Unfolding 3D Thumbinals, Deployd, blackCalculator

Roundup #7 - PDF Sketch Sheets, Prism, CSS3Ps, Unfolding 3D Thumbinals, blackCalculator

PDF Sketch Sheets

Quickly design awesome website wireframes and mockups on our Sneakpeekit Browser©. We provide a large sketch sheets collection with many different canvasses, grids and PSD grid templates. Any sketch sheet is a ready-to-print A4 PDF template. We have included PSD Photoshop grid templates too for quickly converting your sketch in a graphic mockup.

PDF Sketch Sheets For Creating Wireframes


Prism

Prism is a new lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.

Prism – A lightweight, extensible syntax highlighter


CSS3Ps

CSS3Ps – free cloud based Photoshop plugin that converts your layers to CSS3.

Convert Your Photoshop Layers into CSS3 Styles


Unfolding 3D Thumbinals

A 3D thumbnail view concept for image slideshows: the current image gets opened up and a thumbnail view unfolds in 3d.

UNFOLDING 3D THUMBNAILS CONCEPT


Deployd

Deployd is a platform that makes building complex backends simple. Build APIs for web and mobile apps in minutes instead of days. Unlike working with a traditional backend, there’s no boilerplate, or configuration. Deployd works right out of the box. The best part is that you can run it however and wherever you want – it’s free and open source.

Build APIs for web and mobile apps in minutes instead of days


blackCalculator

blackCalculator is a jQuery plugin for create a calculator. It supports CSS customization, easy translation, two options of calculators, cross-browser, allow and disallow keyboard!

blackCalculator – A customizable jQuery calculator


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

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

Roundup #4 – Metro UI CSS, Smart Time Ago, Royal Slider, BBSearch, MDMagick, Bootswatch, Document-Bootstrap, DownloadBuilder, Strapdown, FileDrop

Roundup #4 - Metro UI CSS, Smart Time Ago, Royal Slider, BBSearch, MDMagick, Document-Bootstrap, DownloadBuilder, Strapdown

Nazbierało się trochę tego przez ostatnie dwa dni. Staram się i tak wybierać tylko niektóre i co ciekawsze projekty, bo nie byłbym w stanie opisać tutaj wszystkiego. Zapraszam do lektury kolejnego Roundup.

Metro UI CSS

Framework Metro UI CSS, który stworzony został przez jednego z twórców interfejsu Metro dla nadchodzącego Windows 8. Jest to zbiór klas CSS i elementów UI, które pozwalają zbudować genialnie wyglądający interfejs w oparciu o Metro. Posiada wsparcie dla przeglądarek: IE 9+, Chrome, Opera, Safari oraz Firefox.

Metro UI CSS – A set of styles to create a site similar to the Windows 8 Metro UI


Smart Time Ago

Dodatek do jQuery, który wykorzystując znacznik <time> z  HTML5 i funkcję JavaScript do pokazania nam ilości minionego czasu od danej daty i godziny.

 <time class="timeago" datetime="2012-07-18T07:51:50Z">about 8 hours ago</time>

Smart Time Ago – A jQuery Plugin For Relative Timestamps


Royal Slider

Jedno z wielu narzędzi do pokazu slajdów. Zbudowane w oparciu o CSS3, HTML5 oraz samą bibliotekę jQuery. Potrafi obsłużyć praktycznie każdy element na stronie – od zwykłych obrazków, po treść w formie HTML i filmiki wideo. Oprócz tego, że Royal Slider jest bardzo rozbudowany i posiada bardzo dużo ciekawych opcji, to na dodatek prezentuje się bardzo efektownie. Poza tym – wykorzystuje technikę responsive, a więc Royal Slider może być użyty do budowy wersji mobilnych stron.

Royal Slider – A Powerful, Professional And Responsive jQuery Slider


BBSearch

Narzędzie zbudowane w oparciu o JavaScript. Powoduje zamianę elementu <input> na interaktywne pole do automatycznego wyszukiwania oraz zwracania wyników na bazie Backbone.

Współpracuje także z JSONP API, takimi jak Github, czy Twitter. Przykładowe wykorzystanie można zobaczyć na stronie autora.

$('#search-input-1').bbsearch({
  url: 'https://api.github.com/legacy/repos/search/#bbsearch-query#?callback=?&'
, itemTemplate: '<p>[@<%= owner %>] <a href="<%= url %>"><%= name %></a></p>'
, resultsElement: $('#results-1')
, parse: function(response) { return response.data.repositories; }
});

MDMagick

Bardzo proste i łatwe w integracji narzędzie, zbudowane przez tego samego autora, który stworzył wyżej wspomiane BBSearch. Pozwala na przekształcenie elementów takich jak <input>, czy <textarea> w interaktywny edytor WYSIWYG treści HTML w oparciu o Markdown, który znamy chociażby z Github’a.

$('.css-selector').mdmagick();

Autor na swojej stronie prezentuje przykładowe wykorzystanie MDMagick i muszę stwierdzić, że prezentuje się ono bardzo ciekawie.


Bootswatch

Katalog darmowych szablonów do Twitter Bootstrap. Możemy dzięki temu zaoszczędzić sporo czasu na tworzenie własnego wyglądu i skorzystać z już gotowej paczki. Całość prezentuje się naprawdę dobrze.


Document-Bootstrap

Kolejny ciekawy projekt, który wykorzystując JavaScript, bibliotekę jQuery i ponownie Twitter Bootstrap daje nam tak zwany Boilerplate do tworzenia prostych i przyjemnych dla oka stron, gdzie opisywać możemy swoje projekty. Jest to skierowane głównie do deweloperów, takich jak autorzy tych wszystkich projektów, które tutaj prezentuję. Pozwala im to zaoszczędzić sporo czasu na tworzeniu takich dokumentów od nowa. Jest to też alternatwa dla Github Pages.


DownloadBuilder

Projekt wykorzystujący HTML 5 File System API do łączenia wielu plików w jeden. Mam tutaj na myśli łączenie wielu plików CSS czy JavaScript. Wpiera także łączenie plików hostowanych bezpośrednio na Github’ie. Zapytania Ajax/JSONP trzymane są w cache przy użyciu sessionStorage.


Strapdown

Strapdown.js – Creating elegant Markdown documents couldn’t be simpler

To kolejny projekt wykorzystujący Markdown do budowania prostych stron do opisu projektów. Jest to bardzo podobne narzędzie do Document-Bootstrap i na dodatek wykorzystujące Bootswatch, które także wspomniane zostało wyżej.


FileDrop

Cross-Browser Drag ‘n’ Drop File Uploader: FileDrop

Bardzo „lekka” biblioteka JavaScript do tak zwanego Drag ‚n’ Drop jeśli chodzi o uploader plików w przeglądarce. Jak sam autor przyznaje – nie wymaga wsparcia żadnych frameworków JavaScript. Wspiera za to szereg przeglądarek: Firefox 3.6, Internet Explorer 6, Google Chrome 7, SRWare Iron 4, Apple Safari 5 and Opera 11.61.


[1], [2], [3]

WURFL – dodatkowa porcja informacji

WURFL Mobile Detection

W moim poprzednim wpisie – Detekcja mobilnej przeglądarki – zapomniałem wspomnieć o jednej z bibliotek – wręcz „kolosie”, który okazuje się być bardzo pomocnym na naszej mobilnej drodze. Dzięki Ci wielkie Artur, że przypomniałeś mi o niej w swoim komentarzu.

WURFL (Wireless Universal Resource FiLe) skupia się na wykrywania urządzeń mobilnych. Jest zbiorem własnych interfejsów programowania aplikacji (API) i plików konfiguracyjnych w formacie XML, który zawiera informacje o możliwości urządzenia i cechach różnych urządzeń przenośnych.  Do wersji 2.2, WURFL posiadał licencję „open source / public domain”. Od dnia 30 sierpnia 2011, ScientiaMobile WURFL API jest dostępny z licencją AGPL do niekomercyjnego użytku. Aktualna wersja samej bazy danych WURFL nie jest już dostępna na podstawie licencji „open source”.

WURFL pozwala na znacznie więcej niż tylko informacje na temat tego, z jaką przeglądarką mamy do czynienia i czy nie jest ona czasami uruchomiona na urządzeniu mobilnym. Dzięki tej bibliotece jesteśmy w stanie poznać wszystkie cechy oraz funkcje, które oferuje nam dane urządzenie (ściślej – zainstalowana przeglądarka).

WURFL wspiera i może być wykorzystywane przez poniższe technologie:

  • Java (WALL)
  • PHP (Tera-WURFL (database driven), New WURFL PHP API i WALL4PHP)
  • .NET Framework (Visual Basic / C# / .Net API)
  • Perl
  • Ruby
  • Python (Python Tools)
  • XSLT
  • C++
  • Apache Mobile Filter
  • PHP
  • Perl
  • Python
  • JavaScript
  • ActionScript 3 (Flash / Flex / AIR / ECMAScript)

By dowiedzieć się nieco więcej na temat tego co oferuje API WURFL, polecam udać się na oficjalną stronę, gdzie mamy dostępne wszystkie informacje.

Roundup #2 – Circle Hover, AuthManager, HTML5 File Upload, CSSComb, HubSearch, canvas-charts, Motown

Roundup #2Circle Hover

Serwis Codrops jak zawsze dostarcza nam ciekawych artykułów. Tym razem jest to tutorial o tym, jak stworzyć ciekawe efekty :hover w formie kółek z wykorzystaniem animacji CSS oraz przejść 3D w CSS3.


AuthManager - Open Source User Authentication & Management

AuthManager

Jest to bilbioteka Open Source dla PHP. W oparciu o bazę MySQL pozwala ona na autentykację oraz zarządzanie użytkownikami, wykorzystując przy tym możliwości jakie daje nam integracja z serwisami społecznościowymi, takimi jak Facebook. Jest to narzędzie bardzo podobne do innej biblioteki dla PHP, jaką jest HybridAuth.

  • Protect your content with just few lines of code.
  • Login via Facebook Connect.
  • Spam protection using reCAPTCHA.
  • Google Analytics integration.
  • User access logs.
  • Email Templates.
  • Translation ready. Can be translated in any language.

Create a HTML5 Drag & Drop File Uploader with jQuery

HTML5 File Upload

Kolejny tutorial. Serwis InsertHTML opublikował poradnik, który pokazuje nam jak za pomocą HTML5, jQuery i kilku linijek w PHP możemy zbudować upload plików wykorzystujący technikę Drag & Drop oraz Local Storage z HTML5.


Greatest tool for sorting CSS properties in specific order

CSSComb

Jestem pewien, że każda osoba, która związana jest z pisaniem styli w CSS doceni to narzędzie. W Internecie jest wiele podobnych, darmowych serwisów, które są w stanie uporządkować nieco nasz arkusz styli. Żaden jednak nie potrafi zrobić tego w określonym porządku i wedle określonych zasad, które sami jesteśmy stanie stworzyć. To podejście stara się zmienić serwis CSSComb, który pozwala na sortowanie i robienie porządku w naszym ‚styles.css’ wedle określonej kolejności, którą definiujemy w prosty sposób przed samym użyciem narzędzia.


HubSearch is a GitHub search interface built with Bootstrap, Underscore, jQuery

HubSearch

Jest to niezależny interfejs dla GitHuba zbudowany przy użyciu między innymi Backbone, Underscore i jQuery. Pozwala na przeszukiwanie repozytoriów pod kątem konkretnego języka i słów kluczowych.


canvas-charts

Biblioteka JavaScript, która – wykorzystując HTML5 Canvas API – pozwala na budowanie wykresów. Typy tworzonych grafów to nic innego jak dodatkowe pluginy, które możemy dołączyć do interfejsu renderowania w naszym kodzie.


Motown

Kolejna biblioteka, dająca tym razem możliwość tworzenia interfejsów opartych o Metro, które pojawi się nam jesienią razem z najnowszym Windows 8. Całość zbudowana została przy użyciu  HTML, CSS i JavaScript.


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