TS TworcaStron.pl.

Co mnie wkurza w PHP

PHP idź w pizdu. Tak tak, dobrze widzisz. Dużo rady już tam mówiłem sam do siebie, a właściwie do komputera. Nie bez powodu. PHP to taka moja romantyczna miłość. Ostanio słyszałem od znajomej, że kocha język niemiecki, od innej że francuski. Chciałem im odpwiedzieć, że ja PHP, ale nikt poza mną by się nie zaśmiał.

Brak wszechstronności

Cenię wszechstronność, która przy PHP jest mocno ograniczona. Mówisz, że narzędzie powinno być dedykowane do projektu? Pewnie tak. Jeżeli coś służy do konkretnej rzeczy, to powinno być dużo bardziej dopracowane niż coś co służy do wszystkiego. Kwestia perspektywy i projektów jakie realizujesz. Jeśli chciałbyś napisać w jednym języku stronke, apke na androida i program do windowsa (a ja bym właśnie chciał) – to PHP wystawi ci środkowy palec.

Za dużo wolności

To coś całkiem innego niż mówiłem w poprzednim punkcie. W tym języku można tą samą rzecz napisać na pierdyliard sposobów. Z klamrami, bez kaml, klamry w nowej linii, klamry w tej samej linii, z tabulatorem, bez tabulatora… Czepiam się, ale ktoś musi. Za dużo wolności nie uważam za zbyt dobre, bo każdy zaczyna robić po swojemu (a po niektórych widać, że prawdopodobnie lubią spagehetti… if you know what i mean). Przez to powstaje sporo projektów typu „nie ważne jak wygląda, ważne że działa”.

Beznadziejne nazewnistwo funkcji

substr()

str_split()
strip_tags()
stripcslashes()

Funkcje same w sobie są nieważne. Ważne są ich nazwy. Niektóre mają podkreślnik, niektóre nie. Do dziś zastanawiam się czy można to jakoś logicznie wyjaśnić.

Bezpieczeństwo

PHP ma małe bariery wejścia. Jest stosunkowo łatwy w nauce bo zostawia dużo pole dowolności w kodowaniu. Fukcje wydają się łatwe. Szybko zaczynamy tworzyć trochę bardziej skomplikowane aplikacje. Niestety wraz z postępami w samym programowaniu, niezawsze idze w parze nauka o bezpieczeństwie w PHP, która czasami wydaje się iść gdzieś całkiem obok (nie ma się co dziwic bo PHP wcale tego nie wymaga i sam daje do dyspozycji dużo dziurawych „funkcji”).

Trzeba się napisać

Nikt mnie nie przekona, że PHP jest szybkiem językiem. Szybkim w pisaniu. Zresztą nie trzeba przekonywać, wystarczy popisać w innych jezykach chociaż chwile.

Co prawda PHP przyśpiesza pisanie poprzez, np. brak konieczności określenia typu zmiennych, inna sprawa czy to jest dobre czy złe i że jest to małe przyśpieszenie. Porównując jednak sam kod i funkcje, to przy PHP trzeba się sporo napisać, aby coś stworzyć.

Podsumowanie: Miłośc z konieczności

Mimo tych wszystkich rzeczy kocham PHP. Muszę kochać.

Będąc w webdeveloperce, a już na pewno pracując jako freelancer, nie opłaca się go nie znać (chociażby z powodu samego WordPressa – tutaj pisałem dlaczego WP jest ważny). Ale u wielu jest to też ta pierwsza, młodzieńcza miłość – zdecydowana większość zaczynała swoją przygodę właśnie z PHP, a jak wiadomo „pierwsza miłosć nie rdzewieje”. 

Ktoś być może powie „język jest nie ważny – to tylko narzędzie, liczy się programista!”. Niby tak.. ale dla porównania koparka i łopata to też są narzędzia i od operatora zależy czym wykopie ładniejszy dół (o ile „dół” można oceniać w skali „ładności”). Inna sprawa czym będzie się to robiło wygodniej i szybciej. Spłycam, ale potrzebowałem jeszcze jednego argumentu przeciw:> a już całkiem serio: PHP ma także plusy, ale dzisiaj nie o nich.

Ostania rzecz, która mnie wkurza w PHP: właśnie mamy środek majowego weekendu, czyli długiego weekendu (już jest po, ale pisałem to wtedy). Pisałem do znajomych, jeden jedzie do domu, drugi nad morze, ogólnie wszyscy wypoczywają… a ja co?

…a ja siedzę przd kompem i piszę co mnie wkurza w PHP.

Programiści przyszłości- jedni zostaną zapomnieni, inni zawładną światem

Pamiętasz jak to wszystko wyglądało 60 lat temu? Pewnie nie, bo pewnie nie było cie wtedy jeszcze na świecie jak i mnie (opieram się na obecnych statystykach strony:)), ale wszyscy wiemy jak to było.

Większość zawodów, w których teraz działamy nawet nie istniało.  Ale 60 lat to za dużo, weźmy 15. Jak wyglądało tworzenie stron 15 lat temu? Myślę, że całkiem fajnie, nie trzeba było się tyle uczyć, a klient raczej nie marudził, że font jest zbyt mało modny, a kolor niebieski nie może być niebieski ale powinien mieć odcień astralnego podmuchu niebiańskiej bryzy.

Chociaż jestem pewny, że i tak prosił o większe logo.

Wiesz też, jak to wygląda teraz. Trochę doszło nam tej nauki. Technologia rozwinęła się niesamowicie, zresztą wystarczy spojrzeć na branże największych firm tego świata.

Kto rządzi światem

Zobaczmy 5 najcenniejszych marek świata w 2017 (źróło Forbes, raport przygotowany przez Brand Finance). Przynajmniej oprócz mojego gadania wyniesiesz z tego wpisu jakąś ciekawostkę:

  1. Google (109,5 mld dol.)
  2. Apple (107,1 mld dol.)
  3. Amazon (106,4 mld dol.)
  4. AT&T (87 mld dol.)
  5. Microsoft (76, 3 mld. dol.).

Podkreślam jeszcze raz: to wycena „marki”, ale gdybyśmy chcieli wziąc pod uwagę wartość firmy to lista będzie podobna (zmienia się tylko jedna pozycja – AT&T wypada, a wpada Facebook). Którą listę bym nie wybrał, to największe firmy w dalszym ciągu są firmami technologicznymi.

Jak widać, naszym światem rządzą firmy, które opierają się na programistach. Są tam oczywiscie też inne zawody, nikomu nie umniejszam, ale tutaj skupiam się na programistach bo bez nich, żadna z tych firm by nie powstała.

Każdy programista w każdej z tych firm musiał pewnie rozwijać się tak samo szybko, jak sama firma. A co działo się z tymi, którzy zostawali w tyle i nienadążali?

Zapomnieni programiści

Lubisz się uczyć nowych rzeczy? Ja bardzo, cieszę się z tego powodu bo dzisiaj to konieczność. Kiedyś tak u mnie nie było. Być może podświadomie zrozumiałem, że bez ciągłej nauki daleko nie zajdę. Nasze śrdowisko wymaga ciągłych zmian, ciągłego poznawania nowych technologii, niezwykłej elastyczności. Musimy dostrajać się do świata IT i jego wymagań (jeśli masz problem z nauką i pracą to koniecznie przeczytaj wpis Jak zostać wydajnym programistą?).

Przesadzam? Wyobraź sobie, że tworzysz strony i poleciałeś na księżyc na 5 lat. Ile byłbyś teraz warty na rynku? Pewnie tyle co student informatyki (spokojnie, sam studiowałem informatykę:)).
Gdybyś dla porównania był leśnikiem i wrócił do zawodu po 5 latach, to prawdopodobnie nikt by nie zauważył, że cie nie było. Ewentualnie po takiej nieobecności usłuszałbyś:

