• en
  • pl

Technologia

wordpreslogo
WordPress – jak to ugryźć

Wbrew obiegowej opinii, istnieje wiele sposobów na WordPress’a.

Żeby było ciekawiej – wszystkie (lub duża część z nich), o ile zrealizowane spójnie i zgodnie ze sztuką – są poprawne. Dlaczego więc tak częste są przypadki, gdy klient, po otrzymaniu zamówionego produktu, nie jest zadowolony? Zawodzi, jak zwykle, komunikacja.

Potrzeby a ich realizacja

O ile wykonanie samej strony w oparciu o WordPress’a nie znajduje się na liście najtrudniejszych zadań stawianych przed programistami (i projektantami), o tyle wstrzelenie się dokładnie w potrzeby klienta, a później jeszcze w potrzeby jego klientów jest już zadaniem niełatwym. Stąd właśnie Ci którzy potrafią zrobić to za każdym razem dobrze, są tak poszukiwanymi wykonawcami, a ich stawki mogą czasem szokować.

Ilu programistów, tyle „najlepszych” rozwiązań

Czy istnieje zatem prosty przepis na poprawną realizację strony w oparciu o ten CMS, czy niestety trzeba odwoływać się do intuicji, zaufania, czy wręcz – szczęścia? Zapewne w dużym stopniu – tak. Na szczęście możemy zminimalizować ryzyko, przede wszystkim zdobywając trochę tak potrzebnej wiedzy, która pozwoli nam ocenić proponowane rozwiązanie.

Wśród najpopularniejszych metod na podejście do tematu, można znaleźć:


Szablon robiony pod wymiar,
treść oparta o ACF (Advanced Custom Fields)


Plusy

  • Zrobiony prawidłowo szablon z odpowiednią, nawet wstępną optymalizacją, będzie wyraźnie szybszy,
  • Pełna dowolność co do łączenia i ładowania plików zewnętrznych – css i js, dzięki czemu możemy oszczędzić nawet kilka sekund przy ładowaniu strony,
  • Treść odporna na nieprawidłowe zmiany,
  • Dowolny wygląd w oparciu o własny projekt graficzny,
  • Edycja treści całkowicie odseparowana od projektu graficznego,
  • Zmiany treści nie wymagają żadnej wiedzy czy doświadczenia z HTML/CSS.

Minusy

  • Możliwość edycji wyłącznie treści, które zostały założone jako edytowalne na etapie programowania,
  • Projekt graficzny zazwyczaj nie jest modyfikowalny w prosty i wygodny sposób,
  • Ewentualne większe modyfikacje z poziomu CSS raczej nie bedą współgrały ze stworzonym szablonem.

Kiedy takie podejście jest zalecane

  • Gdy dysponujemy stałym wsparciem programistów budujących to rozwiązanie,
  • Gdy wprowadzanie treści odbywa się często i jest wykonywane przez ludzi nieobeznanych nawet w podstawowym stopniu z budową i sposobem działania strony www.


Podstawowa instalacja WordPress,
wraz z edycją treści poprzez edytor blokowy,
WP Bakery Page Builder, Elementor, Divi


Plusy

  • Duża elastyczność treści, niezależnie od dostępności programistów,
  • Nie ma konieczności opierania się na przygotowanym wcześniej projekcie graficznym,
  • Rozwiązanie można łączyć z innymi, jako podstawowe lub uzupełniające,

Minusy

  • Wydajność takiej strony jest zauważalnie niższa – wszystkie wskaźniki będą na niekorzyść w porównaniu z innymi rozwiązaniami,
  • Istnieje możliwość nieprawidłowego ustawienia lub modyfikacji treści, co może nam łatwo zepsuć wcześniej budowany układ – nie obędzie się wtedy bez ingerencji programisty lub osoby obeznanej z tematem,
  • Dopasowanie takiego projektu odbywa się zazwyczaj ze sporym udziałem własnych styli Css i Javascriptu,
  • Edycja wymaga nawet pobieżnej znajomości używanego edytora. Zdobycie takiej wiedzy na szczęście nie jest czasochłonne.
  • Optymalizacja może wiązać się z dodatkowym, często niemałym kosztem.

