Projektowanie

1. Określenie celu strony i grupy docelowej:

• Zdefiniowanie, co strona ma osiągnąć (informowanie, sprzedaż, rozrywka).

• Zrozumienie potrzeb i oczekiwań użytkowników, do których strona jest skierowana.

2. Planowanie struktury i układu strony (architektura informacji):

• Stworzenie logicznej i intuicyjnej nawigacji.

• Projektowanie układu strony (layout) z uwzględnieniem hierarchii informacji.

• Stosowanie siatki (grid) dla spójnego i uporządkowanego rozmieszczenia elementów.

• Projektowanie zorientowane na Użytkownika. (User Centered Design)

3. Projektowanie interfejsu użytkownika (UI):

• Używanie spójnej palety kolorów, typografii i ikon.

• Projektowanie responsywne (RWD), dostosowujące się do różnych urządzeń (komputery, tablety, smartfony).

• Zapewnienie czytelności i dostępności treści dla wszystkich użytkowników (WCAG).

• Ułatwienie użytkownikowi intuicyjnej obsługi strony.

4. Tworzenie treści (content):

• Pisanie jasnych, zwięzłych i angażujących tekstów.

• Używanie wysokiej jakości obrazów i grafik.

• Optymalizacja treści pod kątem SEO (pozycjonowanie w wyszukiwarkach).

• Dodawanie elementów multimedialnych (filmy, animacje) w przemyślany sposób.

5. Testowanie i optymalizacja:

• Przeprowadzanie testów użyteczności (usability testing) w celu identyfikacji problemów.

• Analizowanie danych statystycznych (Google Analytics) w celu monitorowania zachowań użytkowników.

• Wprowadzanie poprawek i ulepszeń na podstawie wyników testów i analiz.

6. Bezpieczeństwo:

• Upewnianie się, że strona jest bezpieczna, szyfrująca dane, aktualna.

• Stosowanie protokołu HTTPS.

• Stosowanie aktualnego oprogramowania strony.

• Regularne wykonywanie kopii zapasowych strony i bazy danych.

7. Dostępność (WCAG):

• Projektowanie z uwzględnieniem zasad dostępności dla osób z niepełnosprawnościami.

• Zapewnienie alternatywnych opisów obrazów (alt text).

• Używanie odpowiedniego kontrastu kolorów.

• Ułatwienie nawigacji za pomocą klawiatury.

8. Wydajność:

• Optymalizacja czasu ładowania strony.

• Kompresja obrazów i innych plików multimedialnych.

• Minimalizacja zapytań HTTP.

• Używanie szybkiego hostingu.

9. Estetyka i spójność wizualna:

• Stosowanie spójnej identyfikacji wizualnej marki.

• Dbanie o estetyczny wygląd strony.

• Unikanie nadmiaru elementów graficznych i animacji.

10. Interakcja z użytkownikiem:

• Umożliwienie łatwego kontaktu (formularze, dane kontaktowe).

• Dodawanie interaktywnych elementów (ankiety, quizy).

• Integracja z mediami społecznościowymi.

Zadanie 1: Analiza stron internetowych

1. Wybierz 3 różne strony internetowe (np. sklep internetowy, blog, strona informacyjna).

2. Przeanalizuj każdą z nich pod kątem:

   • Cel strony i grupa docelowa.

   • Struktura i nawigacja.

   • Układ strony (layout) i hierarchia informacji.

   • Kolorystyka, typografia i spójność wizualna.

   • Jakość treści (tekst, obrazy, multimedia).

   • Responsywność (dostosowanie do urządzeń mobilnych).

   • Użyteczność i intuicyjność obsługi.

3. Wskaż mocne i słabe strony każdej z analizowanych stron.

4. Zaproponuj ulepszenia dla jednej z wybranych stron.

Zadanie 2: Projektowanie makiety strony

1. Wybierz temat strony internetowej (np. portfolio, strona restauracji, strona wydarzenia).

2. Określ cel strony i grupę docelową.

3. Narysuj makietę (wireframe) strony głównej, uwzględniając:

   • Układ elementów (nagłówek, menu, treść, stopka).

   • Hierarchię informacji.

   • Planowane rozmieszczenie tekstu, obrazów i innych elementów.

4. Opisz, dlaczego wybrałeś taki układ i jakie cele chcesz osiągnąć.

