Dzisiejszym wpisem odpowiadam na wasze prośby o to, by opisać jak stworzyć portfolio testera w formie strony internetowej. Prosiliście o taki wpis w komentarzach do tekstu Waldka na temat portfolio. Instrukcja co umieścić jest już opisana, dlatego ja dzisiaj opisuję jak to zrobić, by stworzyć z tego stronę internetową.
Wpis ten podzielę na dwie części. W pierwszej przeczytasz o tym czym jest WordPress oraz przejdziesz przez kreatora zakładania konta. Druga część wpisu będzie pokazywać krok po kroku jak stworzyć stronę z portfolio testera.
Co to jest ten WordPress?
WordPress to system zarządzania treścią (CMS), dzięki któremu możesz stworzyć własną stronę internetową bez znajomości programowania. Znajomość CSS i HTML-a może pomóc Ci w dodaniu do strony pewnych efektów wizualnych. WordPress jest jednym z najpopularniejszych CMS-ów, ale są też inne np. Joomla. Ja używam WordPress i na nim oprę ten wpis.
Dużą zaletą WordPressa jest możliwość instalowania do niego wtyczek i motywów. Sam CMS daje możliwość tworzenia stron statycznych i prostego ostylowania ich. Użycie wtyczek pozwala na rozszerzenie jego możliwości o funkcjonalności sklepów, kalkulatorów, formularzy i czego sobie zapragniemy. Wybór motywu decyduje o ostylowaniu strony bez pisania css-ów. Motyw wpływa na to, jak będzie wyglądać menu, stopka, nagłówek, jaka będzie kolorystyka strony.
Hosting i domena
Sam WordPress to kod. Strona internetowa poza kodem potrzebuje dwóch rzeczy: hosting i domenę. Hosting to inaczej miejsce na dysku serwera, to tu umieszczone są pliki WordPress. Domena to najprościej mówiąc adres strony internetowej wskazujący na twój hosting.
Jaki WordPress powinieneś użyć do portfolio .com czy .org?
Istnieją dwie wersje WordPress .org i .com. Jak same końcówki mówią, org to organizacja non profit, .com to rozwiązanie komercyjne. Poniższa tabelka pokazuje, jakie są między nimi różnice.
| WordPress.org | WordPress.com ( w wersji darmowej) | |
|---|---|---|
| Domena | Musisz zakupić, koszt zależy od sprzedawcy ok. 15 zł na rok. Zaletą jest to, że wybierasz dowolną wolną domenę. | W darmowej wersji nie można instalować dodatkowych wtyczek. |
| Hosting | Musisz zakupić, koszt zależy od dostawcy, ale przyzwoity hosting z darmowym ssl można zakupić za 99 zł na rok. | W ramach konta. |
| Wtyczki | Można dowolnie doinstalowywać i dopisywać własne. Niektóre wtyczki są całkowicie darmowe, niektóre mają za darmo część funkcjonalności dostępnych, a za resztę trzeba zapłacić. | W darmowej wersji nie można instalować dodatkowych wtyczek. |
| Dostęp do kodu | Jest. | Nie ma. |
| Motywy | Podobnie jak wtyczki, możesz wgrać pobrany z sieci lub wybrać z setek dostępnych na liście. Większość motywów ma wersję płatną i bezpłatną. | W ramach darmowego konta możesz wybrać spośród kilku podstawowych motywów. |
| Dostęp do FTP i bazy danych | Jest, ponieważ hosting należy do Ciebie. | Nie ma. |
| Reklamy na stronie | Tylko jeśli sam sobie zażyczysz. | Reklamy są dodawane w wersji bezpłatnej. |
Strona portfolio jest bardzo podstawowa, jeśli chodzi o funkcjonalności. Jeśli zależy ci na bezpłatnym rozwiązaniu uniwersalnym, łatwym w obsłudze i dzieleniu się z pracodawcą, to myślę, że wordpress.com jest wystarczający. Jeśli chcesz dodatkowo stworzyć sobie bloga, rozwinąć go i możesz wydać rocznie ok. 120 zł na stronę, to WordPress.org jest lepszy.
Niezależnie jednak od tego, co sobie wybierzesz po założeniu konta, po instalacji WordPress i zalogowaniu się do panelu administracyjnego dostaniesz dostęp do mniej więcej tego samego widoku.
Zakładanie konta na WordPress.com
Wejdź na stronę wordpress.com i kliknij „Get Started”. W oknie tworzenia konta użytkownika podaj „e-mail” (będzie to adres e-mail przypisany do administratora strony), nazwę użytkownika i hasło.
W kolejnym kroku podaj w polu wyszukiwarki nazwę domeny dla Twojego portfolio. W wersji bezpłatnej WordPress.com do wybranej przez Ciebie nazwy zostanie dodana końcówka wordpress.com. Każda inna końcówka domeny jest płatna w abonamencie rocznym. Zwróć uwagę czy wyszukane nazwy domeny mają dodane na końcu liczby. Wyszukiwarka dodaje je jeśli podana domena jest już zajęta przez kogoś. Warto pokombinować z nazwami i spróbować znaleźć nazwę która nie będzie miała liczb. Wybór domeny zatwierdź klikając przycisk „Select„.
W ostatnim kroku kreatora zobaczysz tabelę płatnych planów, w celu utworzenia strony na bezpłatnym hostingu kliknij link „Start with a free site„. Po zatwierdzeniu wyboru na e-mail administratora zostanie wysłany link potwierdzający. W prezglądarce natomiast zostanie otworzony kokpit WordPressa, na którym będziesz mógł zacząć tworzyć swoje portfolio testera.
Tworzenie portfolio testera – konfiguracja wyglądu strony
W kokpicie WordPressa wybierz „Appearance” następnie „Themes”. Dzięki temu zobaczysz dostępne dla bezpłatnej wersji motywy. Wybierz taki, który ci się podoba w zależności od tego, jak chcesz, by twoje portfolio testera wyglądało. Zdecydowałam się pozostać przy domyślnym motywie „Hever”.
W celu personalizacji wyglądu strony wybieram „Appearance” następnie „Customize”. Zaczynam dostosowywać wygląd strony. W zależności od motywu możesz mieć więcej lub mniej możliwości zmiany wyglądu strony.
W zakładce „Site Identity” wprowadzam tytuł „Portfolio Bartosz” i podtytuł strony „Portfolio testera oprogramowania”. Zapisuję zmiany i wracam do menu ustawień wyglądu.
Zakładka „Colors and background”, jak sama nazwa mówi, pozwala na ustawienie kolorystyki. W wersji darmowej motyw pozwala mi ręcznie zmienić kolory. Niestety nie podaje który kolor za co odpowiada, dlatego, jeśli zdecydujesz się na jakieś zmiany w kolorach, sprawdź, co się zmieniło w podglądzie obok ustawień. Ja nic tutaj nie zmieniałam.
Ustawienia menu strony
WordPress pozwala na utworzenie dowolnej liczby menu i podpięcie ich w wybranych miejscach strony. Zanim zaczniesz zmieniać menu, rozpisz sobie, co chcesz w nim mieć. Jak strona Twojego portfolio ma wyglądać? Na potrzeby tego konkretnego portfolio testera potrzebuję jedną główną stronę z treścią portfolio wyświetlaną trochę jak CV i w niej odnośniki do konkretnych elementów, które Bartosz chce pokazać przyszłemu pracodawcy.
Wchodzę zatem w edycję menu głównego (primary) i usuwam z niego wszystkie opcje poza „Home”. Zapisuje zmiany i wracam do ustawień motywu.
Chcę na stronie mieć również menu do social media, dlatego klikam w menu „Social”. Usuwam opcje, których nie potrzebuję i dodaję link do LinkedIn. Zaznaczam checkbox z „Footer Menu (Current: Social)”, by link pojawił się w stopce strony.
Jeśli chciałbyś dodać w stopce link do swojego e-maila, w polu adresu strony wpisz “mailto:adres@poczta.pl”. Zapisuję zmiany i przechodzę do kokpitu WordPress. Pamiętaj przy tym, że upublicznienie adresu e-mail znaczy, że możesz dostać różne e-maile i wiele niechcianych.
Pozostałe opcje ustawień na ten moment nie są mi potrzebne, ponieważ strona nie ma bloga, dlatego nie zmieniam ich. Zapisuję zmiany i klikam „X” w lewym górnym rogu ekranu by zamknąć edycję wyglądu strony i wrócić do kokpitu WordPress.
Dodanie i edycja stron do portfolio testera
W kokpicie WordPress klikam „Pages„, następnie „All Pages” i usuwam wszystkie strony poza Home. Portfolio testera, które chcę stworzyć, to jedna główna strona. Stronę „Home” mam już podpiętą do menu, dlatego wystarczy, że ją dostosuję do tego jak chcę by wyglądała. Klikam zatem w jej nazwę i przechodzę do edycji tej strony.
WordPress domyślnie korzysta z edytora treści, jakim jest Gutenberg. Proponuję Ci przejrzenie krótkiego filmiku instruktażowego na YouTube. Poznanie podstaw działania edytora ułatwi Ci dalszą pracę 🙂 .
Zaplanuj, co chcesz pokazać i jak w swoim portfolio testera.
Jest to bardzo ważny etap, którego nie należy pomijać. W planowaniu strony ważne jest wiedzieć, gdzie co chcesz mieć, żeby zrobić ją tak, jak należy.
W celu utworzenia portfolio testera dostałam przykłady przypadków testowych, zgłoszone błędy oraz raport z testów. Dlatego mając tyle, tworzę sekcje:
- Warsztat z listą punktowaną „Zgłoszone błędy”, „Przypadki Testowe” i „Raporty z Testów”.
- Narzędzia, z listą punktowaną Jira i TestLink.
Myślę, że można by dodać jeszcze informacje „O mnie”, dlatego na obrazku strony głównej pozostawiam miejsce, by edytować treść.
Moim zdaniem w portfolio testera powinno być dodane wszystko to, czym możesz się pochwalić, zatem dodałam dwie dodatkowe sekcje na stronie głównej, ukończone kursy oraz gdzie zdobywam wiedzę o testowaniu.
Wiem zatem, że poza stroną „Home” potrzebuję jeszcze trzy inne, na których będę wyświetlać zrzuty z narzędzi w formie galerii. Każdą z tych stron dodam w analogiczny sposób, dlatego opisuję dodanie jednej.
Utworzenie strony Zgłoszone błędy
W menu z lewej strony klikam „Pages” następnie „Add new„. W wyświetlonym oknie mogę wybrać „szablon” strony, który sobie pouzupełniam, ja jednak potrzebuję pustą stronę, dlatego klikam „Add blank page”.
Wpisuję tytuł strony „Przypadki Testowe”. WordPress automatycznie utworzy z tytułu strony również adres strony (usunie polskie znaki oraz zastąpi spację znakiem podkreślenia „_”).
Klikam w pustą przestrzeń poniżej tytułu i zaczynam wpisywać treść strony „Znalezione przeze mnie błędy zgłoszone w aplikacji Jira”, klikam ENTER. Po kliknięciu ENTER Gutenberg automatycznie kończy poprzedni blok i zaczyna nowy, który domyślnie jest kolejnym paragrafem. Chcę zmienić go na galerię, dlatego klikam w mały „+” z prawej strony. W rozwiniętym oknie wyszukuję „Gallery”.
Po dodaniu bloczka galerii klikam „Upload Media” i przy pomocy okna dialogowego przesyłam pliki zrzutów ekranu, które chcę dodać do tworzonego portfolio testera. Tutaj mała uwaga, dopilnuj, by pliki były dobrej jakości, dobrej jakości, ale również do 300 kb, ponieważ nie chcesz zniechęcić oglądającego długim wczytywaniem.
Po dodaniu obrazków z prawej strony ekranu mam dostęp do właściwości –zależnie do tego, ile plików ma Twoja galeria, wybierz pasujące Tobie ustawienia ilości kolumn. Zapisz zmiany.
Zanim utworzę stronę z raportami z testów, muszę przesłać na serwer pliki w formacie .pdf i xml. W tym celu w kokpicie WordPressa klikam „Media”. Następnie przesyłam pliki przy pomocy okna dialogowego, jakie się pojawia po kliknięciu przycisku „Add new”.
Mam utworzoną stronę z przypadkami testowymi, w analogiczny sposób tworzę pozostałe dwie strony, nazywam je odpowiednio „Znalezione Błędy” oraz „Przypadki Testowe”. Pozostaje teraz zlinkować je ze stroną główną.
Zanim to zrobię, muszę najpierw opublikować każdą stronę. WordPress nie pozwala na linkowanie do stron, które są szkicami. Przechodzę do edycji każdej strony i klikam „Publish”. Przy pierwszej opublikowanej stronie WordPress po raz kolejny zapyta mnie, czy na pewno nie chcę kupić domeny i hostingu dla mojej strony. Za każdym razem wybieram kontynuację opcji bezpłatnej.
Co właściwie znaczy publikowanie strony?
Opublikowana strona staje się ogólnie dostępna. Od tego momentu możesz skopiować jej adres i podzielić się nim z innymi osobami. Każda wprowadzana od tego momentu zmiana na stronie w momencie kliknięcia „Update” będzie widoczna dla świata. Równocześnie wiedzieć musisz, że publikacja nie znaczy, że od tego momentu będzie ona znajdowana w wyszukiwarce Google czy innej.
Roboty indeksujące wyszukiwarek kiedyś trafią na twoją stronę i zapiszą informacje o niej, o ile pozwolisz na to. WordPress ma w ustawieniach checkbox, który pozwala na indeksowanie strony. Warto go zaznaczyć, jeśli chcesz, by była indeksowana i możliwa do znalezienia w internecie.
Co więcej, jeśli chcesz przyspieszyć wizytę robota Google na stronie oraz śledzić jej statystyki, powinieneś zgłosić istnienie twojej strony w Google Search Console. Na zakończenie rejestracji strony otrzymasz kod HTML, skopiuj go. Wróć do okna właściwości, w którym pozwoliłeś na indeksowanie strony i wklej skopiowany tekst w odpowiednim polu.
Czy konieczne jest rejestrowanie w Google Search Console?
To zależy od Ciebie. Jeśli tworzysz stronę tylko dla celów portfolio, to moim zdaniem niekoniecznie. WordPress pokazuje podstawowe statystyki, zatem będziesz mógł zobaczyć, czy ktoś wchodził na stronę oraz co na niej oglądał.
To samo się tyczy indeksowania strony. Jeśli chcesz, by była Twoim prywatnym portfolio, „odnajdowalnym” nie dla każdego, to wyłącz indeksację. Pamiętaj przy tym, że opublikowana strona jest dostępna. To, że przeglądarka jej nie znajdzie, nie znaczy, że ktoś do niej nie zalinkuje.
Dokończenie strony głównej portfolio testera
W kokpicie WordPress klikam „Media„, następnie klikam w raport z testów w formacie pdf. Klikam w przycisk „Edytuj”, następnie w oknie dialogowym kopiuję adres do pliku.
Z poziomu kokpitu WordPress przechodzę do listy stron, a następnie do edycji strony głównej „Home”. W sekcji „Warsztat” zaznaczam tekst „Raporty z testów”, w menu klikam ikonę linka. Wklejam skopiowany link oraz zaznaczam otwieranie linka w nowej zakładce. Zapisuję zmiany.
Analogicznie dodaję link do pliku w formacie xml. I tak po kliknięciu „Update” mam prawie gotowe portfolio. Klikam w link „Preview” i w oknie dialogowym „Visit site”, by zobaczyć, jak wygląda utworzona strona.
Zmiana ustawień WordPress dla całej strony portfolio
Ostatni krok to zmiana ustawienia WordPressa dla całej strony. Chcę, żeby językiem strony był język polski z czasem ustawionym na strefę czasową „Warsaw”. Dlatego klikam w kokpicie WordPress „Settings”. W zakładce „General” ustawiam prawidłowe wartości.
Celem tworzonej przeze mnie strony jest wyświetlanie portfolio testera, dlatego wyłączam na niej możliwość komentowania (również dla obrazków w galerii). Klikam „Settings”, następnie w zakładkę „Discussion” i wyłączam możliwość komentowania. W ten sposób wyłączyłam komentowanie na stronach i wpisach. Teraz, żeby wyłączyć komentowanie w galeriach, wybieram w menu kokpitu „Settings”, następnie „Media” i odznaczam odpowiedni checkbox.
Strona portfolio jest gotowa. Bartosz na pewno pozmienia treści, które ja dodałam tylko w celu pokazania. Mam nadzieję, że nie skomplikowałam wpisu i wyjaśniłam, jeśli nie tekstem, to chociaż zrzutami co i jak ustawić, aby krok po kroku stworzyć portfolio testera oprogramowania. Starałam się uprościć kroki, jeśli jednak nadal coś jest niejasne, daj znać. Spróbuję opisać prościej. Myślę, że jak już złapiesz podstawy, to możesz swoją stronę portfolio dowolnie zmienić i zrobić z niej Twoją wizytówkę. Znajomość HTML-a i CSS-a może pomóc Ci w uzyskaniu ciekawych efektów na stronie. Każdy bloczek Gutenberga ma opcję edycji jego zawartości w HTML-u. Nie jest to jednak konieczne, by stworzyć sobie proste, a jednak estetyczne i efektowne portfolio testera, którym dodatkowo bardzo można się łatwo dzielić z innymi. Wystarczy wkleić do CV adres URL.