– O Franek jesteś
– No jestem, a co?
– Pamiętasz te drzewo co je miałeś ostatnio ściąć?
– Pamiętam
– Już nie trzeba, piorun walną i się samo ścięło

Zgaduję bo chociaż mam znajomego leśnika, to ja na leśnictwie się nie znam, ale myślę, że jest w tym trochę racji.

Zastanawiam się jak będą wyglądać technologiczne skoki. Nawet nie chodzi o wielkie rewolucje, ale mikroskoki jak ten, gdzie kiedyś wszyscy jarali się Flashem, a dzisiaj jest on już praktycznie martwy. Właśnie czytam jakiś stary artykuł, w którym jest napisane „Internet obfituje w strony z niesamowitymi animacjami, każdy chce mieć baner we flash’u gdyż taki ściąga wzrok potencjalnego odwiedzającego i nakłania do kliknięcia„… to wcale nie było tak dawno.

Myślisz, że to pojedynczy przypadek? Co zrobisz gdyby się okazało, że taka sama przyszłość czeka PHP czy JavaScript a to jedyne na czym się znasz? Na razie możesz spać spokojnie, nic takiego się nie szykuje… na razie. A może nie będzie się szykowało przez następne kilkaset lat.

Programistyczna przyszłość

To co się dzieje teraz to dopiero początki ery IT. Rewolucja dopiero się zacznie. Skoro obecne języki są pierwszymi, to jak niedoskonałe muszą one być. W końcu mało rzeczy jest dopracowanych już od samego początku. W takim razie, ile czasu minie zanim obecne języki znikną całkowicie na rzecz lepszych, wydajniejszych?

Ciekawe w czym będziemy programować za 20, 30 lat, czy będziemy do tego używać klawiatur? Może będzie to bardziej przypominało układanie niewidzialnego tetrisa nad szklaną, elektryczną krajalnicą.

Ciekawe w jakim stopniu zastąpią nas maszyny, i przede wszystkim jak wiele osób wypadnie przez to z branży. Myślę, że jest to prawdopodobne i zastanawiam się:

jeśli to nastąpi to kiedy i jak się do tego przygotowywać.

Backend – nie jesteś już mi potrzebny

-Oczywiście chciałbym móc sam edytować treści na mojej nowej stronie
-Jak najbardziej. Przygotuję panu stronę na autorskim CMSie, wszystko będzie niesamowicie łatwe w zarządzaniu.
-Super, ile to trwa?
-Standardem przy takich zleceniach jest jakiś miesiąc
-Dobrze, czekam w takim razie na propozycje

Jedno z pierwszych zleceń

Nie było to moje pierwsze zlecenie, ale na pewno jedno z pierwszych, na przygotowanie strony internetowej. Jaram się! Prawdę powiedziawszy nie jestem pewien czy pamiętam w tym momencie pierwszy projekt dla prawdziwego klienta. Pamiętam moją pierwszą stronę w życiu, była to informatyka w….. podstawówce? Niby miałem już w domu komputer, nawet z Windowsem XP więc nie byle co, ale jedyne co potrafiłem na nim robić to odpalić Heroes Might and Magic 4 (wszyscy lubią 3-cią część, ja się jaram czwórką – przecież jest o niebo lepsza!). Owa strona www była chyba najgorszą w całej szkole. Od początku jej istnienia…

Nie potrafiłem nawet utworzyć tabelki jak robili to wszyscy. Nie. Jedyne co udało mi się zrobić to ustawić stałą wysokość i szerokość strony oraz nadać jej grafikę jako tło. Grafika imitowała prawdziwą stronę. Nauczyciel się nie zorientował i dostałem 5. Wystarczyłoby żeby kliknął „wyświetl źródło” a zobaczyłby 2 tagi: <title> i <body> z tłem. Na szczęście tego nie zrobił. Kto by pomyślał, że typ, który zrobił najgorszą stronę i nie wiedział nawet jak wstawić tekst, prowadzi dzisiaj o tym bloga.

Mój własny CMS

Wróćmy do tematu. Jako pilny PHPowiec przygotowałem już nawet swój CMS, pełna profeska. Lubiłem robić strony na swoim CMSie bo miałem nad tym niesamowitą kontrolę. Nie zastanawiałem się jaka funkcja wypisze mi posty, jaka doczepi style w nagłówku, nie musiałem szukać żadnego API. Wydawało się to takie proste.

Nie musiałem jeszcze płacić za mieszkanie, prąd czy wodę. Siedziałem więc wieczorami przy komputerze i potrafiłem kodzić całymi dniami. Tak samo siedziałem tamtego dnia i spokojnie pisałem kod. Pierwsze zlecenia były tragiczne, ale już wtedy wiedziałem, żeby najpierw pokazać grafikę. Na szczęście została ona już zaakceptowana, więc kodze, kodze i kodze.

Kodziłem naprawdę długo…

Pierwsze oznaki, że coś się dzieje

Tak sobie kodziłem, aż zakodziłem, a przynajmniej tak mi się wydawało. Klient zażyczył sobie kilku dodatkowych bajerów: jakiś slider, formularz i coś tam jeszcze. Ok, nie ma sprawy, biorę się do pracy.

Stworzenie tych kilku bajerów na swoim CMSie zajęło mi bodajże kilka dni. Teraz zrobiłbym to dużo szybciej, ale i tak trwało by to minimum kilka godzin. Nie wspomnę, że na takim WordPressie zrobiłbym to w paraneście minut, a końcowy efekt wcale nie byłby gorszy.

Nic to, robiłem co do mnie należy ceniąc się taniej niż kopacz dołów, bo mam autorski CMS, a to tak profesjonalnie brzmi. Koniec końców stronę oddałem, klient klepnął, poszło. Wszystko ok, nie licząc tego, że gdyby miał za to zapłacić rachunki to pewnie zostałoby mi tylko na zupke chińską.

W takim stanie trwałem dosyć długo. W międzyczasie pojawiały mi się wachania typu „od dziś tylko backend”, tydzień później „od dziś tylko frontend” i tak w kółko. Skończyło się na takim full-stacku. Tworzyłem strony zarówno na darmowych silnikach jak i na autorskim, ale takie szerokie spektrum technologiczne zaczynało mnie przybijać i zacząłem się poważnie nad tym zastanawiać.

Decyzja

Po wielu miesiącach takich przemyśleń przyszła mi do głowy jedna myśl:

Może jako freelancer (powiedzmy taki full-stack z przewagą frontu) w czasach WordPressów, Wixów i innych …ów, nie ma już sensu uczyć się backendu. Może warto zainwestować ten czas w inne, ważniejsze rzeczy, a może nawet na pozorne głupoty jak wyjście ze znajomymi na piwo. Żyć też trzeba. Zawsze byłem tym, który pierwszy rzucał się na nowe technologie czy języki. Zarówno front jak i back. Do tego dochodziła grafika, administracja serwera, bezpieczeństwo, ale w końcu  w głowie pojawia się pytanie, które pojawić się musi: do czego to prowadzi?

Powinniśmy dążyć do optymalizacji wszystkich procesów. Klient nie zapłaci więcej za stronę dlatego, że będę ją dłużej robił. Czy można dziś postawić stronę bez znajomości technologii backendowych? Jak najbardziej. Czy trzeba znać PHP, aby dodać na stronie slider, formularz czy zablokować rejestrację? Nie.

Może skoro w 80% przypadków cały backend możemy mieć „z głowy”, to czy warto zawracać sobie głowę i inwestować czas na naukę technologii dla tych 20%? Kiedyś powiedziałbym stanowcze tak, ale z drugiej strony czytałeś wpis 80/20 zasada Pareto a Freelancer, czyli mniej za więcej?

