Kurs tworzenia aplikacji webowych i stron internetowych, cz. 2. Własny blog od ręki

Tworzenie strony i jej cel

Przy tworzeniu strony WWW ważny jest pomysł. Należy zadać sobie pytanie, co nasza strona ma zawierać, o czym ma być, do jakich osób chcemy dotrzeć i co przez to osiągnąć. Zdecydowanie najlepiej jest tworzyć strony na tematy, które nas interesują. Jeśli spełnimy ten warunek, będzie nam łatwiej, bo dodawanie treści i dbanie o wygląd witryny będzie sprawiało nam przyjemność i pozwoli nam rozwijać pasję i dzielić ją z ludźmi o podobnych zainteresowaniach. Wtedy praca nad stroną będzie bardziej przyjemnością niż pracą. Chociaż, oczywiście, im bardziej będziemy zagłębiać się w temat tworzenia stron, tym więcej będzie pojawiać się trudności i z czasem okaże się, że potrzebujemy bardziej zaawansowanych narzędzi – poznamy je w kolejnych rozdziałach.

Sprawdzamy kod strony

Wszyscy korzystamy z przeglądarek graficznych, więc strona internetowa jest dla nas po prostu graficzną interpretacją kodu, który jest wszyty w backendzie strony. To właśnie interpretując ten kod, przeglądarka zamienia setki linijek tekstu z różnymi znaczkami na czytelną dla nas witrynę, która jest interaktywna. Jeśli jesteśmy ciekawi, jak wygląda kod strony internetowej, którą aktualnie przeglądamy, możemy to łatwo sprawdzić. Oto, jak to zrobić za pomocą przeglądarki Google Chrome (w innych przeglądarkach opisane kroki są podobne).

1. Uruchamiamy przeglądarkę i wchodzimy na witrynę, której kod chcemy sprawdzić.

2. Następnie klikamy prawym przyciskiem myszy na wolną przestrzeń strony i wybieramy z menu dialogowego opcję Wybierz źródło strony.

3. Strona główna witryny komputerswiat.pl ma ponad 6000 linii kodu. Jest to bardzo rozbudowana witryna, która ma w sobie osadzone różnego rodzaju odnośniki, grafiki, filmy oraz reklamy. Nasza pierwsza strona nie będzie aż tak efektowna, ale przeglądanie różnych witryn może być inspirujące.

Proste narzędzie na początek

Nowe strony są tworzone za pomocą HTML5, CSS 3, JavaScriptu. Ale jeśli nie znamy się w ogóle na programowaniu, nie musimy załamywać rąk. Początkujący mają do wyboru całkiem sporo łatwych w obsłudze narzędzi. Najprościej jest skorzystać z serwisu blogowego, takiego jak Blogger, opisanego na kolejnych stronach. To kreator typu SaaS, czyli oprogramowanie jako usługa działająca online, w oknie przeglądarki. W przypadku takich kreatorów użytkownik nie musi niczego instalować po swojej stronie i wykonuje wszelkie operacje przez internet, a serwer, pliki i inne dane znajdują się w chmurze usługodawcy. Bardziej zaawansowanym narzędziem, wciąż jednak ogromnie ułatwiającym tworzenie stron internetowych, jest WordPress omówiony w kolejnym rozdziale. WordPress jest najpopularniejszym i darmowym CMS-em, czyli systemem zarządzania treścią. Gdy korzystamy z takiego narzędzia, w ogóle nie interesuje nas kod strony, musimy jedynie wprowadzać tekst i nim zarządzać, ewentualnie dodając elementy graficzne. Takie rozwiązanie pozwala na utworzenie własnej strony szybko, sprawnie i bez znajomości programowania. Zdecydowanie najbardziej popularne w wypadku blogów są narzędzia typu CMS, choć podejście SaaS zdobywa coraz więcej zwolenników ze względu na brak konieczności utrzymywania serwera.

Tworzymy bloga krok po kroku

Zakładamy, że chcemy stworzyć bloga o tematyce kulinarnej, który ma być prosty w tworzeniu i utrzymaniu. Takie zadanie łatwo zrealizujemy za pomocą serwisu Blogspot.

Uwaga! Stronę w serwisie Blogger najlepiej tworzyć w przeglądarce Chrome, Firefox, Safari lub MS Edge. Są to przeglądarki oficjalnie wspierane i zatwierdzone przez twórców.

1. Otwieramy jedną ze wspieranych przeglądarek, na przykład Google Chrome, i wchodzimy na stronę: www.blogger.com. Po załadowaniu strony klikamy na Utwórz bloga na środku ekranu.

2. Następnie logujemy się za pomocą konta Google. Jeśli go nie mamy, musimy najpierw je założyć.

3. W kolejnym oknie podajemy tytuł naszego bloga i klikamy na Dalej.