Kiedy takie podejście jest zalecane

  • Gdy nie dysponujemy budżetem na ciągłą, comiesięczną opiekę nad stroną,
  • Gdy strona nie jest modyfikowana często, ale chcemy zachować możliwość edycji możliwie wszystkich elementów z poziomu interfejsu, bez ingerencji w kod,
  • Gdy wydajność strony nie jest priorytetem (czyli zdecydowanie niezalecane rozwiązanie w przypadku rozwiązań e-commerce z relatywnie dużym ruchem).


Szablon pod wymiar,
z podziałem na bloki,
zintegrowany z edytorem blokowym


Zdecydowanie najbardziej zaawansowane, a jednocześnie najbardziej czasochłonne rozwiązanie. Jak to działa? Wykonawca buduje dla klienta zestaw gotowych bloków, uwzględniając przygotowany wcześniej projekt graficzny. Dzięki temu można te bloki łączyć w dowolnej kombinacji, z pomocą interfejsu graficznego.

Plusy

  • Duża elastyczność edycji treści, niezależnie od dostępności programistów,
  • Można oprzeć się na dowolnym projekcie graficznym,
  • Zachowujemy wydajność strony i elastyczność budowy treści,
  • Nie mamy technologicznych ograniczeń co do wdrażanych rozwiązań,

Minusy

  • Duża czasochłonność i kompleksowość rozwiązania na poziomie projektu – co wpływa na koszt,
  • Zmiana projektu graficznego wiąże się z budową strony w zasadzie od zera,
  • Utrzymanie takiego rozwiązania wiąże się zazwyczaj z comiesięcznym kosztem,
  • Budowa takiego szablonu jest zadaniem wyłącznie dla sprawnych i dobrze zorientowanych w technologiach programistów, przejęcie takiego projektu stawia spore wymagania dla zespołu, jeśli np zdecydujemy się na przeniesienie odpowiedzialności na zespół in-house. Narzędzia użyte do budowy znajdują się zdecydowanie poza zakresem podstawowych umiejętności programistów PHP i wymagają obycia i doświadczenia, aby użyć ich prawidłowo.

Kiedy takie podejście jest zalecane

  • Gdy strona edytowana jest często, przez spory zespół ludzi, jednocześnie oczekujący możliwość budowy treści w elastyczny sposób, bez potrzeby ingerencji z zewnątrz,
  • Gdy wydajność strony jest kluczowa, lub przynajmniej bardzo istotna,
  • Gdy liczymy się z comiesięcznym kosztem utrzymania i rozwoju takiego rozwiązania,
  • Gdy mamy zaufanie co do zespołu który buduje nam stronę, co do dalszego wsparcia w przyszłości.
  • Gdy zależy nam na bezpieczeństwie wdrażanych rozwiązań,
  • Nie chcemy aby użytkownicy odczuwali aktualizacje i zmiany wprowadzane na stronie,
  • Gdy zależy nam na jakości wprowadzanych rozwiązań, przez co ścieżka wdrażania przewiduje wersje testowe i QA.

Jak widać elementów które trzeba brać pod uwagę jest cała gama. Prawidłowa odpowiedź? Niestety nie ma. Jednak posiadając tą cząstkę wiedzy zmniejszymy prawdopodobieństwo pomyłki przepalenia budżetu na rozwiązanie które nie zrealizuje w stu procentach naszych potrzeb. Oszczędzimy też tarć z wykonawcą, który często nawet działając w dobrej wierze, wybierze rozwiązanie nieadekwatne do naszych wymagań.


Masz wątpliwości? Bez obaw, pomożemy

mvp_small
MVP – Jak i dlaczego budować minimalną wersję produktu

MVP – Minimum Viable Product

W zasadzie samo łopatologiczne tłumaczenie tego zwrotu powinno wyjaśnić co najmniej połowę nieścisłości – produkt minimalny, bez żadnych zbędnych funkcjonalności. Służący przede wszystkim walidacji modelu biznesowego. Wbrew obiegowej opinii, to niekoniecznie oznacza działającej aplikacji czy portalu (zależnie oczywiście od tego czym jest produkt docelowy). Równie często może to być zwykły film instruktażowy, czy nawet… symulacja. Ręczna.