Jak szybciej pisać w PHP

Dzisiaj porozmawiamy sobie o tym, jak można szybciej pisać w PHP. Część „trików” na pewno znasz bo są bardzo podstawowe, część być może nie. Niektóre dostępne są tylko od wersji PHP7 (zaznaczyłem które), a inne są nauczane od samych początków przygody z PHP. Bez przedłużania, zaczynajmy!

Nie domykanie <?php ?>

Jeżeli cały plik jest kodem php, lub kończy się takim właśnie kodem to nie ma potrzeby zamykania tagu <?php ?>. Czasami może to nawet zabezpieczyć przed błędami.

//początek pliku
<?php
  //skrypt 

//koniec pliku, brak zakończenia "?>"

Krótkie tagi

Często mamy sytuację, że w środku jakiegoś kodu HTML chcemy wstawić naszą zmienną. Najprostszy przykład to szablony – prawie cały kod jest pisany w HTML, a podmieniamy w nim poszczególne wartości. Na pewno spotkałeś się wiele razy z takim kodem:

<div class="<?php echo $active_class; ?>">
   <h1><?php echo $page_title; ?></h1>
   <p><?php echo $page_content; ?></p>
</div>

Można to zastąpić właśnie poprzez stosowanie krótkich tagów. Wtedy ten sam kod wyglądałby nieco inaczej:

<div class="<?=$active_class?>">
   <h1><?=$page_title?></h1>
   <p><?=$page_content?></p>
</div>

Już jest krócej. Krótkie tagi pozwalają na pominięcie „echo” oraz „php”: 
<?php echo $value; ?> <-> <?=$value?>. 

Krótkie tagi mogą zostać wyłączone w php.ini, dlatego nie wszędzie mogą działać.

Usuń klamry

Klamry nie zawsze są wymagane (Oczywiście mamy standardy PSR więc czasami lepiej je dawać) Programiści chyba dzielą się na 2 grupy: a) jak najkrótszy kod, b) jak najczytelniejszy kod, nawet jeśli będzie 2krotnie dłuższy. Osobiście jestem po środku. Warto dbać, aby kod był czytelny, ale bez kilku klamr dalej uważam go za przejrzysty. Przykład:

if($true){
   echo "To jest prawda";
}

To wyżej to jest pełny kod. Niektórzy opuszczają też klamrę otwierającą, do nowej linijki – okej, jeśli ktoś chce to proszę bardzo, ale można to zapisać dużo krócej:

if($true) echo "To jest prawda";

Możemy też szybciej piasć dłuższe operacje. Zresztą na studiach (przynajmniej moich) – usuwanie niepotrzebnych klamr było wręcz nakazem profesorów, aby maksymalnie skrocić kod.

if($true == true){
    echo 'To jest prawda';
}else{
    echo 'To nie jest prawda';
}

Możemy to zapisać tak:

if($true == true)
    echo 'To jest prawda';
else
    echo 'To nie jest prawda';

W ten sam sposób możemy zapisywać również pętle. Osobiście jestem zwolennikiem usuwania klamr, dopóki kod jest faktycznie przez to czytelniejszy. Jeżeli przez brak klamr zaczniesz  się gubić w kodzie, lub będzie on zwyczajnie mniej czytelny, to lepiej wócić i dopisać te kilka znaków.

Operator trójagrumentowy

Zwykły operator można zastąpić tzw. operatorem trójargumentowym. Standardowy kod:

if($content == "tajne"){
    echo 'Treść tajna, nie możesz jej zobaczyć';
}else{
    echo 'Witaj, Zapraszam dalej';
}

Możemy zapisać w ten sposób:

echo ($content == "tajne") ? 'Treść tajna, nie możesz jej zobaczyć' : 'Witaj, Zapraszam dalej';

Można to również zastosować przy nadawaniu zmiennym wartości, np:

if($gender == "male"){
  $name = 'Janusz';
}else{
  $name = 'Grażyna';
}

Skracamy i piszemy w ten sposób:

$name = ($gender == 'male') ? 'Janusz' : 'Grażyna';

Trójkowy isset

PHP 7 dał nam kilka fajnych funkcji. Jedną z nich jest tzw. trójkowy isset. Pozwala on szybko sprawdzić czy wartość istnieje i nie jest równa NULL – jeśli tak, to ją zwraca, w przeciwnym wypadku zwraca jakąś domyślną wartość, którą podamy.

Na początku nasz kod wygląda tak:

if(isset($name)){
   $my_name = $name;
 }else{
   $my_name = 'brak imienia';
 }

Ten kod możemy skrócić za pomocą operatora trójargumentowego (z poprzedniego punktu):

$my_name = (isset($name))? $name : 'brak imienia';

Już jest krótko, ale skorzystamy z trójkowego isseta i skrócimy kod jeszcze bardziej:

$my_name = $name ?? 'brak imienia';

Spaceship

Kolejna funkcjonalność PHP7. Potrzebujesz porównać 2 wartości i dowiedzieć się, która jest większa (ew. czy są równe)? Teraz jest na to szybki sposób:

echo (1 <=> 2); // wypisze -1
echo (2 <=> 2); // wypisze 0
echo (3 <=> 2); // wypisze 1

Możemy też tworzyć trudniejszy równiania:

echo  ('A' <=> 'B'); // wypisze -1
echo  ('C' <=> 'B'); // wypisze 1
echo  ([1,3] <=> [5,5]); // wypisze -1
echo  ([1,3,3] <=> [3,1]); // wypisze 1
echo  ('Jestem 3' <=> 'Jestem 1'); // wypisze 1

Tablice

Do czasu PHP w wersji 5.4 tablice definiowaliśmy tak jak w wielu innych językach, czyli:

$tab = array('name'=>'val');

ale z tym koniec! Od siódmej wersji tablice można skracać i tworzyć za pomocą klamr kwadratowych:

$tab = ['name'=>'val'];

Pętla foreach

Raczej każdy zna tablicę foreach jednak czasami można się natknąć na sytuację, gdzie ktoś stosuje pętle for() zamiast właśnie foreach(). Szczególnie przy przesiadce z JavaScriptu. Przykład:

$tab = array(1,2,3,4,5);
 
for($i=0; i<count($tab); $i++){
   //jakas akcja
}

Można to napisać w ten sposób:

$tab = array(1,2,3,4,5);
 
foreach($tab){
   //jakas akcja
}

Inkrementacja, dekrementacja

To pewnie znasz. Jeżeli chcemy zwiększyć lub zmniejszyć jakąś zmienną o 1, najczęśniej posługujemy się właśnie nimi. Czyli zamiast pisać:

$value = $value + 1;
$value = $value - 1;

Możemy napisać:

$value++;
$value--;

Operatory matematyczne

To też pewnie znasz, ale chcę żeby ten wpis był możliwie kompleksowy. W przypadku, gdy trzeba wykonać jakieś proste operacje matematyczne, możemy to zrobić tak:

$value = $value * 3;
$value = $value / $count;
$value = $value - 4.34;

Ale możemy to skócić i napisać tak:

$value *= 3;
$value /= $count;
$value -= 4.34;

Grupowanie „use”

Na koniec coś może bardziej zaawansowanego, znowu dostępne jedynie od wersji PHP7. Dostaliśmy możliwość grupowania deklaracji use. Wcześniej robiliśmy to w ten sposób:

use Tw\Controller\Blog;
use Tw\Controller\Course;
use Tw\Controller\Page;

Od PHP7 możemy skrócić to do jednej linijki:

user Tw\Controller\{Blog, Course, Page};

Szybciej pisać to nie wszystko

Pamiętaj, że szybkość pisania kodu to nie wszystko. Kod powinien być przede wszystkim poprawny, czytelny i zgodny ze standardami.

