Opis zlecenia
Cel Projektu:
Stworzenie jednej podstrony (Landing Page, LP) w HTML na podstawie przesłanego projektu graficznego (.PSD). LP będzie efektywnie służyć dwóm grupom docelowym: B2B i konsumentom. Strona powinna umożliwić łatwe nawigowanie między dedykowanymi sekcjami dla każdej grupy przez przyciski i zakotwiczone linki.
Przykład:
Ktoś klika w Google w artykuł. Wchodzi na stronę i wyskakuje mu okienko - Jesteś konsumentem czy B2B? I teraz w zależności co kliknie LP będzie inny.
Krok 1: Struktura HTML
1. Podstrona LP: Utwórz jedną podstronę HTML, która będzie zawierać wszystkie niezbędne sekcje.
2. Sekcje Dedykowane: W dokumencie HTML, zdefiniuj dwie główne sekcje: <section id="B2B"> dla klientów biznesowych i <section id="Konsument"> dla konsumentów indywidualnych.
3. Szerokość strony 1260 px – zgodnie z projektem graficznym
Krok 2: Nawigacja i Przyciski wyboru odbiorcy
1. Przyciski wyboru odbiorcy: Dodaj na górze strony dwa przyciski: jeden z napisem "B2B", drugi "Konsument". Każdy przycisk powinien mieć przypisane funkcje przewijania do odpowiedniej sekcji:
Funkcja Przewijania: Implementuj funkcję, która przewija do danej sekcji:
Krok 3: Ukrywanie Treści
1. CSS na Początku: Na początku wszystkie sekcje powinny być wyrenderowane i widoczne – kwestie SEO.
2. Ukrywanie Treści: Po kliknięciu w przycisk, użyj JavaScript, aby ukryć nieodpowiednie sekcje, stosując klasę CSS, która ustawi display: none dla niechcianych sekcji.
Krok 4: Grafiki
1. Potnij grafiki z uzyskanego projektu w formacie .PSD
2. Grafiki umieść w dwóch folderach – B2C oraz B2B
3. LP zamieść na swoim serwerze
Krok 5: SEO, Linki Kanoniczne, przyciski wewnątrz LP
1. Optymalizacja SEO: Podstrona jest stworzona zgodnie z zasadami SEO.
2. Linki Kanoniczne: Brak możliwości ich używania.
3. Przyciski – w miejscach wymaganych linków (przyciski) użyj znacznika ‘#’
Krok 6: Mechanizm wyszukiwarki
1. Wyszukiwarka: Funkcjonalność wyszukiwarki znajdującej się w projekcie graficznym LP jest już przez nas zaprogramowana, kod udostępnimy.