Rozpoczynając tworzenie startupu często skupiamy się na tworzeniu narzędzia. Poświęcamy więc mnóstwo czasu i środków na budowanie ogromnego, dopieszczonego rozwiązania, wrzucamy pieniądze w marketing i nagle… okazuje się, że rynek nie jest naszym produktem zainteresowany, lub nie jest nim zainteresowany w tej formie! Pozostajemy kilka miesięcy i jeden często niemały budżet do tyłu. Dlatego startując  z nowym rozwiązaniem przygotowujemy w pierwszej kolejności właśnie MVP, namiastkę produktu która rozwiązuje określony problem, bez zbędnych wodotrysków.

Video

Dropbox w pierwszych dniach swojego istnienia nie był ani platformą ani nawet aplikacją. Pierwsze założenia Dropboxa przedstawione zostały jako film instruktażowy. Już samo przedstawienie idei wystarczyło, aby zarówno zainteresować pierwszych potencjalnych użytkowników, zweryfikować zapotrzebowanie jak i otrzymać pierwsze informacje zwrotne o produkcie. Jeszcze wtedy gdy nie istniał!

Landing page

Czy popularne rozwiązanie marketingowe może być MVP? Jak najbardziej. Stwórz landing page przedstawiając ideę która stoi za Twoim produktem i sprawdź jak użytkownicy na nią reagują, czy zapisują się do newslettera (który oczywiście na stronie umieścisz), modyfikuj przekaz za pomocą testów AB. Niewielkim kosztem (nie musisz od razu inwestować w software house, spróbuj na przykład landingów) sprawdzisz, czy istnieje zainteresowanie  i czy Twój przekaz jest jasny dla użytkowników.

Fasada – czyli ręczna praca zamiast algorytmów

Zamiast poświęcić miesiące na przygotowanie algorytmu, możesz pracę programu wykonywać… ręcznie. I nie jest to żart. Niektórzy założyciele rozpoczynali dokładnie w taki sposób. Przykładem jest Zappos, którego właściciel zamiast gromadzić ogromne ilości towaru (butów), wystawiał ich zdjęcia w sieci, a następnie gdy spływały zamówienia kupował produkty w lokalnych sklepach. Oczywiście nie doradzamy próby skalowania biznesu na tym etapie, skończy się to wyłącznie katastrofą. Co prawda Facebook w pewnym momencie zatrudniał dziesiątki ludzi którzy dobierali ludziom treści na ich wall’ach, ale nie jest to droga którą chcecie podążać.

Klasyczny MVP

Klasyczny MVP powinien być do bólu prosty. Niech Twoją pierwszą myślą będzie Google i to jak wyglądała ich pierwsza strona (i w zasadzie jak wygląda do dzisiaj). Jeśli coś nie jest częścią mechanizmy – nie jest potrzebne. Pamiętaj o zasadzie 80/20 – ostatnie 20 procent projektu zajmuje 80 procent czasu. Także lepiej rozwiązać 80% problemu, niż poświęcić 5 razu więcej czasu na, w którym zresztą Twoja konkurencja może zyskać tarcie i Cię wyprzedzić.

 

Chcesz spróbować swoich sił budując startup? Poszerzyć aktualny biznes? Zapraszamy, wspólnie obrobimy Twój pomysł i w krótkim czasie będziesz gotów do wejścia na rynek.

Gmail_logo
Tips & tricks – gmail i import poczty z innego konta

Na przestrzeni kilku ostatnich lat, Gmail niepostrzeżenie stał się (nie)oficjalnym standardem w obsłudze naszej poczty. Wielu z nas korzysta z niego nie tylko na jednym podstawowym adresie, wykorzystujemy go również jako manager do poczty na firmowych domenach. Wiąże się to jednak z pewnym drobnym, acz bardzo upierdliwym problemem. Odpowiadając na wiadomość, do adresów dodawany jest nasz własny adres e-mail. Niby nic, a jednak irytujący szczegół, który zabiera nam przeciętnie od 65 do nawet 120 sekund dziennie! Niedopuszczalne marnotrawstwo. Można ten irytujący element naprawić, włączając w opcjach naszego dodatkowego konta pozycję „Traktuj jako alias”. I voila, od teraz możesz spać spokojnie wiedząc, że możesz poświęcić dodatkowe dwie minuty na czytanie o kryzysach wybuchających w piąteczek :).

