Własny blog – cz.4

Ten odcinek będzie inny i bardziej uniwersalny od poprzednich. Poprzednie są stare – nieco zmienił się wygląd panelu WordPressa, a i pod amigowymi przeglądarkami jest problem z jego obsługą. Poza tym skupiłem się do tej pory na darmowym WordPressie (domena i hosting w wordpress.com), nie dotykając zagadnienia stworzenia strony wybierając inny hosting i własną domenę. Chcę też wspomnieć o zasadach komponowania strony – bo być może ktoś zechce stworzyć stronę w oparciu o coś innego niż WordPress, a zasady są uniwersalne.

Inspiracją była dla mnie mój ostatni projekt amiga.org.pl

Wybór dostawcy hostingu

Hosting to usługa składowania. Płacimy za przechowywanie swoich treści na serwerze danej firmy. Większość dostawców oferuje gratis własny adres, ale zazwyczaj jest mało ciekawy albo za długi. Przydaje się na początku w fazie testowania, ale polecam zakupić konkretną domenę.

Ja wybrałem dostawcę kylos.pl. Dobre ceny (najprostszy pakiet to 49 zł za rok) i dobra pomoc techniczna. Mają bardzo duży wybór systemów do wyboru w cPanel ale szybko doszedłem do tego dlaczego jednak znów wybiorę WordPress. Zwyczajnie jest najlepszym kompromisem między łatwością obsługi a możliwościami. Joomla i Drupal są bardziej wymagające, a reszta to egzotyka. A dobrze jest mieć regularnie rozwijany system, z dużą ilością wtyczek, spolszczony, i do tego popularny (łatwo o rozwiązywanie problemów).

Zakup domeny

Każdy dostawca hostingu oferuje domeny, także spoza jego własnej puli – ale wtedy jest pośrednikiem. Prawie zawsze opłata za domenę podwaja się po pierwszym roku, poza tym tak naprawdę nie jesteśmy jej właścicielami – płacimy „myto” co roku i tyle.

Polecam zakup na aftermarket.pl. Jest to giełda domen, jak ktoś jest sprytny to może nawet zarobić na kupnie i odsprzedaży domeny – bywały spektakularne przejęcia, zwłaszcza gdy dotychczasowy właściciel nie dopilnował sobie opłat.

Stawianie strony

Panel klienta wygląda różnie u różnych dostawców, poniżej cPanel z kylos.pl.

cpanel_glowna

Wspomniany cPanel dał mi możliwość instalacji WordPressa, ale próbowałem wgrywać własny (przez FTP) i efekt niczym się nie różni. WordPress i tak aktualizujemy od strony admina strony zrobionej na nim, nie w cPanel.

Na tym etapie pamiętać trzeba że jest wyznaczony katalog gdzie można wgrywać i reszty nie należy kasować. Są dostawcy gdzie odtwarzane jest to automatycznie, niestety w kylos tak nie było. Instalując własny WordPress wyczyściłem wcześniej wszystko (zwyczajnie wymazałem w trybie FTP pod Total Commanderem), a to rodziło problemy z połączeniem z bazą danych. Trzeba było założyć konto od nowa, pracownik techniczny to za mnie zrobił i wgrał mi WordPress tak jak chciałem

Tak że nie polecam nic zmieniać poza zawartością katalogu który wytłuściłem. Cała zawartość poniżej.

.cl.selector\
.cpanel\
.cphorde\
.htpasswds\
.softaculous\
.trash\
etc\
logs\
mail\
public_ftp\
public_html\
tmp\
www\
.bash_logout
.bash_profile
.bashrc
.contactemail
.lastlogin
.zshrc
dailyreport_off

To wygląd od strony FTP. W panelu klienta zaś należy utworzyć bazę danych. Niestety tak musi być, nie rozumiem tego ale każda strona ma przypisaną własną bazę, ma ona swoją nazwę użytkownika i hasło. Trzeba to pamiętać.

Parkowanie domeny

Jestem w tym miejscu: zainstalowałem WordPress (z instalatora Softaculous w cPanel) i ustawiłem kupioną domenę wg poradnika (dostawcy kylos), tzn. jako „Domeny zaparkowane” (nie miałem dostępnej opcji „Domeny podpięte”).

