W tym zadaniu wykonacie własną internetową galerię zdjęć wykorzystując języki HTML oraz CSS. Potrzebny będzie komputer z dostępem do internetu oraz zdjęcia w formie plików. Czas potrzebny na wykonanie tego zadania zależy od Waszego doświadczenia w tworzeniu stron internetowych. Jeżeli dopiero zaczynacie swoją przygodę z tworzeniem stron, na wykonanie tego zadania trzeba będzie przeznaczyć co najmniej kilka dni.
Strony internetowe to doskonałe narzędzie wymiany informacji. Od początków istnienia internetu do chwili obecnej strony internetowe uległy niesamowitej ewolucji. Pierwsze strony były dokumentami tekstowymi, formatowanymi za pomocą prostych znaczników HTML. Dziś mamy już do czynienia z programowaniem w pełnym tego słowa znaczeniu. Zwiększyły się także wymagania stawiane współczesnym stronom internetowym. Strona powinna wyświetlać się poprawnie na wszystkich urządzeniach (komputer, tablet, smartfon..), we wszystkich przeglądarkach internetowych (Internet Explorer, Firefox, Google Chrome, Opera..), oraz we wszystkich dostępnych rozdzielczościach - w każdym punkcie tej trójwymiarowej przestrzeni.
W pierwszej chwili może się to wydawać niemożliwe, jednak twórcy wspołczesnych języków programowania stron stworzyli doskonałe metody, dzięki którym wpółczesne strony mogą spełniać takie wymagania. Współczesne języki programowania stron zawierają wiele gotowych funkcji, a do tego są przyjazne dla użytkownika. Wbrew pozorom, w dzisiejszych czasach tworzenie stron jest prostsze niż kiedyś, a dla osób kreatywnych, lubiących programować, tworzenie stron może być zajęciem przyjemnym, a nawet wciągającym. Obecnie dostępnych jest wiele darmowych edytorów stron www, darmowych kursów tworzenia stron w postaci filmów, tutoriali oraz praktycznych ćwiczeń. Dostępnych jest też wiele gotowych rozwiązań, przykładowych fragmentów kodu, które które można skopiować i wkleić do swojego projektu. Jedynym wymaganym zasobem do rozpoczęcia przygody z tworzeniem stron jest w miarę nowy komputer podłączony do internetu oraz czas, jaki możemy poświęcić nauce tworzenia stron internetowych.
W tym zadaniu stworzycie internetową galerię zdjęć. Wykonując to zadanie poznacie podstawy tworzenia stron www. Przykładową prostą galerię zdjęć możecie zobaczyć na mojej stronie fotoimpresje.pl.
Podobnie jak w przypadku innych projektów stron, do stworzenia galerii zdjęć można wykorzystać edytory graficzne. W tych edytorach stronę tworzy się przeciągając elementy myszką i edytując je tak jak w programie graficznym, a program sam generuje kod powstałej strony. Jednak kod ten cechuje zwykle duża objętość i mała czytelność, dlatego w tym zadaniu wykonacie stronę korzystając z tradycyjnego edytora HTML. Efektem wyjściowym będzie Wasza galeria zdjęć. Mogą to być zdjęcia z wakacji lub z jakiegoś wydarzenia. Galeria powinna spełniać wymogi opisane we wprowadzeniu, czyli wyświetlać się poprawnie we wszystkich rozdzielczościach stosowanych w obecnie dostępnych urządzeniach.
Wykonanie zadania można podzielić na 3 części. Pierwsza część to przygotowanie zdjęć do galerii. Druga część to stworzenie kodu strony, obejmującego strukturę strony (plik HTML) oraz jej wygląd (plik CSS). Trzeci etap to umieszczenie strony na serwerze i opcjonalnie rejestracja domeny z przekierowaniem jej na Waszą stronę.
Zdjęcia
Jeżeli tworzymy galerię zdjęć, to oczywiście potrzebne będą jakieś zdjęcia. Warto je poddać obróbce przed umieszczeniem w internecie. Najlepszym darmowym programem do obróbki zdjęć jest moim zadaniem Paint.NET. Innym bardzo popularnym darmowym edytorem grafiki jest GIMP, jednak jest on już trochę trudniejszy w obsłudze. Szybki kurs obsługi programu Paint.NET to Paint.NET Basic Photo Editing Tutorial 2018.
Zdjęcie trzeba będzie przeskalować, a dokładnie zmniejszyć (Resize), wyostrzyć (Sharpen), poprawić kontrast i może trochę podkolorować (Hue/Saturation). Dobrą praktyką jest utworzenie miniaturek zdjęć, które w galerii posłużą jako linki do pełnowymiarowych obrazów.
Strona
Kod prostej strony można napisać w zwykłym notatniku, podobnie jak mały gwóźdź można wbić kluczem francuskim, jednak optymalnym rozwiązaniem jest edytor stron internetowych. Jak już wspomniałem we wstępie, jest wiele bardzo dobrych darmowych edytorów stron. Ja na przykład używam edytora Notepad++. Katalog linków do materiałów poświęconych podstawowym językom tworzenia stron internetowych znajdziecie w katalogu Biofizyk na stronach Pearltrees.
Do stworzenia podstawowej galerii zdjęć wystarczy znajomość języka HTML (Hyper Text Markup Language) oraz CSS (Cascade Style Sheet). Dla zapoznania się z podstawami tych języków polecam filmy z kanału Pasja Informatyki oraz inne materiały, do których linki znajdziecie w Pearltrees.
Po zapoznaniu się z teorią najlepszym sposobem nauki tworzenia stron jest praktyka. Bardzo przystępny kurs tworzenia stron na przykładach to W3Schools. Na stronach W3Schools znajdziecie m.in. przykład podstawowej galerii w CSS CSS Image Gallery, galerii z oknem modalnym W3.CSS Modal oraz galerii zdjęć typu Lightbox.
Dla lepszej czytelności strony kod CSS najlepiej umieścić w oddzielnym pliku (external style sheet - Three Ways to Insert CSS), a wszystkie pliki używane przez naszą stronę powinny znajdować się w jednym katalogu zawierającym podkatalogi np. zdjecia, miniaturki itd. Celowo napisałem ‘zdjecia’ zamiast ‘zdjęcia’ – użycie "ogonków" w nazwach plików i katalogów to pierwsze źródło problemów. Obecnie dostępne są domeny internetowe z ogonkami, jednak w globalnym świecie będą one dużym ograniczeniem.
Serwer
W celu udostępnienia strony w internecie katalog strony umieszczamy na serwerze, czyli korzystamy z tzw. usługi hostingowej. Usługi hostingowe są zazwyczaj płatne, jednak dostępne są też darmowe serwery, gdzie możecie niedopłatnie umieścić swoją stronę. Jeżeli strona ma być Waszą wizytówką lub projektem, z którym wiążecie jakieś większe plany, to polecałbym raczej płatne rozwiązania. Natomiast na początek w celu zapoznania się z tą tematyką możecie skorzystać z rozwiązań darmowych. Opinie użytkowników darmowych serwerów możecie znaleźć na forach internetowych stron dobreprogramy.pl, pasja-informatyki.pl, iporady.pl oraz innych. Ja nie korzystałem jeszcze z darmowego hostingu, za wyjątkiem serwerów Uczelni. Z obecnego hostingu jestem bardzo zadowolony. Jaki to serwer? Można sprawdzić..
Stronę na serwerze umieszczamy poprzez protokół transferu plików FTP (File Transfer Protocol). W tym celu potrzebny jest program kilenta FTP. Wiele darmowych programów można znaleźć wpisując w wyszukiwarce 'free ftp' lub 'kilent ftp'. W systemie Windows jednym z najpopularniejszych klientów FTP jest WinSCP. Krótki kurs obsługi programu przedstawia film How to Use WinSCP Tutorial.
Domena
Po umieszczeniu pliku na serwerze adres Waszej strony będzie czymś w stylu
https://www.adresnaszegoserwera.pl/naszagaleriazdjec
Atrakcyjną alternatywą dla takiego adresu było by coś takiego jak
https://www.naszagaleriazdjec.pl/
Aby posiadać taki adres, trzeba zarejestrować domenę naszagaleriazdjec.pl. W trakcie tworzenia tej strony ta domena była wolna, jednak sugerowałbym wymyślić jakąś lepszą nazwę. Posiadanie domeny wymaga opłacania rocznego abonamentu. Koszt abonamentu zależy od rodzaju domeny (.com, .eu, .tv itd.) oraz rejestratora, czyli firmy, w której rejestrujemy naszą domenę. Posiadanie domeny .pl to koszt ok. 100 zł rocznie, jednak w ramach promocji oferowanej przez niektórych rejestratorów (np. nazwa.pl lub home.pl) przez jeden rok można mieć domenę .pl za darmo.
Po wykupieniu domeny można ją wydelegować, czyli wskazać serwer, gdzie fizycznie znajdują się pliki naszej strony. Polega to na wpisaniu odpowiednich adresów DNS serwera w ustawieniach domeny. Adresy DNS są dostępne na stronach firmy hostingowej, jednak cała procedura często wymaga kontaktu z obsługą serwera.
Paint.NET - program graficzny
GIMP - program graficzny
Paint.NET Basic Photo Editing Tutorial 2018 - wprowadzenie do Paint.NET
Notepad++ - edytor stron www
Strony www na Pearltrees - katalog linków
W3Schools - kurs tworzenia stron na przykładach
Google Fonts - czcionki Google
Bootstrap Colors - paleta kolorów
Canva - paleta kolorów ze zdjęcia
CSSmatic - Narzędzia CSS
WinSCP - program klient FTP
WinSCP Tutorial - kurs obsługi WinSCP
Tabela ewaluacyjna - sprawdź swoją wiedzę i umiejętności!
Wiedza i umiejętności | Punkty |
---|---|
Potrafisz poprawić jakość zdjęcia w programie graficznym | 4 |
Potrafisz zrobić galerię obrazów w CSS | 5 |
Potrafisz zrobić galerię z oknem modalnym | 6 |
Potrafisz zrobić galerię typu lightbox | 6 |
Potrafisz umieścić stronę na serwerze | 5 |
Wiesz jak zarejestrować i wydelegować domenę | 4 |
Suma punktów | Ocena |
---|---|
28 - 30 | Ekspert! |
20 - 27 | Zaawansowany |
10 - 19 | Średniozaawansowany |
1 - 9 | Początkujący |
© Sebastian Bożek