4. Następnie musimy podać adres naszej strony – jest to bardzo ważny krok, gdyż to właśnie po tym adresie inni użytkownicy sieci będą mogli trafić na naszego bloga. Dobrym pomysłem jest zawarcie w adresie tytułu bloga. Jeżeli podany adres będzie dostępny, możemy kliknąć na przycisk Dalej, by przejść do kolejnego kroku.

5. Określamy naszą nazwę użytkownika – to pod tą nazwą nasze wpisy poznają czytelnicy bloga. Po podaniu nazwy klikamy na Zakończ.

6. Po chwili nasz blog zostanie utworzony i zostaniemy przeniesieni do panelu zarządzania treścią.

7. Po kliknięciu na polecenie Wyświetl bloga po prawej stronie ekranu zostanie wyświetlona nasza strona. Domyślnie nasz blog będzie zawierał jedynie tytuł oraz informację o wykorzystywaniu plików cookie. Na tym etapie już będzie on widoczny dla wszystkich użytkowników w sieci. Teraz możemy przejść do tworzenia treści dla naszej strony.

Dodajemy wpisy do naszego bloga

Zanim przejdziemy do zmiany układu lub motywu naszego bloga, najlepiej jest dodać kilka wpisów. Mogą być to dowolne treści, nawet niezawierające żadnych istotnych treści. Pierwsze wpisy posłużą nam do przetestowania różnego typu układów oraz motywów w późniejszym etapie. Dzięki takim próbnym postom będziemy mogli zdecydować się, jak finalnie wizualnie ma wyglądać nasz blog i zaczniemy tworzyć właściwe posty.

1. Po przejściu do panelu zarządzania blogami wybieramy nasz blog, a następnie klikamy po lewej stronie na Nowy post.

2. Uruchomiony zostanie edytor postów. Wyglądem bardzo przypomina edytory tekstu takie jak Microsoft Office lub inne tego typu. Dzięki temu praktycznie każdy użytkownik będzie mógł bez problemu tworzyć treść.

3. Pamiętajmy, aby zawsze dodawać tytuł naszego postu – dzięki temu łatwo będzie później nimi zarządzać. Wprowadzając treść bloga, korzystajmy z różnych stylów, na przykład Nagłówek, Akapit, Podtytuł – łatwiej będzie nam formatować tekst.

4. Do postu możemy dodawać również obrazy oraz filmy wideo. W celu dodania obrazu klikamy na pasku narzędziowym na ikonę obrazu, a następnie wybieramy źródło zdjęcia.

5. Jeśli mamy bibliotekę zdjęć w usłudze Google Zdjęcia, będziemy mogli szybko wstawiać zdjęcia na bloga.

6. Po prawej stronie możemy, korzystając z funkcji Lokalizacje, wskazać miejsce związane z tworzonym przez nas postem. Jest to istotne, zwłaszcza gdy tworzymy post związany z jakąś konkretną lokalizacją.

7. Gdy już zakończymy edytowanie postu, klikamy w prawym górnym rogu na Opublikuj. Jeśli nie jesteśmy pewni, czy post nie ma błędów, nie musimy się martwić, gdyż w każdej chwili będziemy mogli wyedytować jego treść.

8. Następnie klikamy na Potwierdź.

9. Po chwili nasz post zostanie opublikowany i będzie widoczny w oknie zarządzania blogiem. Klikając na niego w tym oknie, od razu przejdziemy do ponownej edycji.

10. Jeśli chcemy przejść do naszego postu i sprawdzić, jak się prezentuje dla każdego czytelnika, wystarczy, że wejdziemy na adres naszego bloga, a następnie klikniemy na Czytaj więcej przy naszym nowo dodanym poście.

Zarządzamy motywem naszego bloga

Domyślnie sporą część bloga zajmuje przestrzeń z profilem użytkownika zlokalizowana po lewej stronie. Jest to spowodowane wyborem konkretnego motywu dla bloga. Możemy pozbyć się tego paska poprzez zmianę motywu lub zarządzanie układem. Dodatkowo, zmieniając motyw, możemy dopasować go bardziej do tworzonych przez nas treści i w ten sposób sprawić, że czytelnicy będą lepiej odbierali tworzone przez nas treści.

1. Przechodzimy do panelu zarządzania naszym blogiem i po lewej stronie klikamy na Motyw.

2. Następnie po prawej przewijamy do motywu, który nam odpowiada, i klikamy na niego. Alternatywnie możemy kliknąć na Więcej takich motywów, aby sprawdzić więcej motywów danego typu.

3. Po wybraniu konkretnego motywu możemy kliknąć na Podgląd w celu sprawdzenia, jak nasz blog wyglądałby z danym motywem. Jeśli nam się podoba, klikamy na polecenie Zastosuj.

4. Potwierdzamy wybór nowego motywu, klikając na OK.

Dostosowywanie motywu