Teraz trzeba ustawić od strony gdzie domena leżała do tej pory, czyli jak u mnie kupiona w aftermarket:

domena_parkowanie

Ustawienia na obrazku są w aftemarket, natomiast pola DNS które trzeba wpisać – to podaje dostawca hostingu strony gdzie ona docelowo będzie leżeć (dla mnie – kylos).

Trzeba to zrobić – bez tego ustawienia u dostawcy hostingu nie zadziałają, musi być z obu stron to ustawione.

Szczerze to najlepiej powiązać wcześniej, a już zaparkowaną domenę wpisać na etapie instalacji WordPressa:

domena_powiazanie

WordPress trzeba zainstalować bezpośrednio w katalogu, nie w podkatalogu /wp

Następnie ustawić po stronie aftermarket:

domena_przekierowanie

Jest to bardzo zamotane, prawda? Dlatego raz ustawione nie dotykać.

Zarządzanie stroną

Ja wspomniany cPanel widziałem tylko raz – gdy tworzyłem tam bazę danych – i nie mam ochoty tam zaglądać. Wszystko robię z poziomu admina logując się w panel administracyjny WordPress.

Instalacja wtyczek

Jest więcej możliwości niż w darmowym WordPressie (tzn. hostowanym na wordpress.com, np. blog który czytasz jest takim). Można instalować dowolne, i jest to wygodnie rozwiązane „jednym kliknięciem”.

Poniżej jak wygląda u mnie panel „zainstalowane wtyczki”

wtyczki_panel

Są wtyczki do wszystkiego – do statystyk, do robienia kopii zapasowej strony, dające przyciski do dzielenia się na portalach społecznościowych, uszczelniające przed atakami, sprawdzające czy któreś linki na podstronach nie wygasły – i tak dalej. Tu już każdy znajdzie ulubione, ja rekomenduję jedynie Wordfence – absolutnie niezbędna dla mnie. Podaje kto, kiedy i po co odwiedza stronę, a nawet jak po niej „łazi” – pozwala to nakładać indywidualne blokady (np. na spamerów), ale też dostosowywać stronę zgodnie z oczekiwaniami odwiedzających (Wordfence – wybrana zakładka LiveTraffic, a  w wynikach kategoria Humans i pozycja „See recent traffic). Żeby chronić dane osobowe odwiedzających pokażę inną zakładkę – Pages Not Found czyli strony nieodnalezione. Jak widać ciągle są przeczesywane adresy starej wersji amiga.org.pl. i to takie których nie ma nawet w wayback. To mało pocieszająca informacja dla mnie.

wordfence_traffic

O wtyczkach trzeba wiedzieć że:

  • nie są dostępne w darmowych blogach na wordpress,com
  • wiele z nich musi być stale aktualizowanych ze względów bezpieczeństwa
  • niektóre nich przeszkadzają sobie nawzajem (częste w przypadku wtyczek typu SEO czy też modyfikujących wygląd szablonów)
  • mogą być źródłem błędów (np. wtyczka Copyfight u mnie zmienia kodowanie na stronie głównej „wykrzaczając” polskie znaki diakrytyczne; nie jest to do usunięcia w trybie edycji kodu strony bo nawet nie jest tam widoczne)
  • niektóre wtyczki do działania wymagają umocowaniu na stronie – są widgetami

Mój zestaw jest bardzo oszczędny: Wordfence Security, Akismeta, WP Statistics, Broken Link Checker i Dropbox Backup & Restore.

Jak widać znalezienie dobrego hostingu i kupno domeny to najprostsze czynności. Najwięcej trudności to ustawienie tego wszystkiego aby było gotowe do pracy.

Zostawmy WordPress – nie każdy go używa – czas coś powiedzieć na temat kompozycji strony.

Rozłożenie treści: menu, pomysły na zawartość – można zrobić to w edytorze tekstu. Poniżej rozpisany koncept strony amiga.org.pl w pierwotnej wersji:

amigaorg_szkic