Dlatego koniecznie zobacz jeszcze:

9 nawyków dobrego programowania i 9 błędów web developera

10 powodów, dla których warto wybrać WordPressa

Oho, typ coś pisze, żeby wybrać WordPressa. Czyli co, odstawić na bok swoje CMSy? Nie marnować czasu na back-end?

Oczywiście, że NIE! Dzisiaj nie zajmujemy się rozważaniami typu „CMS – autorski czy darmowy„, ale podam kilka powodów, dla których wybrać WP w sytuacji, gdzie lepszym wyjściem będzie rozwiązanie open source. Bo trzeba zdać sobie sprawę, że autorski CMS nie zawsze jest najlepszym wyjściem – szczególnie w sytuacji freelancera, gdy ten często pracuje sam a samodzielna codzienna praca z jednoczesnym rozwijaniem własnego CMSa może być niewyobrażalnie trudna. Czasami wręcz niemożliwa czy nielogiczna.

Przechodzimy więc do sytuacji, w której myślisz „Okej mam klienta, ale nie chce/moge/powinienem tworzyć dla niego specjalnego CMSa… co więc powinienem wybrać… hym…„. W tym momencie odpadasz Google i wpadasz na poniższy tekst.

WordPress jest najpopularniejszym silnikiem

Można kłócić się czy WordPress jest fajny, zły, ale nie można kłócić się z faktem, że jest on najczęściej wybieranym CMSem na świecie (w Polsce również). To już duży powód dlaczego warto uczyć się WP. Przykładowo oznacza to, że w przypadku przebudowy cudzej strony jest wielkie prawdopodobnieństwo, że będzie tam właśnie WordPress – dobrze więc go znać, aby szybko „załatwić” zlecenie.

Innym pozytywem takiej sytuacji jest to, że na programistów WordPressa ciągle będzie zainteresowanie ze strony zleceniodawców. A jeśli to Ty będziesz zleceniodawcą to bez problemu znajdziesz WordPressowago wykonawcę.

cms udzial 2016 - 10 powodów, dla których warto wybrać WordPressa

Udział CMS w rynku w Polsce w 2016r.
Dane z http://trends.builtwith.com

Jak sytuacja wygląda na świecie? Bardzo podobnie. Wg serwisu BuitlWith.com WordPress to 50% na rynku światowym (w 2016r), co czyni go bezkonkurencyjnym.

Wielka społeczność

Dzięki temu, że WordPress jest popularny powstała wokół niego wręcz ogromna społeczność. Chociaż powinienem pewnie powiedzieć odwrotnie: dzięki tak wielkiej społeczności WP jest najpopularniejszym CMSem.

Co to oznacza w praktyce? Między innymi to, że na bez większego problemu znajdziesz odpowiedź na każde pytanie. Jednocześnie to spawia, że WP jest świetny do nauki, bo nawet jeżeli czegoś nie wiesz to powineneś otrzymać pomoc na różnych forach.

Pamiętam, gdy uczyłem się Prestahop. Oczywiście jest to inna platforma, ale jeśli chodzi o szukanie informacji w necie – było ciężko… delikatnie mówiąc. Pamiętam, że koniec końców musiałem kupić jakiś płatny kurs ponieważ w Google udawało mi się znaleźć może 10% informacji o problemach, które spotykałem podczas tworzenia sklepu.

W przypadku WordPressa sytuacja jest całkowicie odworotna. Jeżeli masz jakiś problem to prawdopodobnie wygogulesz go w kilka/naście minut.

Dodatkowo można znaleźć do niego setki tutoriali, kursów, artykułów etc.

Tysiące darmowych wtyczek

Wielka społeczność aktywuje całą reakcję łańcuchową. Jej jednym oczkiem są właśnie darmowe wtyczki. Wielka społeczność = wiele wtyczkek, również darmowych.

Być może ktoś powie, że darmowe wtyczki są złe – bullsthit. Jest wiele naprawdę fenomenalnych, darmowych wtyczek.

Główne korzyści wtyczek to szybkość budowania takiej strony. Nie musisz osobiście pisać każdej funkcjonalności, jak ma to miejsce w przypadku autorskiego CMSa.

Wiele darmowych szablonów

Sytuacja analogiczna do powyższej. Duża społeczność oznacza wiele szablonów, również darmowych. Nawet jeżeli nie robisz strony dla klienta, ale dla siebie – to dzięki darmowych szablonom i wtyczkom jesteś w stanie stworzyć pełnowartościową stronę w godzinę. A jeśli jesteś w stanie zainwestować kilka stówek w płatny szablon to możesz mieć już naprawdę fajny produkt.

Szybkość budowania strony

Dzięki temu, że posiada wielką społecznośc, wiele gotowych wtyczek i szablonów – możesz w błyskawicznym tempie stworzyć na nim stronę. Nie ma co się tutaj rozpisywać. Kropka.

Łatwość obsługi

To jest powód przede wszystkim dla klienta, nie Ciebie. Klienci mają często duże trudności z obsługą strony (szczególnie jeśli spotykają się z jej obsługą pierwszy raz). WordPress w tej obsłudze jest naprawdę prosty. Możemy dodatkowo skorzystać z kilku trików i poukrywać zbędne elementy w panelu admina, jeśli bardzo nam przeszkadzają.

Łatwość instalacji

Jeżeli chociaż raz instalowałeś WordPressa to wiesz jak proste to jest. Cały proces odbywa się praktycznie na zasadzie klikania „dalej, dalej,  instaluj, dalej, gotowe”.

Co więcej, na wielu hostingach można ten proces jeszcze bardziej uprościć klikając jedynie „Instaluj” w panelu DirectAdmin. System automatycznie stworzy nam bazę danych i wypełni podstawowe dane konfiguracyjne. Oczywiście również wiele innych silników można w ten sposób zainstalować.

Oprócz łatwości instalacji mógłbym dopisać tutaj łatwość modyfikacji czy tworzenia własnych szablonów. WP jest łatwym silnikiem, którego można się szybko nauczyć.

Świetnie nadaje się do stawiania małych i średnich sklepów

Wiesz jaki jest najczęściej wybierany silnik e-commerce? Zgadłeś! WordPress (w połączeniu z darmową wtyczką Woocommerce)!

udzial ecommerce 2016 2 - 10 powodów, dla których warto wybrać WordPressa

Udział silników e-commerce na świecie w 2016r.
Dane z serwisu BuiltWith.com

Sytuacja w Polsce przedstawia się podobnie. WP + Woocommerce obejmuje 23%. Co prawda jest to drugie miejsce, bo pierwsze posiada PrestaShop 25%, jednak pewnie jest to kwestia czasu zanim i w Polsce WP wybije się na pierwsze miejsce  (o ile to już się nie wydarzyło).

Dodatkowo jeśli znasz samego WordPressa to bez problemu postawisz na nim sklep internetowy bez potrzeby nauki nowego systemu.

O samych sklepach (w tym o WP + Woocommerce) pisałem tutaj: Na czym postawić sklep internetowy

Jest całkiem szybki

Słowo „całkiem” znajduje się w tytule spejalnie. Pomijam to, że jest to silnik napisany w PHP, który z natury nie jest królem prędkości.

WP został napisany w posób, który pozwala go dostowować praktycznie do wszystkiego (blog, strona wizytówka, sklep…) dlatego jak się pewnie domyślasz – nie jest to najwydajnieszy możliwy sposób. Posiada różne hooki czy filtry, które mimowolnie zawsze będą delikatnie opóźniać całość. WP nie jest na pierwszym miejscu, ale biorąc pod uwaglę jego elastyczność radzi sobie całkiem dobrze.

Ponadto jest wiele sposobów, aby przyśpieszyć naszego WordPressa, również dzięki darmowym wtyczkom.

