Procedura stworzenia strony internetowej

Procedura stworzenia strony internetowej

Plan i analiza

1. Implementacja baneru ostrzegawczego na stronie klienta w celu zapobiegnięcia utraty zmian
2. Stworzenie planu strony, stworzenie treści, audyt SEO
3. Akceptacja planu strony
4. Wycena kosztów związanych z napisaniem treści
5. Zlecenie napisania treści
6. Odbiór gotowych treści

Praca grafika - projektowanie strony

1. DESIGN - zbieranie informacji

• uzyskanie informacji projektowych oraz materiałów od project managera
• wdrożenie informacji oraz wymagan projektowych
• sporządzenie uwag zwrotnych oraz przesłanie ich do managera (jeśli są konieczne)
• wstępne przemyślenie sekcji graficznych z Proud UI Kit, być może również indywidualnych (unique)
• zastanowienie się nad dodatkowymi elementami (jeśli występują)

2. DESIGN - Przygotowanie do pracy

• ustalenie wielkości kontenera, typografii, kolorystyki
• przygotowanie buttonów i ich state’ów
• przemyślenie dropdown / megamenu w nawigacji

3. DESIGN - Praca zasadniczna

• przygotowanie projektu w Figmie, zarówno plików “Archiwum” jak i “Final”
• rozpoczęcie prac nad stroną główną na podstawie UI Kit
• wygenerowanie linku z prezentacją projektu (dla wszystkich) i przekazanie managerowi projektu
• zebranie akceptacji od managera, ewentualne poprawki
• zaprezentowanie strony głównej Klientowi - “w taki styl idziemy, to proponujemy”, w przypadku konfliktu metoda “informacja + argumentacja + przykład”
• akceptacja projektu strony głownej
• wykonanie poprawek strony głównej (jeśli jest taka konieczność)
• dalsze prace nad projektem - reszta widoków
• zebranie akceptacji od managera -> akceptacja developera -> ewentualne poprawki
• zaprezentowanie całości projektu Klientowi, w przypadku konfliktu metoda “informacja + argumentacja + przykład”

4. DESIGN - Finalizacja prac

• przygotowanie projektu do wersji Final: odpowiednie nazewnictwo, optymalizacja plików (odciążenie Figmy)
• przygotowanie zakładki Developer
• stworzenie paczki zdjęć do projektu w odpowiednich wymiarach i nazwach
• przygotowanie favicon (min. 260x260), obrazka tymczasowego
• stworzenie spisu sekcji i informacji o nich
• stworzenie design systemu - jakie zostały użyte fonty, grubości/h1/h2/h3, kolory

5. Akceptacja całego projektu graficznego - JEDNOZNACZNA INFORMACJA OD KLIENTA, ŻE PROJEKT JEST ZAAKCEPTOWANY (MAIL)

Przygotowanie środowiska testowego

1. SERWER Przygotowanie środowiska roboczego

• stworzenie subdomeny roboczej
• podniesienie wersji PHP do najnowszej wspieranej przez WP wersji
• instalacja WordPressa z odpwiednim pakietem wtyczek
• sprawdzenie działania SSL oraz dostępu do witryny
• wyłączenie indeksacji strony
• sprawdzenie poprawności pliku .htaccess
• wpisanie danych dostępowych do WordPressa

2. KODOWANIE - Przygotowanie Wordpressa

• instalacja odpowiedniego motywu (majkel-theme)
• upewnienie się, czy działają niezbędne wtyczki
• przygotowanie stanowiska (git, vscode, ftp-kr)
• ustawienie permalinków na “nazwa wpisu”
• sprawdzenie miniatur oraz ich przycinania
• uzupełnienie obrazka wyróżniającego, favicony, odpowiednich fontów
• wyłączenie komentarzy jeśli nie występują w projekcie (również w functions.php)
• przygotowanie makietowe - dodanie podstron i menu
• usunięcie treści z podstron “głowna”, “polityka prywatności”, itd. (po dodaniu flexible-content zniknie ta możliwość)
• przygotowanie makietowe - dodanie CPT oraz flexible content
• przygotowanie makietowe - organizacja plików w motywie

3. Przygotowanie środowiska testowego

Kodowanie

1. KODOWANIE - praca zasadniczna

• przygotowanie podstron oraz menu witryny
• przygotowanie sekcji flexible
• rozłożenie ACF na wszystkich podstronach z tymczasowymi opisami
• sprawdzenie i uzupełnienie czcionek, containera, głównych kolorów, faviconów
• kodowanie sekcji flexible strony głównej
• kodowanie pozostałych sekcji flexible
• sprawdzenie działania formularzy
• testy i akceptacja (manager + klient)
• kodowanie responsywne
• testy i akceptacja (manager + klient)

