Jeśli kiedykolwiek pracowałeś nad wdrożeniem lub zmianami na stronie www, to wiesz, że na etapie wprowadzania zmian do już zakodowanej strony czasami pojawia się ping-pong pomiędzy zespołem wdrożeniowym a Tobą. Nie masz pewności jak dana zmiana graficzna dokładnie wpłynie na wygląd strony i prosisz programistę o sprawdzenie, jak coś będzie wyglądać (inny kolor tła, większe logo, coś w prawo, coś w lewo, krótszy/dłuższy tekst, itd.). Programista wprowadza tą zmianę, ale okazuje się, że jednak d… nie urywa, więc wracasz do poprzedniego wariantu. Takich iteracji może się pojawić wiele i całość bardzo mocno wpływa na wydłużenie projektu. Znając pewne podstawy można ten proces znacznie uprościć i przyspieszyć. Dzisiaj chcę Ci przekazać wiedzę, która pomoże Ci pewne zmiany testować samodzielnie. Dzięki temu będziesz w stanie precyzyjnie przekazać programiście jakie zmiany w kodzie ma wprowadzić i będziesz dokładnie wiedzieć jak wpłyną one na wygląd Twojej witryny.

Ważne!

Narzędzie, które poznasz daje sporo opcji analizy kodu, wydajności i bezpieczeństwa strony, ale tutaj skupimy się tylko na bardzo podstawowych zagadnieniach, które mogą być przydatne w pracy marketerów.

Potrzebne narzędzia

Chrome + DevTools – FREE

W tym ćwiczeniu będziesz potrzebować jedynie przeglądarki Chrome, a konkretnie narzędzia DevTools, które umożliwia testowanie i debugowanie strony www. Korzystający z tego narzędzia masz możliwość wprowadzania w kodzie zniam i testowania wpływu tych zmian na działanie strony bez zapisywania tych zmian na serwerze. Dzięki temu możesz swobodnie sprawdzać różne warianty bez zyska, że zostaną one zauważone przez Twoich użytkowników na stronie.

Podobne narzędzia zawiera również Firefox oraz Internet Explorer. Wszystkie dają mniej więcej te same możliwości i działają w podobny sposób. Wybór należy do Ciebie. W tym ćwiczeniu skorzystamy z DevTools, które są wbudowane w Chrome’a.

Co będzie przydatne?

Aby w pełni skorzystać z możliwości jakie daje DevTools przydatna będzie wiedza za zakresu:

  • CSS
  • HTML

Nie mówię, że trzeba znać od razu wszystkie znaczniki i selektory, ale znajomość składni na pewno ułatwi wprowadzanie modyfikacji w kodzie.

Czego się nauczysz?

Podczas tego ćwiczenia pokażę Ci w jaki sposób robić podstawowe operacje na kodzie.

Dowiesz się następujących rzeczy:

  • W jaki sposób obsługiwać narzędzie?
  • W jaki sposób zmianiać wielkości fontów poszczególnych elementów?
  • Jak testować zmiany wiekości grafik?
  • Jak zmieniać odstępy pomiędzy obiektami?
  • Jak zmieniać kolory poszczególnych elementów?
  • Jak modyfikować treści?
  • Jak usuwać poszczególne elementy?

Na początku wybierzmy stronę do testowania. Proponuję pastwić się nad www.inzynieriamarketingu.pl 🙂

W jaki sposób obsługiwać narzędzie?

Uruchomić narzędzie można na dwa sposoby:

Sposób dłuższy: Ustawienia -> Więcej narzędzi -> Narzędzia dla programistów

Sposób szybszy: PPM (prawy przycisk myszy) -> Zbadaj

Lub najszybszy, poprzez kombinację klawiszy: Ctrl+Shift+I

Po uruchomieniu DevTool powinieneś zobaczyć coś takiego:

  1. Kod HTML
  2. Style CSS
  3. Margines zewnętrzne i wewnętrzne, ramki, pozycja

Aby modyfikować kod lub zmieniać selektory CSS należy kliknąć ikonę pod punktem (1.), a następnie wskazać element strony, który będzie modyfikowany.

Zauważysz, że po prawej stronie został zaznaczony znacznik <span>. Aby przejrzeć właściwości naszego nagłówka konieczne jest zaznaczenie znacznika <div>, który znajduje się powyżej:

Dla osób nie mających doświadczenia z HTML’em dodam, że każdy znacznik kodu ma swoje otwarcie oraz zamknięcie. Przykładowo znacznik w którym znajduje się nasz nagłówek ma następującą strukturę:

<div>

<p>

<span>Tekst nagłówka</span>

</p>

</div>