To się zmienia, może się ukazać np. że dane zagadnienie nie ma co rozciągać na 3 artykuły, i wyjdzie asymetryczne rozłożenie treści. Można wogóle zrezygnować z klasycznego menu, rozwiązać to przez klikalne grafiki, czy inny bardziej oryginalny sposób.

Zawartość i układ witryny  można planować poprzez „mapę myśli” (są programy, ale najwygodniej na kartce), schemat blokowy, czy jak komuś wygodnie. Można wogóle to odpuścić, i jechać „na żywca” porządkując stronę w miarę przybywania treści.

Jak tworzyć stronę żeby była atrakcyjna

Moja pierwotna koncepcja dla amiga.org.pl musiała zostać zweryfikowana.

Spartański szablon bez motywów graficznych, można powiedzieć duża biała czcionka na ciemnym tle – i nic ponadto. Do tego zwięzła treść, tylko kluczowe obrazy. Zostałem posądzony o lenistwo, a nawet że strona jest lipna (najbardziej dosadne określenia to chyba „kupa” i „przybudówka SEO”).

Wygląd początkowy:

emulacja - amiga.org.pl 2016-02-29 16-24-44

Strona ma logiczne menu, przejrzystą strukturę, ale ma zasadniczą wadę. Wygląda dobrze tylko na urządzeniach mobilnych.

Im mniejszy ekran tym strona prezentuje się lepiej. Grupą docelową miały być osoby które usłyszały o Amidze – wejść i szybko zorientować się co to jest i jak tym się bawić współcześnie.

Niestety moje założenie jest obarczone kilkoma wadami:

  • nie uwzględnia tego jak strona będzie prezentować się na dużych ekranach np. 22 cale i więcej – a prezentuje się źle, czcionka jest za duża a wiersze wąskie
  • nie uwzględnia „stałych czytelników” – daje treści na start, ale układ strony na dłuższa metę byłby nie do przyjęcia dla osób które zaglądałyby często w poszukiwaniu nowych treści

Co można zrobić? Oczywiście tak prostą stronę można przenieś na zwykły HTML, ale to nas odcina od wtyczek, a wtyczki są świetne. Poza tym pielęgnowanie własnego kodu jest czasochłonne.

Zmniejszyć czcionkę wtyczką?

Niestety nie da się ustawić czcionki „tak jak w Wordzie”. Ona jest zdefiniowana w kodzie szablonu. Są narzędzia do ustawiania, tylko mają zasadniczą wadę: taka wtyczka musi być cały czas włączona w panelu admina. Jeśli kiedyś wyjdzie nowy WordPress a wtyczka stanie się niekompatybilna (nieaktualizowana) to jesteśmy załatwieni – wracamy do punktu zero. Są dobre wtyczki ale płatne – w tych darmowych są niedogodności typu ustawianie każdej strony oddzielnie, czy możliwość zmiany tylko 2 czcionek. Z rozbudowanych funkcji w tych płatnych warto wspomnieć o możliwości definiowania dosłownie wszystkiego, praktycznie powstaje nowy szablon.

Zmienić motyw graficzny?

Przykładowo motyw z obrazka wyżej to Cyanotype – wybrany spośród  828 które spełniły dwa kryteria: „jednokolumnowe” i „responsywne”. 90% odrzuciłem bo zwyczajnie nie nadawały się na normalną stronę – były typowo pod bloga, a często posiadały jakieś dziwaczne rozwiązania beznadziejne dla odbiorcy np. szara czcionka na białym tle. Szablon (czyli Motyw) można edytować, no ale to trzeba wiedzy do tego. Z ciekawości przekleiłem kod powyższej prościzny do edytora Word (tak wiem że on nie służy do tego, chcę zobrazować objętość kodu w stronach) i wyszło ich 165. Tak, tyle stron kodu.

Prawdopodobnie zdecyduję się na motyw blackolors, ponieważ daje dużo opcji własnych ustawień bez grzebania w kodzie.

Tu muszę zaznaczyć że to nie jest tak że zmiana kliknięciem motywu i gotowe. Często coś się wtedy rozjeżdża przy ponownym formatowaniu, a i menu nieraz trzeba robić od nowa.