android_vector
Co zrobić gdy moja aplikacja dla Androida zajmuje więcej niż 50MB

Ograniczenie  wielkości aplikacji (pliku APK) do 50MB na platformie Android jest dość uciążliwe, ale nie pozostajemy sami z tym problemem. Jest to wyłącznie teoretyczne ograniczenie. Rozwiązaniem są expansion files. Expansion file są to pliki z roszerzeniem .obb, hostowane na serverach Google. Odciąża to nas tym samym z konieczności hostowania dużych plików, co przy sporej ilości instalacji może stanowić duże obciążenie.

Zawartość pliku obb może być całkowicie dowolna, może być to plik ZIP, PDF czy nawet MP4. O ile spakowanie naszych dodatkowych danych do postaci ZIP’a wydaje się rozsądne, pamiętajmy  że takie dane trzeba będzie wypakować. Dużo lepszym rozwiazaniem jest trzymanie plików w oryginalnej formie, pozwala nam to osadzić plik obb i korzystać z jego zawartości jak gdyby były to wypakowane pliki. Bez rozpakowywania.

Standardowym narzędziem do tworzenia pliku obb, jest JOBB tool. Przykładowy sposób wygenerowania pliku dla ANT’a:


<exec executable="${adb.sdk}tools/jobb.bat">
 <arg value="-d" />
 <arg value="${basedir}/sciezka-do-folderu-z-naszymi-plikami/" />
 <arg value="-o" />
 <arg value="${obbpath}" />
 <arg value="-pn" />
 <arg value="${app.full-package}" />
 <arg value="-pv" />
 <arg value="${version}" />
 </exec>

oczywiście w miejsce zmiennych należy podać odpowiednie ścieżki, np:

adb.sdk = C:/Program Files (x86)/Android/android-sdk/
obbpath=sciezka-do-pliku/main.100001.com.mycompany.mygame.obb
app.full-package = com.mycompany.mygame
version=100001

Rzeczą o której należy pamiętać jest schemat nazywania pliku:  [main|patch].<expansion-version>.<package-name>.obb

Tak przygotowany plik wstawiamy w android console wraz z naszą aplikacją. Mamy możliwość dodania dwóch plików rozszerzenia, główny (main) i aktualizujący (patch). Każdy z tych plików pozwala na dodanie dodatkowych 2GB danych.

Aby skorzystać z naszego pliku w aplikacji, najprościej jest wykorzystać gotową bibliotekę.

 

facebook-icon
Jak połączyć sesję Javascript z PHP w Facebook SDK 4.0

SDk Facebooka nigdy nie grzeszyły ani stabilnością, ani rozbudowaną dokumentacją. Zespół developerów FB próbuje jednak tą dziurę łatać w kolejnych wersjach. Ostatnia, czwarta wersja SDK ma już znamiona używalnego. Wprowadza kilka zmian, które ułatwiają wiele elementów, jednak w pierwszym momencie można pogubić się co, jak i dlaczego. Spróbujemy przybliżyć zmiany na podstawie przypadku, kiedy użytkownik loguje się za pomocą SDK Javascriptowego, a następnie nasz program ma za zadanie wykorzystać ciastko otworzone w ten sposób do wykonywania zapytań z pomocą PHP.

//These need to be updated, obviously
$fb_app_id = "xxxxxxxxxxxxxxxxxxx";
$fb_app_secret = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

require_once( 'Facebook/FacebookSession.php' );
require_once( 'Facebook/FacebookRedirectLoginHelper.php' );
require_once( 'Facebook/FacebookRequest.php' );
require_once( 'Facebook/FacebookResponse.php' );
require_once( 'Facebook/FacebookSDKException.php' );
require_once( 'Facebook/FacebookRequestException.php' );
require_once( 'Facebook/FacebookOtherException.php' );
require_once( 'Facebook/FacebookAuthorizationException.php' );
require_once( 'Facebook/GraphObject.php' );
require_once( 'Facebook/GraphSessionInfo.php' );
require_once( 'Facebook/FacebookSignedRequestFromInputHelper.php' );
require_once( 'Facebook/FacebookJavaScriptLoginHelper.php' );
require_once( 'Facebook\HttpClients\FacebookHttpable.php' );
require_once( 'Facebook\HttpClients\FacebookCurlHttpClient.php' );
require_once( 'Facebook\HttpClients\FacebookCurl.php' );
require_once( 'Facebook\Entities\SignedRequest.php' );
require_once( 'Facebook\GraphUser.php' );