2. KODOWANIE - Optymalizacja SEO/techniczna

• LiteSpeed Cache Database Optimization
• sprawdzenie sitemap Yoast
• optymalizacja SEO pozycjonowanych podstron
• sprawdzenie W3 Validatora, Seoptimer, Google Lighthouse
• optymalizacja CSS, klas CSS, Javascript, Litepseed, html
• sprawdzenie “Stanu Witryny” WordPress
• ostateczna weryfikacja i testy

3. KODOWANIE - Odbiór przez managera i ewentualne poprawki

Uzupełnienie treścią

1. Uzupełnienie podstron treścią
2. Uzupełnienie tytułu i opisu witryny
3. Uzupełnienie opisów meta pozycjonowanych podstron
4. Sprawdzenie czy klient nie dodał treści na oldzie - porównanie.
5. Sprawdzić skalowanie tekstu Android/iOS/web

Wdrożenie

1. Aktualna wersja - wykonać raport Ahrefs Site Auditor (wyciągamy dump url 404, title i descriptions).
2. Starą wersję OLD pakujemy na WPBackups - potrzeba dopisać do umowy zgodę na zarządzanie Oldem.
3. Wdrożenie starej wersji strony na “old” (z noindex) - najlepiej na hostingu klienta. Trzeba się upewnić by cały htacess jest przerzucony.
4. Ostateczny odbiór project managera, audyty, poprawki
5. Ostateczna akceptacja projektu przez Klienta (prezentacja ostatecznej wersji development klientowi na żywo)
6. SERWER - Wdrożenie projektu

• stworzenie backupu obecnej wersji strony (jeśli istnieje)
• jesli potrzeba - analiza starej wersji, zrobienie screenów Pagespeed, GTMetrix, Seoptimer itd.
• migracja do nowej wersji
• test poprawności działania - permalinks, webp, skrypty
• sprawdzamy URL - dla Google to są różne emaile i musimy mieć pewność który jest docelowy oraz czy działa przekierowanie zanim odpalimy WWW. Przekierowanie końcówek "" na ”/”, przekierowanie index.php oraz ”/”
• wyłączenie noindex
• backup nowej strony na WPBackups

7. Przygotowanie dwóch kont dla klienta - Administratora oraz Redaktora w WordPress.

Wdrożenie - Wordfence

Instalacja i konfiguracja WordFence:

• Dodatkowa warstwa ochrony WP
• Przy wdrożeniach obowiązkowe

Wideo: https://www.youtube.com/watch?v=jm9G6F4dIP0

Kroki:

1. Pobieramy i aktywujemy wtyczkę WordFence
2. Naciskamy - Get your Wordfence License
3. Wybieramy - Get a free license
4. Podajemy marketing+wordfence@rekurencja.com, wybieramy NO, akceptujemy agreement, naciskamy REGISTER
5. W otrzymanym e-mail klikamy install my License Automaticaly
6. Zamykamy monity szkoleniowe
7. Akceptujemy notyfikację z auto-update wtyczki
8. Przechodzimy do konfiguracji firewall https://screen.proudmedia.eu/v4rand_12e1asd/chrome_2024-03-25_08-38-35.png
9. Konfiguracja firewall:

• Na master.proudhost.eu -> https://screen.proudmedia.eu/v4rand_12e1asd/chrome_2024-03-25_08-38-58.png
• na dev.proudhost.eu -> https://screen.proudmedia.eu/v4rand_12e1asd/chrome_2024-03-25_08-39-36.png
• na innych hostingach - to co podpowie ale musimy sprawdzić potem w podstronie firewall czy działa

10. Wchodzimy jeszcze raz w pole Optimize Wordfence Firewall i pobieramy pliki i kontynuujemy https://screen.proudmedia.eu/v4rand_12e1asd/chrome_2024-03-25_08-40-18.png
11. Wchodzimy na podstronę firewall, wybieramy MANAGE WAF, przełączamy W.A.F. Status na Enable and protecting i zapisujemy https://screen.proudmedia.eu/v4rand_12e1asd/chrome_2024-03-25_08-41-29.png
12. Wchodzimy w All options, wyłączamy powiadomienie mailowe oraz wiadomości z podsumowaniami i zapisujemy https://screen.proudmedia.eu/v4rand_12e1asd/chrome_2024-03-25_08-42-14.png