Jeśli chcemy jeszcze bardziej dopasować motyw do naszych potrzeb, po wybraniu po prawej stronie w panelu zarządzania pola Motyw po lewej przy naszym motywie klikamy na Dostosuj. Możemy w tym oknie wybrać obraz tła lub główny motyw kolorystyczny. Żeby dokonać zmiany, wystarczy kliknąć na jedną z opcji, a następnie wskazać na przykład kolor. Możemy również wprowadzać bardziej zaawansowane zmiany dotyczące motywu, które będą miały wpływ na czcionkę, kolor tekstu, kolor tła i wiele innych parametrów. W celu zapisania zmian w naszym motywie należy w dolnym prawym rogu kliknąć na ikonę zapisywania.

Układ strony

W panelu zarządzania możemy również przejść do edycji układu danego motywu. Jest on różny dla różnych motywów. Dlatego warto najpierw wybrać odpowiadający nam motyw, a dopiero potem popracować nad jego układem.

1. W celu zmiany układu należy po lewej stronie panelu zarządzania kliknąć na Układ.

2. Następnie po prawej stronie pojawi się okno z różnego rodzaju prostokątami, które nazywane są gadżetami. Odpowiadają one za pola tekstowe i interaktywne na naszym blogu. Możemy je dowolnie przenosić, przytrzymując i przeciągając w nowe miejsca. Dodatkowo możemy również edytować konkretne gadżety.

3. Edytując gadżet Posty na blogu, możemy na przykład zdecydować, ile postów będzie wyświetlanych na stronie głównej, ile komentarzy będzie widocznych, czy będą widoczne przyciski udostępniania, a nawet czy między postami mają być wyświetlane reklamy (musimy wcześniej przeprowadzić konfigurację w karcie Zarobki).

4. Po zakończeniu edycji konkretnego gadżetu należy przewinąć widok do samego dołu okna i kliknąć na Zapisz.

Aktywujemy reklamy dla bloga

W przypadku korzystania z serwisu Blogger dodawanie możliwości wyświetlania reklam jest bardzo proste. Wystarczy przejść do zakładki Zarobki i przeprowadzić konfigurację. Należy jednak pamiętać, że zbyt duża ilość reklam może odstraszać naszych czytelników lub uniemożliwiać im komfortowe czytanie tworzonych przez nas treści. Należy zachować balans pomiędzy treścią a ilością reklam. Bardzo aktywne blogi pozwalają na uzyskiwanie stabilnych dochodów co miesiąc. Możemy więc, tworząc bloga, dzielić się naszymi pasjami z innymi, a jednocześnie na tym zarabiać.

1. W panelu zarządzania przechodzimy do zakładki Zarobki.

2. Następnie po prawej stronie klikamy na Utwórz konto AdSense.

3. Wypełniamy formularz rejestracyjny i klikamy na dole strony na Utwórz konto. Pamiętajmy o wyborze odpowiedniego kraju dla naszych odbiorców – dzięki temu reklamy będą lepiej dostosowane.

4. Jeśli wyraziliśmy zgodę na spersonalizowaną pomoc, AdSense samo będzie zarządzać reklamami i umożliwi ich wyświetlanie na wszystkich urządzeniach. Po zapoznaniu się z informacjami klikamy na Wypróbuj.

5 Następnie podajemy adres i tworzymy profil płatności, a potem czekamy na zakończenie automatycznej konfiguracji.

Uwaga! Taka konfiguracja możę potrwać nawet kilka dni.

Nazwa domendowa

Korzystając z gotowych rozwiązań typu Blogger, musimy liczyć się z tym, że nasz blog będzie zlokalizowany na subdomenie. Oznacza to, że jeśli chcielibyśmy, aby nasz blog miał adres kolorykuchni.com, to po skorzystaniu z Bloggera będzie miał adres kolorykuchni.blogspot.com. Jeżeli zależy nam na prywatnej domenie, musimy zapłacić jednej ze stron hostingowych. Możemy to również zrobić bezpośrednio z serwisu Blogger. 1. Po lewej stronie w panelu zarządzania blogiem klikamy na Ustawienia.

2. Teraz po prawej stronie przewijamy widok do pola Publikowanie i klikamy na Domena niestandardowa.

3. Jeżeli mamy już zakupioną domenę, możemy przekierować na nią naszego bloga, jeśli nie – klikamy na Kup domenę.

4. Zostaniemy przeniesieni do serwisu Google Domains, gdzie możemy kupić odpowiadającą nam domenę. Wystarczy wybrać adres oraz rozszerzenie i wnieść opłatę za rok z góry.

BEZPIECZNY BLOG

Jeśli zależy nam na bezpieczeństwie naszym i naszych użytkowników, koniecznie aktywujmy opcję przekierowania HTTPS. Dzięki temu jeśli ktoś będzie chciał odwiedzić naszą witrynę poprzez link z HTTP, co może narazić go na wyciek danych, od razu przekierujemy go na szyfrowaną wersję HTTPS.

1. W panelu zarządzania blogiem po lewej stronie klikamy na Ustawienia.

2. Następnie po prawej stronie w opcji HTTPS aktywujemy opcję Przekierowanie HTTPS.