Temat

Zasady projektowania stron

Etap edukacyjny

Drugi

Podstawa programowa

Klasy VII‑VIII

II. Programowanie i rozwiązywanie problemów z wykorzystaniem komputera i innych urządzeń cyfrowych. Uczeń:

3) korzystając z aplikacji komputerowych, przygotowuje dokumenty i  prezentacje, także w chmurze, na pożytek rozwiązywanych problemów i  własnych prac z różnych dziedzin (przedmiotów), dostosowuje format i  wygląd opracowań do ich treści i przeznaczenia, wykazując się przy tym umiejętnościami:

e) tworzenia prostej strony internetowej zawierającej: tekst, grafikę, hiperłącza, stosuje przy tym podstawowe polecenia języka HTML.

III. Posługiwanie się komputerem, urządzeniami cyfrowymi i sieciami komputerowymi. Uczeń:

2) rozwija umiejętności korzystania z różnych urządzeń do tworzenia elektronicznych wersji tekstów, obrazów, dźwięków, filmów i animacji;

3) poprawnie posługuje się terminologią związaną z informatyką i technologią.

Czas

45 minut

Cel ogólny

Poznanie zasad projektowania stron internetowych.

Cele szczegółowe

1. Poznanie reguł dotyczących projektowania stron www.

Efekty uczenia

Uczeń:

- zna zasady projektowania stron internetowych.

Metody kształcenia

1. Odwrócona klasa.

2. Dyskusja.

Formy pracy

1. Praca własna ucznia.

2. Praca w grupach.

Etapy lekcji

Wprowadzenie do lekcji

Polecenie 1

Uczniowie otwierają kilka stron internetowych z podobnej branży, a następnie wypisują podobieństwa między nimi i różnice. Uwzględniają formę geometryczną stron, ich układ, wykorzystane kolory, czy są zbudowane w oparciu o dostępne systemy CMS czy też napisane są w języku HTML itp.

[Tabela 1]

Realizacja lekcji

Polecenie 2

Uczniowie czytają tekst a następnie na podstawie zawartych w nim informacji robią prezentację multimedialną na temat zasad projektowania stron internetowych

We współczesnym świecie zdominowanym przez komunikację elektroniczną kluczową rolę odgrywają strony internetowe. Aby spełniały one swoje zadania powinny być dobrze zaprojektowane i właściwie wykonane. Przy tworzeniu strony internetowej (a także bloga, fanpage czy sklepu internetowego) dobrze jest podejść w sposób podobny jak przy budowaniu domu lub maszyny – najpierw określić oczekiwane funkcje i wygląd, a następnie konstrukcję i mechanizmy działania.

Przy projektowaniu warto wziąć pod uwagę następujące zalecenia:

- stworzyć stronę jako responsywną czyli dostosowującą swój wizerunek i układ do urządzenia na jakim będzie ona oglądana (komputer, tablet, smatfon);
- stosować współczesne generacje języków programowania stron bez elementów przestarzałych takich jak np Flash;
- stworzyć prosty, lekki i czytelny wizerunek oraz układ strony pozwalający na szybkie odnalezienie treści przez osobę oglądającą;
- zastosować układ funkcjonalny strony zbliżonego do innych stron o podobnych charakterze tak, aby osoba oglądająca mogła z naszej strony korzystać intuicyjnie w sposób podobny do tego, jak poruszała sie po innych stronach;
- nie ukrywać swojego autorstwa, gdyż do informacji pochodzących z nieznanego źródła większość ludzi podchodzi z brakiem zaufania;
- wykorzystywać pełną dostępną szerokość urządzenia tak, aby osoba oglądająca naszą stronę mogła w jak najwygodniejszy sposób zapoznawać się z zamieszczona na jej treścią;
- umożliwić oglądającym komentowanie i ocenianie treści, choć w tym wypadku warto zadbać o wyeliminowanie anonimowych oszczerczych komentarzy poprzez np. zezwolenie na komentowanie wyłącznie przez osoby zalogowane przez znane portale społecznościowe (np. Facebook);
- projektować stronę najlepiej w układzie:

[Ilustracja 1]

- pamiętać o nadaniu stronie tytułu, gdyż to właśnie on wraz krótkim opisem pojawia się w przeglądarkach. Dzięki niemu jesteśmy w stanie zorientować się na jakiej stronie jesteśmy i przełączyć się gdy mamy otwartych więcej okienek przeglądarki;
- przemyśleć nazwę domeny pod jaką umieścimy nazwę strony;
- przemyśleć jak zebrany materiał podzielić na logicznie bloki;
- przemyśleć podanie kontaktu na stronie;
- pamiętać o prawach autorskich.

Aby w sposób właściwy wypełnić powyższe zalecenia, dobrze jest przed przystąpieniem do realizacji zrobić porządny, przemyślany projekt obejmujący funkcje strony, jej wizerunek graficzny, układ treści sporządzony w postaci tzw. mapy strony (czyli grafu obejmującego podstrony i ich relacje).

Po sporządzeniu solidnego projektu przychodzi czas na dobór narzędzia/języka  w jakim zostanie wykonana nasza strona. W tym miejscu mamy dwie podstawowe metody wymuszone tak naprawdę przez typ strony.

Jeśli treści naszej strony będą modyfikowane wyłącznie przez nas i przy tym nie będzie to miało miejsca zbyt często – warto sięgnąć do napisania strony w języku HTML. Tworzenie kodu takiej strony wymaga co prawda umiejętności programowania w języku HTML i jest czasochłonne, jednak strony takie cechuje krótki czas otwarcia (szybkie załadowanie) co jest dobre zarówno z punktu widzenia osób oglądających jak i jest dobrze oceniane przez wyszukiwarki.

Jeśli natomiast treści naszej strony będą wymagały częstej aktualizacji, potrzebna będzie możliwość oceny i komentowania lub inne mechanizmy interaktywności – musimy sięgnąć po inne języki programowania stron (np. PHP) najlepiej w postaci gotowych systemów zarządzania treścią (tzw. CMS).

Po zainstalowaniu takiego systemu na serwerze do obsługi naszej strony nie wymagane są wysokie kwalifikacje techniczne, gdyż zarządzanie treścią jest dość proste, a pisanie artykułów przypomina pisanie w edytorach tekstu. Można skorzystać z szerokiej oferty komercyjnej na napisanie takiego systemu, ale można także sięgnąć po szeroko stosowane darmowe systemy CMS takie jak np. Wordpress, Drupal czy Joomla. Podobnie sprawa się ma w przypadku sklepów internetowych, fotogalerii lub portali blogerskich lub informacyjnych

[Slideshow]

Podsumowanie lekcji

Podsumowując, każdy kto chciałby stworzyć wartościową stronę internetową powinien:

- zaplanować jej zadania i funkcje oraz wizerunek graficzny,
- sporządzić solidny szczegółowy projekt,
- wybrać właściwą technologię wykonania,
- wziąć się do pracy.