A co z tymi ludźmi którzy siedzą na urządzeniach mobilnych? Miała być to znacząca grupa odbiorców, po zastosowaniu zwykłego motywu jak im ułatwić życie?

Kluczowy jest przycisk przenoszący na górę strony, bo przewijanie na małym ekraniku do górnego menu bywa frustrujące. W edycji strony trzeba przełączyć się z trybu wizualnego na tekstowy i wpisać na dole strony kod.

Przykładowe rozwiązanie:

[ ↑ ]
Zabierz mnie na górę!

A co się tyczy pierwotnej koncepcji – chciałbym kiedyś zrobić „apkę” w oparciu o jQuery Mobile i PhoneGap. Aplikację wyglądającą jak strona offline, minikompendium, darmowe. No i jest pewność że odbiorca docelowy obejrzy to w takiej formie jak była zaplanowana.

Wygląd strony na urządzeniach mobilnych można sprawdzić np. tutaj: http://youresponsive.com/

Kilka uwag na temat designu

  • design to nie wygląd czegoś, tylko jak coś razem „zagrało”
    design jako taki jest przezroczysty, przykładowo przycisk na stronie jest fajny nie bo ma taki kolor, kształt i t.p., tylko że to razem zagrało
  • projektując stronę trzeba stworzyć profile użytkowników odwiedzających; kilku różnych; następnie przeanalizować jak taki użytkownik zachowywałby się na stronie – czego szukał, w co klikał
  • projekt rozrysować wstępnie na kartce – takie rzeczy jak kroje czcionek czy kolory to na samym końcu
  • w sumie chodzi o to by ustalić jakich informacji i w jaki sposób będą szukać odwiedzający
  • najpierw musi być funkcjonalne, potem pracuje się nad oprawą
  • czcionki na ekran a do druku wybiera się inne
    warto tez wiedzieć które pasują do siebie nawzajem
  • SEO (Search Engine Optimization)
    ze znaczników:
    title – musi mieć konkretną nazwę a nie domyślną typu „strona firmy”
    meta – ważny jest description, w nim opis strony do 200 znaków
    ta treść będzie pokazana w wynikach Google pod linkiem
    pozycję strony podnosi linkowanie do niej z innych stron, zwłaszcza przez uznane serwisy
    warto zadbać by nazwy odsyłaczy czy podstron (w tym w linkach) miały nazwy dobrze indeksujące się i mające związek z profilem strony
    to samo tyczy się nazywania plików grafik – dużo osób szuka treści przez wyszukiwanie obrazem; czyli znaczniki img i alt
    nawet nagłówki H1 i t.d, oraz wytłuszczone i pisane kursywą słowa są traktowane jako ważne na stronie, co można wykorzystać do lepszego indeksowania
  • zasady kompozycji (jak przyciągnąć wzrok); nie jest powiedziane że wszystkie środki muszą być użyte naraz
    dominacja – coś co przyciąga uwagę
    podobieństwo – kształtów, kolorów
    rytm – powtarzalność podobnych elementów
    faktura – wrażenie przestrzenności w sensie namacalności, chce się dotknąć
    kierunek – wspólne dla elementów
    kontrast – dla uwypuklenia co ma być na wierzchu a co w tle, co jest ważne
  • hierarchia wizualna
    zasady proporcji dobrze jest znać, ale projektowania – musi się znać (a propos punktu wyżej)
    sprawa hierarchii – układ treści na blogu – oddzielne sekcje: te poszczególne sekcje określają nie ważność ich (która ważniejsza) ale różnice między nimi
    hierarchia jest wewnątrz każdej z sekcji
    design strony to wyrażanie i odróżnianie różnych informacji
    przestrzeń negatywowa – to przestrzeń która nic nie zawiera, im więcej przestrzeni negatywowej wokół czegoś tym to coś wydaje się ważniejsze
  • tabela – niech nie zawierają kresek rozdzielających, to wprowadzanie dodatkowych informacji, przecież dane już są na przestrzeniach negatywowych; jak już to lekkie wyszarzenie co drugiej linii
  • treść bloga – ten sam krój czcionki, ważność ustawiajmy grubością i wielkością czcionki. a nie kursywą czy zmianą kroju; umiejętnie wykorzystać pisanie kapitalikami; oszczędnie korzystać z elementów graficznych
  • jak coś wpadnie w oko – np plakat – przyjrzeć się jak autor ustawił hierarchię informacji, jak je rozróżnił między sobą; co spowodowało że ten plakat jest fajny