Jest również wiele innych sposobów, aby taką stronę przyśpieszyć. Kilka z nich opisałem tutaj: 10 sposobów na przyśpieszenie strony

Darmowy

Każdy to wie, ale ja to podkreślę. WordPress mimo tak wielu plusów jest całkowicie darmowy. Oczywiście silnik autorski również będzie dla Ciebie darmowy, tzn. nie będziesz inwestował w niego pieniędzy, ale za to mnóstwo czasu. Tutaj możesz fajnie optymalizować swoje koszty produkcji strony, zarówno finansowe jak i czasowe.

Nie twierdzę, że WordPress jest jedynym słuszym rozwiązaniem, ale w obecnej chwili, biorąc pod uwagę jego sytuację na rynku – zdecydowanie warto zastanowić się nad nim dłuższą chwilę.

10 sposobów na przyśpieszenie strony

W ostanim wpisie wspominałem o tym, jak ważne może być zadbania o szybkie wczytanie strony („Po co przyśpieszać stronę internetową„). Dziś porozmawiamy jak przyśpieszyć stronę.

Niektóre mogą wydawać się banalne, niektóre mniej. Nawet jeżeli jedna opcja wydaje się „mało atrakcyjna” to jednak trzeba pamiętać, że to jak z oszczędzaniem: grosz do grosza… Kilka słabych optymalizacji może dać całkiem dobre wyniki.

Na początek przypomnę narzędzie, które pozwoli nam na sprawdzenie czasu wczytywania strony w różnych warunkach: https://webspeed.intensys.pl/

Jak przyśpieszyć stronę? Kompresja zdjęć!

Pierwsza i podstawowa rzecz, która często daje najlepsze wyniki. Zdecydowana większość wagi strony to właśnie zdjęcia. Czasami można zobaczyć jak ktoś wrzuca zdjęcia prosto z aparatu – po kilka MB, które równie dobrze mogłyby ważyć 300kB…

Jeżeli pracujesz na Photoshopie to rzeczą naturalną powinno być zapisywanie grafik przez „Zapisz do internetu”. Większość zdjęć można bez problemu zmniejszyć o 60%, niektóre nawet 80-90%.

kompresja foto - 10 sposobów na przyśpieszenie strony

Nie ma zasady jak bardzo kompresować. Trzeba zwyczajnie sprawdzić na ile można sobie pozwolić, aby przy okacji ze zdjęcia nie zrobić pikselozy. Tyle.

Jeśli jednak nie masz PSa, lub chcesz szybko skompresować sporo zdjęć to istnieje bardzo fajne narzędzie online: http://optimizilla.com/pl/ Działa niesamowicie prosto: przeciągasz wybrane zdjęcia, czekasz kilkanaście sekund, po czym pobierasz skopresowaną paczkę.

Minifikacja CSS

Czym jest w ogóle minifikacja? Jest to zmniejszenie kodu źródłowego poprzez usunięcie wszystkie co się da (białe znaki, znaki nowej linii, czasami komentarze). Dzięki temu kod jest mniejszy i wszybciej się wczytuje.

minifikacja - 10 sposobów na przyśpieszenie strony

Do minifikacji możemy wykorzystać, np. Grunta czy Gulpa. Możemy również zainstalować w wielu edytorach kodu specjalne wtyczki, które przy pisaniu kodu LESS/SASS kompilują od razu wesję zminifikowaną. Żeby je odróżnić do nazwy dodaje się końcówkę „.min”, np. „bootstrap.min.css”.

Kiedyś robiłem głupi błąd. Znalazłem skrypt JS, który kompilował mi pliki Less w locie. Bardzo wygodne bo piszesz w less, a przegladarka sama sobie stworzy z tego CSSa w locie. Bardzo wygodne i bardzo spowalniające stronę – nie rób tego:)

Minifikacja JS

Sytuacja identyczna jak w przypadku CSS – chodzi o maksymalne zmniejszenie kodu. Jeżeli includujesz różne skrypty, np. jQuery lub jakiekolwiek biblioteki, to zawsze warto załączać wersję zminifikowaną. Może je rozpoznać już po nazwie, która najczęściej wygląda tak: „nazwa_skryptu.min.js”.

Problem zaczyna się z naszymi skryptami. Pojawia się dylemat typu „za chwilę będę coś zmieniał na tej stronie, a po minifikacji kod staje się nieczytelny – więc czy warto się w to bawić?”. Warto. Powinieneś mieć 2 wersje: roboczą i zminifikowaną. Robocza służy tylko programiście, a wczytywana do projektu jest ta druga.

Ładowanie skryptów asynchronicznie

Pobieranie skryptów może trochę trwać. Niestety ich wczytywanie może zatrzymać ładowanie pozostałych elementów i w ten sposób czas oczekiwania się wydłuża.

Sam sposób ładowania asynchronicznego jest banalnie prosty: wystarczy dopisać async, np.:

[code]

<script src=”ścieżka_do_skryput.js” async></script>

[/code]

Trzeba jednak uważać ponieważ niektóre skrypty, zanim się wczytają potrzebują innych do poprawnego działania. Dlatego nie zawsze wszystko można wczytać asynchronicznie.

Ładowanie tyle fontów ile potrzeba

Działka fontów już tak fajnie się nam rozwinęła, że możemy bez problemu znaleźć „pakiety”, w których mamy do dyspozycji po 12 styli fontów. Super! Na pierwszy rzut oka, ponieważ wszystkie muszą się wczytać, ale czy wszystkie są używane?

Jeżeli wrzucasz fonty na serwer to możesz wybierz jedynie te, które stosujesz. Identycznie jeśli korzystasz z Google Fonts (dlaczego akurat GoogleFonts?) – ma on tę dodatkową fajną opcję, że mniej wiecej pokazuje czy font bedzie się wczytywał szybko, czy nie.

google fonts - 10 sposobów na przyśpieszenie strony

Glyphonic icons

Korzystasz z ikon? Jestem pewny, że tak! Dawniej wszystkie ikony były zwyczajnie grafikami w .png. Dziś możemy zrobić coś fajnieszego, czyli wykorzystać biblioteki ikon! W Boostrapie jest to pakiet domyślny (http://getbootstrap.com/components/).

Daje nam to kilka plusów:

Stosowanie SVG

Idea jest podobna do poprzedniego punktu. Główna różnica jest taka, że tutaj nie korzystamy z gotowych „pakietów obrazków”, ale możemy stworzyć swoje. Jest to sposób na optymalizację grafik. Oczywiście nie wszystkich. SVG jest to obraz wektorowy, czyli opisane nie zapomocą pikseli, a za pomocą łuków, krzywyk, linii itd. Dzięki czemu bardzo mało waży a jednocześnie może być nieskończenie duży i jakość będzie idealna. Jeżeli używasz wielkiej logówki w .png na stronie startowej, to może warto jest są podmienić?

Obrazki jako spritey

Nie zawsze możemy wykorzystać „fontowe ikony” i svg. Wtedy może przydać nam się technika CSS Sprites. Czyli zamiast tworzyć 10 ikonek w png – połącz je w jeden większy orazek, a następnie za pomocą background-position odpowiednio je poustawiaj. Dzięki temu wczytywana jest tylko jedna grafika zamiast 10-ciu. Co prawda jedna większa, ale koniec końców jest to tylko jedno żądnie pobierania i jest to szybszy sposób.

Kompresja gzip

Cały trik polega na tym, że strona nie jest przesyłana w „surowej postaci” z serwera do przeglądarki. Jest ona wcześniej kompresowana (na serwerze), wysyłana (już jako mniejsza bo skompresowana), a następnie rozpakowywana przez przeglądarkę. Przesyłane dane są mniejsze więc oprócz prędkości oszczędzamy łącze. Prawdopodobnie masz tą funkcję odmyślnie włączoną.

Tutaj możesz sprawdzić czy na danej stronie kompresja gzip jest włączona: https://checkgzipcompression.com/

Cache

Na koniec banał. Dzięki cache możemy zapisać naszą stronę do podręcznej pamięci, która „jest zawsze pod ręką” i nie musi pobierać/tworzyć tych danych na nowo. To znacznie przyśpiesza działanie strony.

Do wielu silników, np. WordPress możemy znaleźć gotowe wtyczki, które wystarczy wgrać.

Podsumowanie

Jak widziesz sposobów na przyśpieszenie strony jest naprawdę sporo. To ile z nich wykorzystasz zależy tylko od tego, jak bardzo chcesz tą stronę przyśpieszyć. To nie jest tak, że musisz stosować wszystkie, bo wszytko zależy od Ciebie:)

