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

Sztuczna Inteligencja (AI) to jeden z najgorętszych tematów ostatnich lat, który wpływa na coraz więcej obszarów naszego życia. Spotykamy się z nią na co dzień, często nie zdając sobie z tego sprawy – w smartfonach, wyszukiwarkach internetowych, rekomendacjach filmów czy muzyki. Zrozumienie podstawowych idei stojących za AI jest kluczowe dla przyszłych programistów.

Waszym zadaniem będzie stworzenie prostej strony internetowej, która w przystępny sposób wprowadzi do tematu Sztucznej Inteligencji.

Wymagania techniczne:

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

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

3. Na stronie powinna znaleźć się co najmniej jedna grafika związana z AI (np. schemat mózgu, robot, symbol AI, futurystyczna wizualizacja). Plik graficzny powinien znajdować się w osobnym folderze (images).

Elementy strony (HTML):

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

1. Nagłówek główny ( <h1> ): Tytuł strony, np. "Sztuczna Inteligencja - Pierwsze Kroki".

2. Nagłówek podrzędny ( <h2> ): Podtytuł, np. "Co to jest i gdzie ją spotykamy?".

3. **Sekcja "Co to jest AI?"

Stylizacja (CSS):

Arkusz stylów (style.css) powinien zawierać reguły formatujące wygląd strony. Należy zastosować co najmniej 5-10 podstawowych reguł CSS, obejmujących m.in.:

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

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

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

4. Dodanie marginesów lub paddingu do sekcji tekstowych lub grafiki.

5. Stylowanie elementów listy - np. zmiana typu znacznika listy.

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

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

8. 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. ai.png lub robot.jpg).

• Treść tekstowa powinna być napisana własnymi słowami, w oparciu o ogólnodostępne informacje o AI (nie kopiujcie całych fragmentów z Internetu).

Kryteria Oceny:

Maksymalna liczba punktów: 30

Kryteria Oceny Punktowej:

• 1. Struktura HTML (Max: 6 punktów)

  • Użycie podstawowych znaczników strukturalnych (<html>, <head>, <body>) - 1 pkt

  • Poprawne użycie nagłówków (<h1>, <h2>) - 1 pkt

  • Poprawne użycie akapitów (<p>) - 1 pkt

  • Poprawne użycie listy (jeśli zastosowano <ul> / <ol>) - 1 pkt

  • Poprawne użycie stopki (<footer>) - 1 pkt

  • Ogólna semantyka i zagnieżdżenie znaczników - 1 pkt

• 2. Treść tekstowa (Max: 5 punktów)

  • Zawarcie sekcji "Co to jest AI?" z prostą definicją - 2 pkt

  • Zawarcie sekcji "AI w naszym życiu" z przykładami zastosowań - 2 pkt

  • Poprawność merytoryczna treści (podstawowe zrozumienie tematu AI) - 1 pkt

• 3. Grafika (Max: 4 punkty)

  • Poprawne wstawienie grafiki za pomocą znacznika <img> - 2 pkt

  • Poprawny adres pliku graficznego w atrybucie src - 1 pkt

  • Użycie atrybutu alt z opisem grafiki - 1 pkt

• 4. Podłączenie CSS (Max: 4 punkty)

  • Poprawne podłączenie zewnętrznego arkusza stylów style.css w sekcji <head> - 4 pkt

• 5. Stylowanie CSS (Max: 6 punktów)

  • Zastosowanie co najmniej 5-10 różnych reguł CSS - 2 pkt

  • Stylowanie elementów tekstowych (np. font-family, color, font-size) - 1 pkt

  • Stylowanie układu/sekcji (np. margin, padding, text-align) - 1 pkt

  • Stylowanie grafiki (np. rozmiar, ramka, wyrównanie) - 1 pkt

  • Stylowanie elementów listy (jeśli użyto) - 1 pkt

• 6. Organizacja plików (Max: 3 punkty)

  • Pliki index.html i style.css w głównym folderze - 1 pkt

  • Folder images z grafiką w głównym folderze - 2 pkt

• 7. Ogólna estetyka i czytelność (Max: 2 punkty)

  • Czytelność strony dla użytkownika (układ, kontrast) - 1 pkt

  • Spójność wizualna projektu - 1 pkt

• 8. Poprawność językowa (Max: 2 punkty)

  • Brak błędów ortograficznych i gramatycznych w treści - 2 pkt

Uzyskane Punkty: .......................... / 30

Ocena końcowa:

• 0 - 14 punktów: Niedostateczna (1)

• 15 - 19 punktów: Dopuszczająca (2)

• 20 - 24 punkty: Dostateczna (3)

• 25 - 27 punktów: Dobra (4)

• 28 - 30 punktów: Bardzo dobra (5)

1. Podstawowe Informacje o Kliencie i Projekcie:

   1. Nazwa firmy/przedsiębiorstwa.

   2. Dane kontaktowe osoby decyzyjnej po stronie klienta.

   3. Nazwa projektu (jeśli istnieje).

   4. Data sporządzenia briefu.

   5. Krótki opis działalności klienta, jego misji i wartości.

   6. Obecna sytuacja klienta (czy posiada już stronę, jakie są z nią problemy, czy jest to zupełnie nowy projekt).