Powyższe uwagi to esencja, wynotowana przeze mnie po lekturze z książki „Design dla hakerów”. Jest tam szczegółowo przedstawione wiele pomniejszych zagadnień (np. dobór palety barw w mapce dla daltonistów).

Czasy klasycznych edytorów (np. mój ulubiony NetObject Fusion) mijają. Teraźniejszość to systemy CMS. Niestety, ale WordPress przy całej swej wygodzie nie polecam jeśli chce się mieć indywidualny wygląd strony. Trzeba uczyć się – kolejno: HTML 5, CSS3, Javascript; nie zawadzi poznać PHP. To w zasadzie minimum jeśli myśli się o stworzeniu strony samodzielnie, od zera.

Promowanie strony

Wartościowa strona promuje się sama. Tu miałem trudniej ponieważ dosyć dobrze była zindeksowana stara wersja strony (w sensie adres). I to nie byłby problem, wręcz zaleta, tylko że zostało to przykryte przez podawanie tego adresu w setkach innych stron, które wiszą w sieci np. 10 lat. Przez to na nową wersję, moją, amiga.org.pl,. żeby trafić trzeba przejrzeć po wpisaniu „amiga.org.pl” 14 stron wyników Google by znaleźć… nic. Jakby nie istniała. Działa tylko wpisywanie w pasek adresu.

Stronę zgłosiłem do Google, Bing, Yandex, wklejając też wymagany odpowiedni fragment w kod strony. Po 2 tygodniach Yandex i Bing już zindeksowały dobrze. Crawlery (roboty indeksujące) wszelkiej maści szalały. Po miesiącu miałem ok. 1500 wejść i 5 tys. odsłon ale to były „śmieciowe” wyniki. Strona dalej była nieodnajdywalna, a wejścia – nie były „ludzkie” tylko robotów indeksujących.

Kluczowe jest zareklamowanie strony w „branży”. News na PPA dał mi przez 3 dni tylko 480 wejść i około 2 tys, odsłon, ale dało mi to wynik nr 1 w Google (a w zasadzie dla newsa na PPA). Strona w sieci dalej nie istnieje. Wejścia po „newsie” to tylko 2 dni są, ale ma to niewielki plus, bo teraz będę mógł spokojnie dalej w niej dłubać.

Konieczne jest pisanie obszernych i ciekawych artykułów. Wtedy strona sama wyjdzie na wierzch ale to może trwać nawet kilka lat. Dlatego bardzo ważne jest żeby nasza strona była klikana z linków z innych stron. Jak również zawierała unikalne treści.

Jeżeli wybierzemy za szeroką tematykę – teksty tracą na jakości. Rozwiązaniem jest zaproszenie do współpracy innych osób, które potrafią ciekawiej opisać swój ulubiony temat. Dobrze jest też mieć życzliwe osoby mogące dostarczyć dobrej jakości i unikalnych fotografii.

Czy będzie coś dalej?

Nie.

Szkółka „Własny blog w sieci” miała za zadanie zachęcić do postawienia własnego bloga przez innych amigowców. Nic takiego przez lata nie zauważyłem. Artykuły miały zresztą znikomą oglądalność (np. odcinek 3 – za 2015r. odsłon aż 9).

Dzisiejszy bonusowy odcinek jest jakby rozliczeniem się z ostatniego mojego projektu, ale bardziej chęcią pokazania zaplecza na nieco wyższym poziomie jak pierwsze 3 odcinki, i nieco innych problemów do rozwiązywania.

Jeżeli kiedykolwiek będzie u mnie jakaś szkółka czegokolwiek – to raczej w formie wideo. No ale to bardzo odległy temat jest na razie.

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s