Po co przyśpieszać stronę internetową?

Temat przez wielu unikany. Przez wielu uważany za niepotrzebny – a przynajmniej takie można odnieść wrażenie odwiedzając niektóre strony. W końcu mamy czasy szybkiego internetu, 10 a nawet 100 Mb/s. Kto by się przejmował jakimś zdjęciem, skoro zostanie ono pobrane w ciągu 1/10 sekundy?

Jednak jako twórca powineneś się przejmować. Dla projektanta stron czy grafika to nie zawsze wydaje się logiczne, że klient chce zrezygnować z naprawdę kilku fajnych zdjęć tylko po to, aby strona ładowała się o sekundę szybciej. Czy jest w tym logika?

Pomijam tutaj całkowicie mniejsze zużycie transferu itd.

Szybkość wczytywania strony dla klienta

Przejdźmy na drugą stronę, na stronę klienta. Wyobraź sobię sytuacje, gdzie sklep internetowy odwiedza 100 osób dziennie. Powiedzmy, że będą to osoby prosto z wyszukiwarki – czyli takie, które o tym czy pozostać na stronie, czy z niej wyjsć – poświęcają kilka sekund (zazwyczaj). Dodajmy do tego nie najlepsze warunki: użytkownik wchodzi przez telefon gdzie ma już wolne łącze, być może jest na działce, gdzie zasięg ledwo zipie, a być może jest na wsi, na której kable dostarczają maksymalnie 10 Mb/s. Być może coś jeszcze pobiera itd. Sposobów, aby zamulić neta jest naprawdę duuuużo.

O takie sytuacje łatwiej niż myślisz. Przykład z życia:

firma organizująca spływy kajakowe posiada na stronie telefon kontaktowy oraz dokładne miejsce, w które trzeba przyjechać. Tak jakoś wyszło, że spływ organizowany jest przy rzece, w samym środku lasu. To nie jest żadna miejscowość, to jest środek lasu, który na mapie nie wyróżnia się chociażby innym kolorem drzew. Jeżeli ktoś jedzie na spływ i nie może znaleźć miejsca zbiórki to ma 2 wyjścia:

  1. zadzwonić do organizatora i ten go poprowadzi, o ile wcześniej zapisał numer
  2. wejść na stronę, w końcu na niej jest adres (a raczej koordynaty) a nawet mapa z dojazdem. Jeżeli wybierze opcje drugą to może się gorzko rozczarować, ponieważ jak to czasami w lesie bywa – ciężko jest wykonać zwykłe połaczenie, nie mówiąc o przeglądaniu internetu.

Jednak ma szczęście bo internet słaby, ale jest. Podczas pobierania strony może przypomni mu się dzieciństwo i modem, który ciągnął 56 kb/s, na pewno będzie miał dłuższą chwilę, żeby je powspominać… Ale bez przechodzenia w skrajność. Wydaje mi się, że 0.5 Mb/s w złych warunkach jest całkiem realnym scenariuszem. W przypadku średniej strony, długość jej całkowitego wczytania może wynosić kilkadziesiąt sekund…

W takiej sytuacji nawet zmniejszenie pliku JS  robi robotę. Przykład jest niecodzienny, ale dobrze obrazuje, że optymalizacja strony czasami jest wyjątkowo ważna.

Każdy jest niecierpliwy

Warto dodać, że każdy użytkownik internetu jest niecierpliwy. Niecierpliwości nauczyły nas obecne czasy, wszystko musismy mieć na tu i teraz. Jeśli nie dostanę tego czego chcę tutaj, to idę gdzie indziej. Internet jest tego najlepszym przykładem, bo gdzie jeszcze o decyzji z jakiej firmy skorzystamy może zadecydować kilka sekund?

Wróćmy do czasu ładowania strony. Załóżmy, że u Ciebie ładuje się ona 2 sekundy. Weźmy szczególnie pod uwagę strony typu „one page”. Zgaduję, że masz dobrego neta. Weźmy pod uwagę, wymienione wyżej czynniki, które mogą spowolnić neta.

Aha, bym zapomniał… Czy bierzesz pod uwagę, że Ty tworząc stronę masz już zapisane chociażby zdjęcia w pamięci przeglądarki? To znacznie przyśpiesza ładowanie – wchodząc na stronę kolejny raz, ładuje się ona znacznie szybciej, niż gdy wchodzisz na nią pierwszy raz.

Jeszcze raz wróćmy do czasu ładowania strony bo zaczynam odchodzić od tematu. Użytkownik może mieć wolnego neta i może wchodzić na stronę pierwszy raz. To potrafi wydłużyć czas ładowania strony, który u Ciebie wynosił 2 sekundy, do przykładowych 5 sekund (to optymistyczny scenariusz).

Powiedzmy, że 20% wchodzi z „gorszych warunków”, a więc im czas ładowania się wydłuża. Zamiast 2 sekund strona ładuje się 5. Przypomnij sobie, że trafiają tu z wyszukiwarki i dla nich każda sekunda, to dodatkowa sekunda zniecierpliwienia. Każdy ma swoją granicę, po której rezygnuje.

Dodatkowo, ktoś może się śpieszyć – dla nich te 5 sekund to wieczność. Jest pewnym, że część z nich zrezygnuje i wejdzie na inną stronę. Jeżeli użytkownik zrezygnuje ze strony, zanim ta się wczyta – to są pośrednie straty dla Twojego klienta.

Czy jest jakiś optymalny czas?

Na pytanie „jak długo powinna się wczytywać strona?” można odpowiedzieć: możliwie krótko. Wiadomo, że nie dasz rady tak samo zoptymalizować strony wizytówki, gdzie jest sam tekst i strony „one page” z dziesiątkami zdjęć. Czasami też opymalizacja nie jest tak bardzo potrzebna.

W tym momencie przypominam sobie dlaczego nigdy nie lubiałem stron Flashowych – przy moim necie, nie byłem w stanie czekać pół minuty na wczytanie strony…

Nigdy też nie stwierdzisz „na oko” jak długo strona się wczytuje, ponieważ zależy to od wielu czynników. Dlatego właśnie dobrze korzystać z narzędzi, które pokazują czas wczytywania w różnych warunkach (np. z różną prędkością internetu), a później zastanowić się czy taki czas jest do zaakceptowania, czy jednak coś jeszcze trzeba poprawić.

Takim narzędziem jest, np.: https://webspeed.intensys.pl/ 

Jego działanie jest bardzo proste i fajne. Wystarczy wpisać naszą stronę i po kilu/kilkunastu sekundach dostajemy ciekawy raport. Przykład poniżej:

webspeed tworcastorn - Po co przyśpieszać stronę internetową?

Czy to jest dobry wynik? To zależy od tego, czy mnie zadowala. Co prawda strona pokazuje nam odpowiednie kolory przy wynikak (zielony – bardzo dobrze, pomarańczowy – może bypc lepiej, czerwony – słabo).

