Zanim zaczniesz tworzyć stronę www, najpierw zastanów się nad tym co chcesz na niej zamieścić. Wypisz co powinno znaleźć się w menu. Pamiętaj, że dobra strona nie powinna być ze zbyt dużą ilością tekstu, zbyt kolorowa i z za dużą ilością grafik. Zastanów się jako grafikę wybierzesz jako grafikę główną do projektowanej strony internetowej.

1. Czemu służą strony www? Jaki jest cel ich posiadania?
2. Które strony www według Ciebie są najatrakcyjniejsze dla odbiorcy?
3. Dlaczego na niektórych stronach zostajesz dużej, a niektóre opuszczasz bardzo szybko?
4. Jakie są grafiki na stronach internetowych, które Ci się podobają?

Projektowanie i tworzenie stron www

Drugi

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ą.

45 minut

Poznanie zasad tworzenia i projektowania stron www.

1. Poznanie zasad projektowania stron www.

2. Poznanie zasad tworzenia stron www.

Uczeń:

- zna zasady projektowania stron www,

- zna zasady tworzenia stron www.

1. Metoda odwróconej klasy.

2. Wykład problemowy.

1. Praca własna ucznia.

2. Praca w grupach.

Odpowiedz na pytania wprowadzające.

1. Czemu służą strony www? Jaki jest cel ich posiadania?
2. Które strony www według Ciebie są najatrakcyjniejsze dla odbiorcy?
3. Dlaczego na niektórych stronach zostajesz dużej, a niektóre opuszczasz bardzo szybko?
4. Jakie są grafiki na stronach internetowych, które Ci się podobają?

Polecenie 1

Otwórz kilka stron internetowych, które Ci się podobają. Przeanalizuj co Ci się na tych stronach podoba a co nie. Następnie uzupełnij tabelę:

[Tabela 1]

Przedyskutuj w klasie zapisane wady i zalety oglądanych stron.

Polecenie 2

Zanim stworzysz własną stronę www przeczytaj poniższy tekst a następnie wypisz główne założenia prawidłowego projektowania stron internetowych.

Projektując stronę internetową, warto wziąć pod uwagę wynikające z praktyki zasady ich tworzenia. Poniżej przedstawię Ci i uzasadnię kilka reguł, którymi warto się kierować.

Stosuj oszczędną szatę graficzną.

„Przeładowanie” strony grafiką po pierwsze może odciągać uwagę internauty od głównej treści i spowodować, że będzie miał trudności w połapaniu się gdzie ma czego szukać, a po drugie strona taka będzie się dłużej ładowała. Czy wyobrażasz sobie sytuację, w której znajdziesz się w budynku, w którym we wszystkich pomieszczeniach i na wszystkich korytarzach drzwi, ściany i okna będą powyklejane kolorowymi wzorzystymi plakatami? Poruszanie się po takim obiekcie będzie trudne, a gdy po raz kolejny nie znajdziesz drzwi, na pewno Cię to zezłości. Oczywiście przesada w drugą stronę też jest niewskazana. Należy znaleźć rozsądna proporcję. Lepiej jednak przyjąć zasadę, że w tym wypadku mniej znaczy lepiej.

Wykonaj wyraźnie widoczne menu.

Internauta juz na pierwszy rzut oka powinien się móc zorientować, gdzie może „kliknąć”, żeby zacząć się poruszać po twojej stronie. Także na kolejnych podstronach menu powinno znajdować się zawsze w tym samym i widocznym miejscu, żeby odwiedzający Twoją stronę nie musiał szukać możliwości przejścia do kolejnych informacji.

Stosuj prostą, logiczną nawigację i intuicyjną strukturę.

Pomyśl - jak klient zareaguje wchodząc do sklepu, w którym produkty będą porozstawiane w mało logiczny sposób. Na pewno będzie chodził pomiędzy regałami coraz bardziej zirytowany, że trudno mu znaleźć to, czego szuka. Być może nawet w końcu się tak zdenerwuje, że wyjdzie nie robiąc żadnych zakupów. Podobnie może być ze stroną WWW. Po otwarciu menu internauta powinien się szybko zorientować co znajdzie, pod którym jego przyciskiem. W opracowaniu prawidłowej struktury strony bardzo pomaga zrobienie sobie tak zwanej „mapy” strony, czyli grafu na którym zwizualizujesz układ materiałów i informacji swojej witryny. Można też przyjrzeć się jaki układ przyjęła „konkurencja” o uznanej renomie.

Zadbanie o prawidłowe wyświetlanie w różnych przeglądarkach.

Każdy ma swoją ulubioną przeglądarkę. Dla jednych jest nią Chrome, dla innych Firefox, ale dla wielu także będzie nią Internet Explorer, Opera, Safari, lub jeszcze inna. Każda z przeglądarek, choć interpretuje ten sam kod wyświetlając Twoją stronę, będzie to robiła jednak nieco inaczej. Jeśli przy projektowaniu swojej strony uwzględnisz tylko sposób interpretacji i wyświetlania Twojej ulubionej przeglądarki, może się okazać, że na komputerze kolegi lub koleżanki strona wygląda znacznie gorzej, lub w ogóle nie można z niej skorzystać. Przy tworzeniu strony warto więc korzystać jedynie z elementów kodu akceptowanych przez większość przeglądarek. Po stworzeniu nowego, kolejnego fragmentu strony dobrze będzie sprawdzić, jak będzie on na nich wyświetlany i w razie problemów sprawdzić, który fragment kodu (która instrukcja) może być tego przyczyną i spróbować znaleźć inne rozwiązanie.

Zadbaj o prawidłową czytelność strony wyświetlanej na różnych urządzeniach.

Fachowo nazywa się to zapewnieniem responsywności strony. Obecnie jest to bardzo istotne, gdyż smatrfony stały się urządzeniami, na których strony internetowe są wyświetlane bardzo często i tendencja ta cały czas rośnie. Jednocześnie, ze względu na znacznie mniejszy rozmiar i zupełnie inne proporcje ekranu smartfona, strona wyświetlana na komputerze i na smartfonie powinna mieć inny układ i inną nawigację.

Polecenie 3

Kliknij na liczby na ekranie monitora, a zobaczysz dodatkowe reguły jakimi należy się kierować przy projektowaniu
stron www.

[Grafika interaktywna]

Polecenie 4

Stwórz checklistę (listę kontrolną), którą będziesz mógł wypełnić oglądając ponownie strony z wcześniejszego polecenia.

Checklista to taka lista, na której zapisane są istotne punkty, należy skontrolować, czy wszystkie zostały spełnione.

Zanim zaczniesz tworzyć stronę www, najpierw zastanów się nad tym co chcesz na niej zamieścić. Wypisz co powinno znaleźć się w menu. Pamiętaj, że dobra strona nie powinna być ze zbyt dużą ilością tekstu, zbyt kolorowa i z za dużą ilością grafik. Zastanów się jako grafikę wybierzesz jako grafikę główną do projektowanej strony internetowej.