Dość czesto zdarza się, że style dla danego elementu kodu są nadawane w znaczniku <div>.

Po zaznaczeniu znacznika <div>, który został pokazany na zrzucie powyżej zerknij do sekcji syles:

Właściwości mojego nagłówka kryją się w selektorze .et_pb_text_0. Widać, że w tym miejscu mamy określonych kilka podstawowych cech: typ fontu, jego wielkość, kolor, interlinia, margines górny, margines dolny.

Jeśli nie robiłeś podobnych rzeczy wcześniej to na początku cała zabawa może się wydać dość skomplikowana, ale jak tylko oswoisz się z narzędziem, CSSami i HTMLem to, żadna zmiana nie powinna Ci sprawiać problemu.

Klikając w dowolną właściwość selektora możesz swobodnie zmieniać jego wartość:

Pamiętaj! Żadne z wprowadzonych przez Ciebie zmian nie zapiszą się na serwerze. Aby przywrócić widok domyślny wystarczy, że odświeżysz stronę na której pracujesz (F5).

W dalszych krokach ćwiczenia pokażę Ci w jaki sposób możesz modyfikować konkretne elementy.

W jaki sposób zmianiać wielkości fontów poszczególnych elementów?

Kliknij PPM na nagłówku “Zapisz się…” i wybierz opcję ‘Zbadaj’.

Przejdź do okna ‘Styles’ i w selektorze .et_pb_text_0 i zmodyfikuj właściwość:

Font-size: 3em;

na:

Font-size: 3.5em;

Zapoznaj sie z innymi wartościami właściwości ‘font-size’ TUTAJ

Naciśnij ‘Enter’ i zobacz jak zmieniła się wielkość nagłówka po lewej stronie.

Żeby złapać zasadę działania zaznacz i zmodyfikuj akapit tekstu pod nagłówkiem.

PPM -> Zbadaj.

Po prawej stronie zaznacz znacznik <div> znajdujący się powyżej. Następnie zmodyfikuj wartość właściwości ‘font-size’. Zobacz jaka wielkość Ci odpowiada.

 

Jak testować zmiany wielkości grafik?

Zaznacz logotyp:

W stylach odnadź selektor ‘img’

Nasz logotyp ma domyślną wysokość 67px. Załózmy, że chcemy ją zwiększych do 100px.

Selektor ma okresloną właściwość ‘height’, która jest ustawiona na auto.

Zaznacz tą wartość i zmień ją na 100px.

Od teraz legendarne już stwierdzenie: “Większe logo”, będziesz mógł przetestować samodzielnie 🙂

 

Jak zmieniać odstępy pomiędzy obiektami?

Zaznacz formularz rejestracyjny.

W prawym dolnym rogu okna znajduje się sekcja, która umożliwia określenie marginesów zewnętrznych (margin), wewnętrznych (padding), ramki (border), oraz wymiaru samego obiektu.

Zmodyfikuj oraz dodaj parę parametrów. Zobacz jak zmienia się formularz.

Jak zmieniać kolory poszczególnych elementów?

Tak jak w poprzednim kroku zaznacz formularz rejestracyjny. Znajdź selektor ‘.et_pb_column_2’. Zobaczysz w nim właściwość ‘background-color’.

Właściwość ta odpowiada za kolor tła naszego formularza.

Właściwość ta odpowiada za kolor tła naszego formularza.

Po kliknięciu kwadratu z kolorem otworzy się okienko z opcjami zmiany koloru:

Wybierz kolor, który w Twojej ocenie będzie lepszy :).

Jak modyfikować treści?

Zaznacz nagłówek z tekstem “Zapisz się…”

W kodzie HTML zlokalizuj miejsce, gdzie znajduje się tekst tego nagłówka.

Kliknij dwukrotnie myszą na tym tekście w kodzie.

Teraz możesz zmodyfikować dowolnie ten tekst i sprawdzić jak będzie się komponować na stronie.

Jak usuwać poszczególne elementy na stronie?

Sprawa jest bardzo prosta. Wystarczy zaznaczyć fragment kodu, który chcemy wywalić ze strony i kliknąć DELETE lub PPM -> Delete (lub Hide) Element

Jak dodawać własne właściwości?

Jeśli chcesz dodać własne selektory CSS to również masz taką możliwość. Nie musisz się opierać tylko o modyfikacje już istniejących. Każdy zaznaczony element ma obiekt o nazwie ‘element.style’, gdzie możesz testować dowolne kombinacje.

DevTools sugeruje właściwości i ich parametry, więc nawet jeśli nie znasz wszystkich właściwości CSS to rozbudowa stylów nie powinna być dużym wyzwaniem.

Share This