Edycja stron statycznych

Niejednokrotnie można się spotkać ze stwierdzeniem jakoby strony statyczne były trudne do modyfikowania przez użytkowników. Ba, sam użyłem podobnego sformułowania we wpisie strona statyczna vs. strona dynamiczna. Gdzie porównywałem owe sztuczne typy stron internetowych. Na swoje usprawiedliwienie powiem, że chciałem uwydatnić tylko to, jak łatwo modyfikuje się strony oparte o różnego rodzaju systemy zarządzania treścią.

Po przeczytaniu niniejszego poradnika, tę legendarnie trudną, wymagającą interdyscyplinarnych umiejętności pracę, będzie mógł wykonać dosłownie każdy.

Jedyne czego ta sztuka wymaga to tak na prawdę sprawne posługiwanie się myszą i umiejętność pisania na klawiaturze – naprawdę. Dobra, nie traćmy czasu i od razu przejdźmy do części praktycznej kursu.

Narzędzia

Aby sprawnie modyfikować treść na stronach statycznych, na początek musimy wyposażyć się w odpowiednie oprogramowanie. Edytor tekstu ma prawie każdy, zalecam jednak zainstalowanie trochę „mądrzejszego” edytora dla programistów, wykorzystamy w nim bowiem bardzo przydatną funkcję, a mianowicie kolorowanie składni. Moja propozycja: Notepad ++. Pobieramy plik i instalujemy jak każdy program.

Druga sprawa to klient FTP. Jest to oprogramowanie, które pozwoli nam podmieniać pliki na serwerze. Mimo, że system Windows posiada funkcję FTP w eksploratorze to i tak zachęcam do zainstalowania trochę bardziej intuicyjnej aplikacji. Moja propozycja: FileZilla.

Tutorial

Dla celów tego tutorialu stworzyłem fikcyjną stronę firmową. Możecie ją sobie obejrzeć tutaj: //mansfeld.pl/net/tutorials/static/

screen-0

To jest nasz punkt wyjścia, czyli mamy działającą stronę. Teraz załóżmy, że chcemy coś na niej zmienić . Nic prostszego – uruchamiamy aplikację FileZilla i wpisujemy dane logowania do konta FTP w zaznaczono na fioletowo pola i wciskamy klawisz Enter:

edycja stron 1

Jeżeli dane do logowania nie są Ci znane, poproś o nie twórców Twojej strony internetowej – muszą Ci je udostępnić, no chyba, że sam załatwiałeś sprawy związane z hostingiem – wtedy pozostaje Ci kontakt z usługodawcą.

Zmiana tekstu na stronie internetowej

W przypadku kiedy, chcemy zmienić wybrany fragment tekstu bo np. jest nieaktualny lub po prostu nam się znudził i chcemy przyciągnąć publikę czymś nowym pobieramy plik z serwera zawierający daną treść. Aby sprawdzić jaki to plik wystarczy sprawdzić adres w pasku adresu:

edycja screen 2

Teraz pobierzemy ten plik z konta FTP na dysk lokalny, aby móc wprowadzić pożądane zmiany. Plik można pobrać klikając dwa razy na jego nazwę w prawym oknie eksploratora plików:

edycja 3

Jak już ściągniemy plik wystarczy go otworzyć w edytorze Notepad++. Naszym oczom ukaże się wówczas kod strony. Nic z tego nie rozumiesz? Nie przejmuj się! W tym momencie interesują nas tylko wybrane fragmenty. Jak się już pewnie domyślasz, wystarczy znaleźć odpowiedni tekst i po prostu go zmienić jak w Wordzie. Dla celów dydaktycznych zmieńmy tekst „Witamy” na „Witaj”. Bardzo łatwo można znaleźć fragment kodu odpowiedzialny za wyświetlanie się tego napisu, wygląda on tak:

<h1>Witamy</h1>

Uwaga, zostawiamy w spokoju wszystko to, co znajduje się obok tekstu, czyli kod HTML. To bardzo ważne, ponieważ przypadkowe usunięcie znaczników, może spowodować, że tekst będzie się wyświetlał nieprawidłowo.

Zapisujemy wprowadzone zmiany Plik > Zapisz lub kombinacja klawiszy Ctrl+S i wysyłamy plik z powrotem na serwer. Oczywiście, wystarczy dwukrotnie kliknąć w nazwę pliku, jednak tym razem w lewym oknie eksploratora FTP:

edycja-screen-04

Gotowe! Podobnie postępujemy z wszystkimi innymi tekstami na stronie internetowej.

Zdjęcia

Przydatną umiejętnością będzie jeszcze podmiana zdjęć. Aby maksymalnie uprościć zadanie, podpowiem, że można skorzystać tutaj z dwóch technik. Pierwsza z nich to podmiana plików a druga to podmiana ścieżek do plików w kodzie strony.

Jak zapewne zauważysz obrazy są umieszczone na stronie za pomocą takiej instrukcji:

<img src=”img/ipad.png”>

Oznacz to tyle, że obrazek, który widzimy w danym miejscu znajduje się w katalogu img a ipad.png to jego nazwa. Teraz aby podmienić grafikę, wystarczy wysłać na serwer zaktualizowane zdjęcie lub zmienić nazwę pliku na inną np: iphone.png.

Dodawanie treści na stronę

Dodawanie dodatkowych elementów na stronie statycznej również nie powinno przysporzyć większych problemów. Dodawanie zdjęć powinno polegać na dodawaniu kolejnych znaczników. A przy listach wypunktowanych powinniśmy zadbać o dołączanie znaczników zamykających tak jak pokazano to na poniższym przykładzie menu głównego:

<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">O nas</a>
</li>
<li>
<a href="#">Oferta</a>
</li>


<li>
<a href="#">Dodatkowy element</a>
</li>


<li>
<a href="#">Kontakt</a>
</li>
</ul>

Podsumowanie

Aktualizacja treści na stronie statycznej, nie da się ukryć, wymaga trochę więcej pracy. Trochę więcej klikania i konieczność zachowania szczególnej ostrożności podczas modyfikowaniu kodu nie jest co prawda barierą nie do przejścia, jednak mówiąc wprost: nie zachęca do częstych aktualizacji. Ponadto, przy dużych serwisach internetowych, gdzie zawartość jednej podstrony wpływa na inną, edycja strony w ten sposób jest praktycznie niewykonalna w dłuższej perspektywie czasu.

Strony statyczne to dobry wybór dla tych, którzy planują aktualizować treść na tyle rzadko, że podejmowany wysiłek podczas kolejnych aktualizacji jest opłacalny biorąc pod uwagę niższy koszt eksploatacji. Przykładem mogą być tutaj strony – wizytówki z co najwyżej danymi teleadresowymi i krótkim opisem oferty. Dlaczego utrzymywanie strony statycznej jest tańsze? To proste, baza MySQL, która jest wymagana przez systemy zarządzania treścią z prawdziwego zdarzenia to dodatkowy wydatek. Jeżeli jest ona w pakiecie to mamy do czynienia na starcie już z trochę droższym hostingiem. Mam nadzieję, że wpis się przyda i pozwoli Ci na nabraniu pewności w swobodnej edycji Twojej strony internetowej.

Edycja stron statycznych
4.5 (90%) głosów: 2