use Facebook\GraphUser;
use Facebook\FacebookRequest;
use Facebook\FacebookRequestException;
use Facebook\FacebookSession;
use Facebook\FacebookSignedRequestFromInputHelper;
use Facebook\FacebookJavaScriptLoginHelper;
use Facebook\Entities\SignedRequest;
use Facebook\HttpClients\FacebookCurlHttpClient;
use Facebook\HttpClients\FacebookHttpable;
use Facebook\HttpClients\FacebookCurl;

FacebookSession::setDefaultApplication($fb_app_id, $fb_app_secret);
$session = null;

//Starting new session to remember the token
session_start();

/* checking if facebook session token is available */
if ( !empty( $_SESSION["fb_token"] ) ) {
    try {
        $session = new FacebookSession( $_SESSION["fb_token"] );
        $session->validate();
    } catch (FacebookAuthorizationException $ex) {
        $session = null;
        $_SESSION["fb_token"] = NULL;
    }
} else {
    // getting token from js api/sdk
    $helper = new FacebookJavaScriptLoginHelper();

    try {
        $session = $helper->getSession();

        // creating new, long lived session. Js returns shortly living token
        $session = $session->getLongLivedSession();

        // remembering token for further usage
        $_SESSION["fb_token"] = $session->getToken();

    } catch (FacebookRequestException $ex) {
        // When Facebook returns an error
        $_SESSION["fb_token"] = NULL;
        echo $ex->getMessage();
    } catch (Exception $ex) {
        echo $ex->getMessage();
    }
}

if ($session) {
    try {
        //getting user data
        $user_profile = (new FacebookRequest(
            $session, 'GET', '/me'
        ))->execute()->getGraphObject(GraphUser::className());

        //printing user data
        print_r( $user_profile );
    } catch (FacebookRequestException $e) {
        print_r($e->getMessage());
        return null;
    }
}

Sam kod powinien być zrozumiały, jedna trzeba zwrócić uwagę na kilka rzeczy. Token zwracany przez getLongLivedSession() nie jest zapisywany przez SDK, należy go zapamiętać własnoręcznie, i wykorzystać do utworzenia kolejne sesji. Inaczej przy kolejnym requescie tracimy możliwość wykonania zapytania do API facebooka.

Kod służący do zainicjowania SDK po stronie js wygląda następująco:

window.fbAsyncInit = function() {
	FB.init({
	  appId      : '<?php echo $fb_app_id; ?>',
	  xfbml      : true,
	  version    : 'v2.0',
	  cookie:true
	});
};