2. Cele Strony Internetowej:

   1. Główny cel: Jaki jest nadrzędny cel stworzenia lub przebudowy strony? (np. budowa wizerunku, generowanie leadów, sprzedaż online, wsparcie obsługi klienta, edukacja, dostarczenie informacji).

   2. Cele szczegółowe (SMART): Konkretne, mierzalne, osiągalne, istotne i określone w czasie cele (np. zwiększenie liczby zapytań ofertowych o X% w ciągu Y miesięcy, zwiększenie ruchu na stronie z organicznych wyników wyszukiwania o Z%, skrócenie czasu ładowania strony do A sekund).

   3. Co ma osiągnąć użytkownik odwiedzający stronę? (np. znaleźć kontakt, złożyć zamówienie, dowiedzieć się więcej o produkcie, pobrać materiały).

3. Grupa Docelowa:

   1. Szczegółowy opis docelowych użytkowników strony (wiek, płeć, zainteresowania, zawód, lokalizacja, potrzeby, problemy, cele związane z wizytą na stronie).

   2. Czy istnieją różne segmenty użytkowników i jakie są ich specyficzne potrzeby?

   3. Jakie urządzenia będą najczęściej używane do przeglądania strony (desktop, tablet, mobile)?

   4. Jakie przeglądarki internetowe są popularne wśród grupy docelowej?

4. Analiza Konkurencji:

   1. Wskazanie głównych konkurentów klienta posiadających strony internetowe.

   2. Analiza stron konkurencji: mocne i słabe strony, funkcjonalności, wygląd, użyteczność.

   3. Co ma wyróżniać nową stronę na tle konkurencji?

5. Funkcjonalności Strony:

   1. Szczegółowa lista wszystkich planowanych funkcjonalności (np. system zarządzania treścią - CMS, formularz kontaktowy, galeria, integracja z mediami społecznościowymi, mapa Google, blog, moduł aktualności, sklep internetowy, system rezerwacji, chat online, wyszukiwarka wewnętrzna, wersje językowe, panel klienta, newsletter).

   2. Opis działania każdej kluczowej funkcjonalności.

6. Struktura i Mapa Strony (Site Map):

   1. Hierarchiczne przedstawienie wszystkich planowanych podstron i ich wzajemnych powiązań. Można w formie listy zagnieżdżonej lub graficznego schematu.

   2. Planowana nawigacja strony (menu główne, stopka, nawigacja poboczna).

7. Zawartość Strony (Content):

   1. Jakie typy treści będą na stronie (tekst, zdjęcia, wideo, infografiki, pliki do pobrania)?

   2. Kto jest odpowiedzialny za dostarczenie treści (klient czy agencja/wykonawca)? W jakim terminie?

   3. W jakim formacie treści zostaną dostarczone?

   4. Czy potrzebne są usługi copywriterskie?

8. Wygląd i Identyfikacja Wizualna:

   1. Wskazanie istniejącej identyfikacji wizualnej klienta (logo, księga znaku, paleta kolorów, typografia). Jeśli nie istnieje, jakie są wytyczne?

   2. Preferowany styl graficzny strony (nowoczesny, minimalistyczny, klasyczny, kreatywny, korporacyjny itp.).

   3. Przykłady stron internetowych, które podobają się klientowi (wskazanie elementów, które są wartościowe).

   4. Przykłady stron, które się nie podobają.

   5. Wymagania dotyczące responsywności i wyglądu na różnych urządzeniach.

   6. Czy potrzebne są specyficzne ilustracje, ikony, zdjęcia?

9. Wymagania Techniczne:

   1. Preferowany system zarządzania treścią (CMS) - jeśli klient ma preferencje (np. WordPress, Joomla, Drupal, dedykowany system).

   2. Wymagania dotyczące hostingu i domeny (czy klient posiada, czy potrzebuje wsparcia).

   3. Integracje z zewnętrznymi systemami/usługami (np. system CRM, system płatności, narzędzia analityczne jak Google Analytics, systemy mailingowe).

   4. Wymagania dotyczące bezpieczeństwa (np. certyfikat SSL).

   5. Wymagania dotyczące optymalizacji pod kątem wyszukiwarek (SEO) - jeśli są specyficzne wytyczne.

10. Budżet i Harmonogram:

    1. Budżet: Określenie lub wskazanie orientacyjnego budżetu przeznaczonego na projekt.

    2. Termin realizacji: Oczekiwany termin ukończenia projektu lub poszczególnych etapów.

    3. Kluczowe daty lub wydarzenia, do których strona musi być gotowa (np. premiera produktu, targi branżowe).

11. Zarządzanie Projektem i Komunikacja:

    1. Preferowany sposób komunikacji (e-mail, telefon, spotkania online/osobiste, system zarządzania projektem).

    2. Kto po stronie klienta będzie odpowiedzialny za akceptację poszczególnych etapów pracy?

    3. Jak często klient oczekuje raportów o postępach?

12. Dodatkowe Uwagi i Oczekiwania:

    1. Wszelkie inne informacje, wymagania lub sugestie, które klient uważa za istotne dla projektu.

    2. Kto będzie odpowiedzialny za późniejszą aktualizację i utrzymanie strony?

Zadanie

Bazując na powyższej teorii opracuj listę pytań do rozmowy z klientem