Tutaj jest nienajgorzej, ale sporo rzeczy można jeszcze poprawić, pojawiają się nawet jakieś błędy walidatora, analiza Google Pagespeed również nie jest najwyższa. Postaram się wrzucić drugi screen, gdy blog będzie stał na nowym szablonie (obecnie cały czas jest na jakimś darmowym). To będzie fajne porównanie 🙂

W następnym wpisie sposoby na przyśpieszenie strony:)

To musisz wiedzieć o SEO i pozycjonowaniu

Na początek warto powiedzieć, że pozycjonowanie i SEO to nie są synominy (chociaż często się ich w taki sposób używa). Spóbuję to wyjaśnić możliwie prosto:

Temat pozycjonowania/SEO jest bardzo obszerny i niesposób poruszyć wszystkich kwesti. Na początku zastanowiłbym się, czy naprawdę chesz się uczyć pozycjonowania?

Pozycjonowanie to ruchome piaski

Jak wspomniałem na począku, pozycjonowanie jest pewnym oszukiwaniem wyszukiwarek (oczywiście bardzo to spłycam) i Google stara je wyeliminować. W praktyce będzie to oznaczało tyle, że będzie to temat często zmieniający się. Google poprawi algorytmy to pozycjonerzy zmienią techniki… to Google zmieni algorytmy i tak w koło.

Zresztą w przypadku małych zleceń, np. zamówień dla lokalnego warsztatu samochodowego w niewielkiej miejscowości – pozycjonowanie nie jest często zamawianą usługą. Nie ma się co dziwić, ponieważ zazwyczaj nie jest to tania usługa. Co innego SEO…

Wszyscy lubią SEO

SEO czyli optymalizacja stron ma już w swojej podstawie inną misję niż pozycjonowanie. Efekt jest ten sam, jednak inna jest intencja. Przynajmniej z założenia.

SEO ma za zadanie umilić doświadczenia użytkownika, w lepszy posób przedstawić mu treść. Jestem skłonny powiedzieć, że SEO jest powiązane z UX. Chodzi o to, że głównym celem jest użytkownik (i roboty indeksujące) – można powiedzieć, że zmiana pozycji to efekt uboczny. Co innego, że czasami ten „efekt uboczny” jest w rzeczywistości głównym celem.

Projektujesz strony? W takim razie SEO nie będzie oddzielną dziedziną do nauki (jak pozycjonowanie). SEO będzie częścią tworzenia strony. Tworząc strony i tak będziesz uczył się SEO, pytanie tylko w jakim stopniu.

Przykład: Używanie atrybutu alt w zdjęciach (<img src=”” alt=”opis zdjęcia”>) jest tzw. white hat SEO. Należy do tych dobrych, lubianych praktyk. Efekt stosowania „altów” jest taki, że strona może się lepiej pozycjonować, ale główny cel korzystania z tych artybutów to: 1) informowanie robotów co jest na zdjęciu, 2) informowanie użytkowników co przedstawia zdjęcie, jeśli zdjęcie nie będzie mogło zostać wyświetlone, 3) dla osób niewidomych.

Innym przykładem może być poprawne stosowanie tagów h1, h2, h3… metatagów, adresów URL, czy nawet szybkość ładowania grafik. To wszystko prowadzi do lepszego pozycjonowania się strony, ale z założenia te operacje mają uczynić stronę bardziej przyjazną użytkownikowi (i robotom).

Może SEO też jest „manipulacją” wyszukiwarek?

Skoro efekt SEO jest taki sam jak pozycjonowania, czyli skok w wynikach wyszukiwania, to czy SEO również nie jest manipulacją? Czy nie jest to próba oszukania wyszukiwarek, aby tylko wzbić się wyżej?

Nie do końca. Warto się zastanowić dlaczego niektóre strony są wyżej od innych. Google bierze pod uwage wiele rzeczy, ale chodzi o to, aby wyżej dać treści bardziej wartościowe i lepiej przedstawione. Dzięki SEO sprawiasz, że faktycznie są one lepiej przedstawione. Pozycjonowanie tylko próbuje stworzyć iluzję tego.

Google wie więcej niż myślisz

Dzisiaj o pozycji strony w wyszukiwarne nie decyduje tylko ilość linków przychodzących czy jej optymalizacja. Dzisiaj Google bierze pod uwagę znacznie więcej, np. ilość czasu spędzaną na stronie, ilość podstron przeglądanych przez pojedyncze osoby, ilość komentarzy pod postami, częstość aktualizacji oraz wiele więcej.

Google coraz sprawniej potrafi ocenić, czy strona jest faktycznie interesująca dla użytkownika. Jest to kolejny powód, dla którego warto zainteresować się tematem SEO.

Sprawdź czy strona jest OK

Aby sprawdzić poprawność strony możesz skorzystać z prostego narzędzia: http://www.seoptimer.com/ 

Dzięki temu nie musisz pamiętać o wszystkich zasadach. Powyższy skrypt wskaże Ci błędy. Pokaże też kilka informacji nt bezpieczeństwa czy przystosowania pod mobile 🙂

Różnice między UX a UI

Dziś coraz cześciej można zobaczyć takie stanowiska jak specjalista UX/UI. Technologia poszła do przodu, wiele zadań, za które kiedyś była odpowiedzialna jedna osoba – dziś są zadaniami dla całej drużyny. Powstało wiele nowych odnóg przy tworzeniu stron, i UX/UI jest dla wielu osób jeszcze czymś nowym.

O ile o UI (user interface) wie raczej każdy i potrafi opowiedzieć czym dokładnie jest. O tyle UX (user experience) wciąż wielu osobom wydaje się zwyczjnie synonimem UI.

Powiedzmy sobie dzisiaj stanowczo i jednoznacznie: UI i UX są nierozerwalnie związane, ale to nie jest to samo.

 

UI – user interface

Jest to jak mówi sama nazwa „interfejs użytkownika„. Zaliczają się do tego nawigacje, wyszukiwarki, pola tekstowe, jakieś linki, ułożenie treści. Cały interfejs i wygląd strony.

To jest prosta, wystarczająca definicja. UI może być ładny, brzydki, prosty lub trudny w obsłudze, intuicyjny lub nie. Tyle.

Czy UI można poprawić? Oczywiście, że tak. Być może wystarczy przenieść nawigację w inne miejsce, być może formularz wyszukiwania jest zbyt skomplikowany i trzeba go uprościć. Sposobów jest wiele. Każdy web designer studiuje przez całą swoją karierę, jak projektować dobrze UI.

 

UX – user experience

Ponownie nazwa dokładnie wskazuje czym jest ten „dział nauki”. Są to doświadczenia użytkownika z posługiwania się stroną. Doświadczenia, czyli emocje.

UX nie jest ładny czy brzydki. UX to odczucia. Mogą być one przyjemne lub nie. Jeżeli użytkownik wchodzi do sklepu internetowego i szuka butów, ale tych butów nie może znaleźć (chociaż wie, że one gdzieś tam są), to UX jest negatywny. Użytkownik nie czuje sie dobrze.

Inna sytuacja: użytkownik wchodzi do internetowej biblioteki i w wyszukiwarce wpisuje nazwę książki. Nie zauważył, że tytył wpisał w polu, do którego należy wpisać autora. Przez ten błąd wyszukiwarna nie zwraca żadnego wyniku. Użytkownik jest zły bo wie, że taka książka być powinna. Jego odczucia są wtedy złe, jest zdenerwowany i prawdopodobnie wyjdzie ze strony. Ponownie UX jest negatywny.

