Publikowanie swojej strony.

Co będzie nam potrzebne do tej lekcji.

Podstawowa znajomość html i css oraz program do edycji kodu.

W tej lekcji przedstawimy Państwu jak wykonać stronę prosto i bezproblemowo. Nie skupimy się na samym procesie tworzenia strony a raczej na efekcie końcowym który ma nas zadowalać oraz prezentować przedstawiane przez Państwa dane w przystępny i przejrzysty sposób.

Tworząc stronę internetową musimy zdawać sobie sprawę z jednej fundamentalnej sprawy a mianowicie – jak ma wyglądać nasza strona. W tym celu należy poświęcić chwilę czasu na stworzenie listy w której zawrzemy pytania czego oczekujemy od naszej strony. Czy menu ma być u góry czy z prawej, a może z lewej ? Ze względu na fakt, że każdy ma swoje indywidualne wymagania co do strony nie możemy zaproponować jednej uniwersalnej listy dla każdego. Ilość pomysłów jest praktycznie nieograniczona a internet pełen jest świetnych szablonów, jednakże jeżeli zbagatelizujemy planowanie naszej strony – może się okazać, że dokonanie wyboru będzie bardzo ciężkie.

Ze sporządzoną listą możemy przejść do wstępnego naszkicowania projektu który wyłania się z założeń zawartych w liście.

Jak już pisaliśmy wcześniej w tym kursie skupimy się na uzyskaniu jak najlepszego efektu przy poświęceniu na to minimum czasu, który będziemy mogli przeznaczyć na dopracowywanie np. naszych danych. Rozpoczynamy od przeglądania stron z darmowymi szablonami html. Choć brzmi to prawie jak truizm to jednak warto przed ściągnięciem naszej templatki sprawdzić czy jest ona responsywna. Poniżej przedstawiamy kilka naszych propozycji:

Jeżeli udało nam się dokonać tego trudnego zadania i spośród tysięcy szablonów wybraliśmy ten jeden jedyny należy go ściągnąć na dysk i przystąpić do edycji. Nie będziemy tutaj szczegółowo omawiać sposobów edycji strony ale w krótkim filmiku przedstawimy jak można łatwo wyedytować szablon. Edycja kodu odbywać się będzie w programie Visual Studio Code – efekty będziemy natomiast podglądać w zwykłej przeglądarce. Na końcu dodamy do naszej strony kod <iframe> – jest to element języka HTML, który umożliwia nam wyświetlenie elementu HTML z zewnętrznego dokument HTML.   Omawiany powyżej element <iframe> uzyskaliśmy w lekcji numer …….

<iframe width=”600″ height=”371″ seamless frameborder=”0″ scrolling=”no” src=”https://docs.google.com/spreadsheets/d/e/2PACX-1vQ-brH6wcpI8Aiyx9iJBJ1aov9lwplt8Yp6vty3ommSKQcUjlYG0H5epgdus6JdO-RcZTFesb4HGWnw/pubchart?oid=1600849467&amp;format=interactive„></iframe>

Należy zwrócić uwagę, że są alternatywne sposoby zakładania stron internetowych nie są one jednak aż takie proste i nie są darmowe. Innym alternatywnym sposobem założenia własnej strony internetowej wraz z spersonalizowaną nazwą domeny np. mojastrona.pl jest wykupienie tej właśnie domeny oraz hostingu. Możemy przejść na stronę jednego z popularniejszych usługodawców – ze względu na super obsługę i dobrą cenę polecamy firmę Kylos, ale można skorzystać z każdego innego dostawcy usługi hostingu [pełna lista – https://top100.wht.pl/ ] – ważne jest jednak by upewnić się, że hosting posiada w swojej ofercie Autoinstalator skryptów. Po wykupieniu potrzebnej domeny, hostingu oraz zainstalowaniu skryptu operacje edycji kodu szablonu można wykonywać bezpośrednio na stronie ale zwykle potrzebna jest do tego znajomość języka PHP lub Java Script co nieco utrudnia zadanie.

Minusem jest natomiast, złożoność skryptów co powoduje, że w przypadku problemów z działaniem dosyć ciężko jest je zdiagnozować. W takim wypadku twórca strony jest zmuszony do radzenia sobie z dosyć zaawansowanymi problemami takimi jak „White Screen of Death” w pojedynkę.

Poniżej przedstawiamy kilka popularnych skryptów, które znajdziecie Państwo w każdym Autoinstalatorze. Większość z tych skryptów ma możliwość edytowania kodu strony bez potrzeby zmiany kodu źródłowego przy użyciu ftp. Warty uwagi jest CMS Grav, który do swojego działania nie używa baz danych co jest raczej nietypowe. 

Po dokonaniu odpowiednich poprawek na pobranym szablonie musimy zastanowić się nad sposobem hostowania naszej strony. Powyżej przedstawiliśmy kilka firm, które się tym zajmują. My natomiast zajmiemy się dodaniem strony do portalu Github Pages – https://pages.github.com/. W tym celu niezbędne jest założenie konta w portalu Github zgodnie z instrukcją – https://github.com. Proces nie jest trudny warto jednak zwrócić uwagę na nazwę użytkownika którą wybieramy przy zakładaniu konta gdyż będzie ona widniała w urlu naszej strony – jeżeli np. wybierzemy nazwę użytkownika media30 to adres url naszej strony będzie wyglądał następująco: https://media30.github.io/media30/. Drugie człon to nazwa naszego repozytorium. O wszystkim innym dowiesz się z naszego filmu. 

[ FILM ]

Strona jest już dostępna z każdego miejsca na ziemi.

#1 Przed przystąpieniem do tworzenia swojej strony internetowych należy:

#2 Do stworzenia strony internetowej:

#3 Do osadzania na stronie internetowej wizualizacji służy znacznik:

#4 Najpopularniejszy system CMS, w którym możemy edytować naszą stronę to:

Sprawdzam

Wynik