Zadanie 3: Optymalizacja strony pod kątem SEO

1. Wybierz temat strony internetowej (np. sklep internetowy z odzieżą sportową).

2. Zaproponuj słowa kluczowe, które powinny być użyte na stronie.

3. Opisz, jak zoptymalizujesz treści na stronie (teksty, tytuły, opisy obrazów) pod kątem wybranych słów kluczowych.

4. Zaproponuj działania, które poprawią widoczność strony w wyszukiwarkach.

Zadanie 4: Testowanie użyteczności

1. Wybierz prostą stronę internetową (np. formularz kontaktowy, strona z informacjami o firmie).

2. Przygotuj scenariusz testu użyteczności (np. "Znajdź numer telefonu firmy i zadzwoń").

3. Przeprowadź test na 2-3 osobach i zapisz ich obserwacje.

4. Wyciągnij wnioski z testu i zaproponuj ulepszenia strony.

Zadanie 5: Projektowanie responsywne

1. Wybierz temat strony internetowej (np. blog kulinarny).

2. Zaprojektuj układ strony głównej dla komputera, tabletu i smartfona.

3. Opisz, jak elementy strony będą się zmieniać w zależności od rozmiaru ekranu.

4. Wyjaśnij, dlaczego projektowanie responsywne jest ważne.

Książka "Innowatorzy" Waltera Isaacsona to fascynująca podróż przez historię cyfrowej rewolucji, opowiadająca o wizjonerach, inżynierach i programistach, którzy swoimi pomysłami i współpracą zmienili świat. Dowiadujemy się z niej o postaciach takich jak Ada Lovelace, Alan Turing, Bill Gates czy Steve Jobs oraz o kluczowych momentach w rozwoju komputerów i internetu.

Waszym zadaniem będzie stworzenie prostej strony internetowej, która przybliży tę książkę innym.

Wymagania techniczne:

• Strona powinna składać się z jednego pliku HTML (index.html).

• Do stylizacji strony należy użyć zewnętrznego arkusza stylów CSS (style.css).

• Na stronie powinna znaleźć się co najmniej jedna grafika związana z książką (np. okładka, zdjęcie autora, ilustracja symbolizująca innowacje cyfrowe). Plik graficzny powinien znajdować się w osobnym folderze (images).

Elementy strony (HTML):

Strona powinna zawierać następujące sekcje/elementy:

• Nagłówek główny ( <h1> ): Tytuł strony, np. "Innowatorzy - Książka Waltera Isaacsona".

• Nagłówek podrzędny ( <h2> ): Podtytuł, np. "Opowieść o twórcach cyfrowej rewolucji".

• Sekcja wprowadzająca (np.`Krótki opis książki)

• Sekcja o autorze - Krótka informacja o Walterze Isaacsonie

• Sekcja "O książce" - Rozszerzony opis treści książki, np. o jakich postaciach lub wynalazkach opowiada (można wymienić kilka przykładów z wyszukanych informacji). Można zastosować podział na akapity

• Sekcja z grafiką - Umieszczenie wybranej grafiki związanej z książką. Należy pamiętać o atrybucie alt. 

• Stopka - Informacja o autorze strony (czyli o Was), np. "Przygotował: [Wasze Imię i Nazwisko]".

Stylizacja (CSS):

Arkusz stylów (style.css) powinien zawierać reguły formatujące wygląd strony, m.in.:

• Ustawienie czcionki i koloru tekstu dla całej strony (selektor body).

• Wyrównanie tekstu (np. do środka lub do lewej).

• Zmiana rozmiaru i koloru czcionki dla nagłówków ( <h1>, <h2> ).

• Dodanie marginesów lub paddingu do sekcji tekstowych.

• Wyrównanie lub ostylowanie grafiki (np. dodanie ramki, zmiana rozmiaru, wyśrodkowanie).

• Ostylowanie stopki (np. mniejszy rozmiar czcionki, inny kolor, wyrównanie).

• Zmiana koloru tła strony lub poszczególnych sekcji.

Instrukcje dodatkowe:

• Pliki index.html i style.css powinny znajdować się w tym samym folderze głównym projektu.

• Folder images z grafiką powinien znajdować się w tym samym folderze głównym projektu.

• Nazwa pliku graficznego powinna być prosta i bez polskich znaków/spacji (np. okladka.jpg).