Jeszcze inna sytuacja: użytkownik wchodzi na stronę, która ma bardzo dużo zdjęć. Strona długo się ładuje, przez co użytkownik zaczyna się niecierpliwić. Ponownie UX jest złe. W tym przypadku nawet nie zdążył zobaczyć samego interfejsu. UX obejmuje całościowe wrażenia osoby, która odwiedza stronę (nie muszą być one nawet wizualne).

Czy UX można poprawić? Nie. Przynajmniej nie bezpośrednio. Pośrednio można – modyfikując stronę, dopracowując UI (interfejs), usuwająć nadmiar treści czy optymalizująć stronę (nawet developer ma tu swoją rolę). Designer stara się, aby strona była ładna, ale nie zawsze skupia się na tym, jakie emocje wywoła. Czy schowane menu (chociaż ładne) będzie na tyle widoczne, aby nie wprowadzić użytkownika w stan zakłopotania?

 

Czym sie różnią testy UX od IU?

Pomogą tutaj testy na ludziach. Brzmi nieźle 🙂 Chodzi o to, aby ktoś obcy wszedł na stronę i trochę się po niej poruszał.

W przypadku testowania UI patrzysz, czy użytkownik znajduje to co powinien, czy dociara gdzie trzeba.. ogólnie czy obsługa strony nie sprawia mu problemów. Pamiętaj, że niczego mu nie tłumaczysz – sam musi do wszystkiego dojść.

W przypadku UX użytkownik powinien podczas przeglądania strony otwarcie mówić o swoich emocjach. Możesz też oglądać jego twarz, to też sporo mówi. Np. na początku testu poproś, aby mówił na bierząco o swoich odczuciach. Np. jeżeli strona długo się wczytuje to powinien powiedzieć „zaczynam się niecierpliwić”

 

Wszystko jest równie ważne

Pamiętaj, że należy zadbać zarówno o UI jak i UX.

Sam wygląd nie wystarczy. Nie zliczę aplikacji, które były bardzo ładne, ale wyszedłem i nigdy ich nie używałem bo strasznie irytowała mnie ilość kroków do wykonania jakiejkolwiek akcji. Był ładny UI ale tragiczny UX.

To samo w drugą stronę. Nawet jeżeli z czegoś korzysta się bardzo przyjemnie, to liczba użytkowników będzie zdecydowanie mniejsza jeśli nie zadbany o przyjazny wygląd.

 

 

7 wątków o użyteczności stron internetowych

Dlaczego dziś o użyteczności? Ostanio wpadła mi w ręce bardzo ciekawa książka (nazwa na końcu) i muszę przyznać, że bardziej aktualna niż mogłoby się wydawać. Strony są coraz ładniejsze ale często kosztem użyteczności. Poruszmy kilka wątków, które pomogą zapanować nad stroną.

1.Strona główna jest ważniejsza niż myślisz

Strona główna to nie tytyłowa strona albumu. Można ją przyrównać do okładki gazety. Powinna pełnić kilka zadań:

Jeżeli wchodząc na stronę główną nie masz pojęcia czym zajmuje się dana firma – to prawdopodobnie gdzieś popełniłeś błąd. Kiedyś takie informacje trzeba było pokazać tekstowo, dziś mamy większe pole manewru i bardzo pomocne są zdjęcia (które mogą pokazać nie tylko rodzaj działalności ale również wiele emocji).

 

2.Testy wcale nie muszą być skomplikowane

Testowanie zazwyczaj kojarzy się z wieloma osobami, żmudną pracą i toną analiz. Okazuje się, że takie testy można przeprawadzić w bardziej amatorski sposób (oczywiście nie we wszystkich projektach). Poproś kilku znajomych, rodzinę czy kogokolwiek kto danej strony nie zna.

Dobrze gdybyś mógł zobaczyć jak ta osoba porusza się po witrynie. Czy potrafi znaleźć to co chce, lub o co ją poprosisz. Testy powinny być organizowane na jak najwcześniejszym etapie pracy (łatwiej coś zmienić wcześniej, niż później), i dobrze gdyby tych etapów było kilka.

 

3.Mniej treści

Mało ludzi lubi czytać. Jeszcze mniej lubi czytać teksty marketingowe na Twojej stronie. Każdy walczy o czas klienta, a klient wcale tego czasu chętnie nie odda. Długie marketingowe teksty czy opis firmy na kilka stron wcale go do tego nie przekonają… Wręcz przeciwnie. Albo przeczyta początek, albo przestaszy się i ucieknie. Chyba, że jest naprawdę zainteresowany. Zazwyczaj już na starcie można usunąć dużą cześć tekstu bez ingerencji w jej ogólną wartość logiczną.

Równie ważne, aby przedstawiać jednocześnie tylko co to może być przydatne w danym momencie. Jeśli przedstawiasz produkty, to ich opis jest ukryty. Pokazuje się dopiero po wybraniu produktu.

 

4.Wszystko ma być jasne

Gdy użytkownik wejdzie na stronę powinien w ciągu kilku pierwszy sekund wiedzieć:

Dużo spotykam naprwdę bardzo ładnie wyglądających stron. Jako projektant sam jestem w pierwszym momencie zafascynowany. Po chwili jednak chce coś zrobić. Szukam nawigacji, okazuje się, że pojawia się w chwili najechania myszki na lewą/prawą część ekranu (łał, nigdy bym na to nie wpadł). Zaczynam się lekko gubić ponieważ po chwili nie wiem czy przeglądam ofertę czy portfolio… Koniec końców nie zamierzam poświęcać czasu, aby „rozszyfrować” stronę. Zwyczajnie wychodzę.

Wszystko powinno być jasne. Nie powzól aby odwiedzający stronę musieli ją „rozszyfrowywać”. Podaj wszystko jak na tacy.

 

5.Korzystajmy ze schematów

Dlaczego schematy są dobre? Ponieważ każdy je zna. Z tego samego powodu znaki drogowe w Lublinie i w Warszawie są takie same. Gdziekolwiek nie jeździsz, zawsze poruszasz się po ulicach bez problemu. Możesz być pierwszy raz w mieście ale znaki będą takie same, dzięki temu poruszasz się bezproblemowo.

Tak samo jest ze stronami internetowymi. Obowiązują tu różne schematy, których bardzo często warto się trzymać. Użytkownik dzięki temu czuje się pewnie i „panuje nad sytuacją”.

 

6.Ludzie nie czytają, ludzie przeglądają

Projektując stronę zastanawiasz się nad każdym elementem. Wyobrażasz sobię teoretyczną drogę klienta, który najpierw przeczyta nagłówek, później zjedzie do tekstu niżej, następnie przeczyta to co jest dalej etc.

Zazwyczaj mało kto czyta całą treść. Nikt nie ma na to czasu. Wyobraź sobię sytuację, że Janek wchodzi na stronę i myśli: „Hymm.. ale dużo treści na stronie sprzedającej długopisy. Nie mogę się doczekać, aż wszystko przeczytam!”. No raczej nie…

Ludzie wchodzą na stronę po to, aby znaleźć tam informacje, których oni szukają (a nie, aby poczytać co jest). Należy im to możliwie uprościć., „pogrubić” ważne informacje i przedstawiać treść w taki sposób, aby było wiadomo czego dotyczy.

 

7.Ogarnij linki

To jest problem, który rośnie chyba proporcjonalnie do „ładności” strony. Czym bardziej wybajerzona, tym trudniej połapać się co jest zdjęciem, co jest linkiem, a co jest zwykłym tekstem.

Ostanio coraz częściej zaczynam przeglądanie strony od machania myszką po jej całej zawartości, czekająć aż ikonka myszki zmieni sie w łapkę (która oznacza, że element jest linkiem).

 

Btw. gdybyś chciał bardziej zagłębić się w ten temat, to polecam książkę „Nie każ mi myśleć – o życiowym podejściu do funkcjonalności stron internetowych” Steve Krug