(function(d, s, id){
	 var js, fjs = d.getElementsByTagName(s)[0];
	 if (d.getElementById(id)) {return;}
	 js = d.createElement(s); js.id = id;
	 js.src = "//connect.facebook.net/en_US/sdk.js";
	 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Zwracamy uwage na cookie:true, co tworzy ciastko po stronie serwera i daje nam dostęp do sesji z poziomu PHP.

Najnowsza wersja SDK wymaga PHP w wersji minimum 5.3.

Powodzenia!

Facebook SDK 4.0
https://developers.facebook.com/docs/reference/php/4.0.0

prototype-img
Frameworki html do szybkiego prototypowania

Jedną z największych zalet HTML5 jest możliwość szybkiego prototypowania aplikacji. Dzięki temu mamy możliwość przetestowania funkcjonalności zanim przedrzemy się przez dziesiątki tysięcy linii kodu, testów i dokumentacji. Daje to nam szybki podgląd na to, czy nasz serwis będzie funkcjonalny, czy wymaga przemyślenia lub optymalizacji pod kątem usability. Poniżej prezentujemy najpopularniejsze frameworki które ułatwiają to zadanie.

 Foundation

http://foundation.zurb.com/

Pierwszym (i jednocześnie naszym faworytem) jest Foundation, stworzony przez firmę Zurb. Framework ten, poza podstawową funkcjonalnością, czyli rozmieszczaniem elementów na responsywnym gridzie, udostępnia zestaw gotowych, spójnych komponentów ułatwiających tworzenie nawigacji i struktury informacyjnej.

Do zestawu oferowanych przez niego przyjemnych kolorystycznie i świetnie łączących się ze sobą kontrolek należą m.in.:

– alerty
– block grid
– breadcrumbs
– przyciski
– grupy przycisków
– dropdowns/listy rozwijane
– formularze
– flex video
– joyride (świetny dla tworzenia tutoriali i samouczków)
– etykiety
– magellan
– paginacja
– i wiele innych.

Poza zestawem kontrolek mamy do dyspozycji również zestaw klas ogólnego zastosowania, które umożliwiają osiągnięcie określonego, spójnego z resztą elementów wyglądu. Warto zaznaczyć, że konfiguracja Foundation jest oparta nie na czystym CSS, a na SASS.

Bootstrap

http://getbootstrap.com/

Bootstrap jest najpopularniejszym rozwiązaniem wśród narzędzi do prototypowania. Na pierwszy rzut oka niewiele różni się od Foundation. Na drugi i trzeci zresztą również. Podobnie jak wspomniany wyżej, tworzenie layoutów odbywa się na zasadziej „mobile first”, czyli najpierw projektujemy interfejs mobilny i rozwijamy go dla urządzeń o większych rozdzielczościach.

Warto wspomnieć, że Bootstrap został stworzony przez pracowników Twittera.

Co udostępnia:

– dropdowns
– grupy przycisków
– paski przycisków (button toolbars)
– pionowa nawigacja
– checkboxes i radiobuttons
– button addons
– przyciski z dropdownami
– navbars
– formularze
– breadcrumbs
– paginację
– etykiety
– badges
– alerty
– paski postępu
– i mnóstwo innych elementów.

Przewagę Bootstrapa odnajdujemy w ogromie kombinacji w które można układać komponenty. Całość jest spójna i jest bardzo łatwa w obsłudze.

Skeleton

http://www.getskeleton.com/

Skeleton jest najmniej znanym rozwiązaniem z wymienionych. Został stworzony przez… jednego z byłych pracowników zarówno Twittera jak i firmy Zurb, co już samo w sobie świadczy o klasie rozwiązania. W przeciwieństwie do pozostałych dwóch, Skeleton mniej skupia się na samym wyglądzie, a bardziej na jego układzie i rozmieszczeniu. Otrzymujemy na dzień dobry wyłącznie rozmieszczanie elementów na gridzie, podstawową, jednak estetycznie przygotowaną typografię, prosty formularz oraz oskinowane przyciski.

 


 

Jeśli poszukujecie prostych i szybkich rozwiązań do tworzenia prototypów aplikacji html5, lub serwisów internetowych, te trzy pozycję stanowią pierwszy wybór. Nasz dość pobieżny opis niewiele mówi o ich złożoności i możliwościach, ale więcej informacji bez problemu odnajdziecie na stronach ich twórców.

wordpreslogo
Jak prawidłowo przenieść instancję WordPressa na inną domenę

WordPress jest wciąż jednym z najpopularniejszych cmsów nie tylko blogowych, ale również dla niewielkich stron. Przy produkcji strony, jednym z najczęstszych zadań, są przenosiny na nową lub inną domenę (np. z serwera lokalnego na serwer zdalny). Wielu programistów idąc na łatwiznę wykonuje przenosiny w dość brutalny sposób, podmieniając linki do poszczególnych elementów w zrzucie bazy danych. Niestety, taka operacja mimo że pozornie załatwia sprawę, jest niewystarczająca. Część widgetów przechowuje informacje w zakodowanej formie, oraz zlicza długość url`a danego elementu.

Tak więc aby prawidłowo zaktualizować wszystkie odniesienia do domeny należy użyć tego narzędzia:

https://interconnectit.com/products/search-and-replace-for-wordpress-databases/

Ten prosty skrypt php, automatyzuje zadanie przenosin, wliczając aktualizację informacji używanych przez widgety.

Have fun!