Formularz kontaktowy

Strona wyposażona jest w formularz kontaktowy, ale aby on automatycznie się pojawił musimy pamiętać o wypełnieniu w administracji strony adresu email, na który formularz będzie wysyłany. Dokonujemy tego w dziale Dane strony: a następnie Email dla kontaktu. Jeśli jednak preferujemy kontakt tylko telefoniczny pozycję email zostawiamy pustą a wówczas wszystkie moduły do tej formy kontaktu znikną. Formularz wykorzystuje do wysyłania lokalny serwer, toteż wysłane z niego maile niektóre systemy poczt mogą interpretować jako spam, więc po wysłaniu pierwszej wiadomości prosimy zaglądnąć na swojej poczcie do folderu Spam i odznaczyć wiadomość testową jako nie-spam a następne wiadomości będą już docierały poprawnie.

Formularz posiada kilkustopniowe zabezpiecznie antyspamowe przed spamem prawdziwym, którego jednym z elementów jest niemożność wpisania określonych znaków z klawiatury, które w normalnym tekście używane są sporadycznie a do rozsyłania spamu są niezbędne. Chroni nas to od otrzymywania niechcianych wiadomości.

Zdjęcia (obrazki)

System jest zaopatrzony w automatyczną, bezobsługową galerię zdjęć. Może jednak zajść przypadek, że sami chcemy do któregoś działu dodać jakieś zdjęcie (np do działu Kontakt fotografię siedziby naszej firmy). Jest to jak najbardziej możliwe, jednak przy takim działaniu pamiętać musimy o kilku rzeczach:

1. obrazek możemy wkleić tylko wtedy, kiedy obok kursora myszy pojawi się menu kontekstowe:
2. wstawiamy zdjęcie na stronę responsywną (czyli poprawnie wyświetlić się ma na każdym rodzaju ekranu), więc po żadnej stronie obrazka nie ma być żadnych elementów (tekst, tabela,itp); najlepiej zdjęcie wyśrodkować w menu, które pojawi się po wklejeniu obrazka:
3. nie wklejajmy zdjęć niepotrzebnie dużych: i tak w większości nasza strona przeglądana będzie na urządzeniach mobilnych o niewielkich ekranach poza tym duże zdjęcia to niepotrzebne dużo kB transferu, optymalna szerokość zdjęcia to max 600-800 pikseli
4. dobrą praktyką jest nadanie obrazkowi tekstu alternatywnego (naszą stronę mogą przeglądać niewidomi za pomocą czytnika), robimy to przy zaznaczonym obrazku klikając na panelu górnym ikonkę: i wpisując tekst,

Tabelki

Pewne elementy typu cennik czy menu najlepiej się prezentują w formie tabeli. Tabele takie powstają na etapie tworzenia strony wg specyfikacji Zamawiającego. Możemy w nich bez problemu zmieniać dane, np. cenę czy jakiś inny tekst. Ale co, jeśli np. w menu naszego baru doszła/zniknęła jakaś potrwa czy w zakresie naszych usług pojawiło się coś nowego? Również wtedy nie ma problemu, ponieważ szkielet naszej tabelki jest również edytowalny. Po kliknięciu w dowolną komórkę tabeli kiedy zacznie mrugać kursor pokaże się menu: . Możemy sobie dodać/usunąć wiersz czy kolumnę klikając w odpowiednią ikonkę (pokaże się po najechaniu myszą dymek z opisem funkcji). Rozszerzone funkcje edycji tabel mamy w górnym menu w pozycji Tabela. Możemy również w dowolnym dziale dodać sobie nową tabelę, pamiętać należy tylko, aby ze względu na responsywność strony nie umieszczać po bokach żadnych elementów. Ze względu na responsywność pozycja tabel jest wymuszona: ustawia się na środku względem elementu nadrzędnego!

Galeria zdjęć

W teorii galeria zdjęć jest całkowicie automatyczna: sama generuje miniaturę i powiększenie, wstawia zdjęcie na stronę nadając jej numer porządkowy, co pozwala nam na dodatkowe opisanie obrazka, np.: proszę zwrócić uwagę na wyjątkową aranżacje łazienki na zdj nr 5.

Ale pozostaje kilka istotnych pytań: w jakiej kolejności zdjęcia układają się na stronie i czy mamy na to jakiś wpływ? Jak duże zdjęcia wgrywać, aby strona wyświetlała się poprawnie i szybko ładowała? I czym te zdjęcia najlepiej obrabiać samodzielnie?

Wyjaśniamy:
1. ze względu na prędkość ładowania się strony zdjęć w galerii nie powinno być więcej, jak 20, rozmiar: dłuższy bok nie powinien przekraczać 800 do 1000 pikseli,
2. jeśli zdjęcia są jednego rodzaju (rozszerzenia), to układają się na stronie wg nazwy, najpierw cyfry od 0 do 9 oraz litery alfabetu łacińskiego od a do z, nie zaleca się w nazwach plików stosować znaków specjalnych klawiatury czy polskich 'ogonków' typu ś,ć itp. Również nie stosujemy przemiennie małych i dużych liter, gdyż serwery ich nie rozróżniają,
3. jeśli zdjęcia są różnych rozszerzeń układają się na stronie najpierw wegług ich typów (rozszerzeń): zdjęcia typu JPG (rozszerzenie .jpg, .JPG), zdjęcia typu PNG (rozszerzenie .png) oraz zdjęcia typu GIF (rozszerzenie .gif), generalnie zalecanie jest stosowanie zdjęć jednego formatu,

Jak samodzielnie przygotować zdjęcia do galerii?

Polecamy znakomity darmowy i łatwy w obsłudze program IrfanView, który wraz z polską wersją językową pobrać sobie możemy tutaj (nie zawiera żadnych reklam ani wirusów!). Poniżej opisanie zostanie procedura przygotowania zdjęcia do galerii, przy czym jeśli chcemy od razu nadać zdjęciu opis zostanie to wyróżnione na niebiesko.

Przygotowanie zdjęcia do galerii:
1. otwieramy zdjęcie w programie IrfanView,
2. na górnym panelu klikamy Obraz potem Zmień rozmiar obrazu, jeśli nasze zdjęcie jest horyzontalne w pozycję Szerokość wpisujemy 800 do 1000 a jesli wertykalne to w pozycję Wysokość,
3. na górnym panelu klikamy Edycja potem Wstaw tekst..., okienko przesuwamy myszą, aby widzieć obrazek,
4. w pozycję Tekst wpisujemy opis obrazka, tło ustawiamy półprzezroczyste, dajemy cień, czcionka mniej więcej 30, po każdej operacji klikając Podgląd i jeśli jesteśmy zadowoleni klikamy OK,
5. na koniec możemy wyostrzyć zdjęcie Obraz ⟶ Zwiększ Ostrość,
6. zapisujemy nasze zdjęcie, najlepiej w uprzednio przygotowanym katalogu: Plik ⟶ Zapisz jako, wybieramy format .jpg a jakość ustawiamy na ok. 70-80%,
7. gotowe zdjęcie przesyłamy na naszą stronę internetową do sekcji Galeria,

Responsywne wprowadzanie treści

Jak już wspomniano responsywnośc to poprawne wyświetlenie strony na wszystkich możliwych ekranach od najmniejszych telefonów z ekranem 320 pikseli do gigantycznych monitorów 55 cali 4K, wliczając wszystkie urządzenia i ekrany między nimi.

O ile ze zwykłym tekstem nie ma problemu, bo to element liniowy, który zawsze wypełni każdy 'pojemnik', to kłopoty są z elementami, które ogólnie możemy nazwać blokami. W naszym przypadku to zdjęcia i tabelki. Toteż do zdjęć jest automatyczna galeria a tabele są konstruowane na etapie zamówienia, aczkolwiek wprowadzając tekst samodzielnie jest możliwość wklejenia takiego elementu blokowego do treści, ale z pewnymi ograniczeniami. Otóż ustawi się on pośrodku komórki a po bokach nie może nic być. Generalnie nie ma problemu, bo 60% odwiedzin naszej strony to ekrany małe, więc tych pustych boków w ogóle nie będzie widać (chociaż w praktyce wystarczy obrócić smartfon o 90 stopni, to jednak w pozycji wertykalnej urządzenia mało kto przegląda internet). Natomiast na ekranach np. tabletów i powyżej puste boki to jakieś 30% przestrzeni i w zasadzie również jest to do przyjęcia.

Jeśli jednak jesteśmy perfekcjonistami specjalnie został opracowany system responsywnych szablonów. Jak to działa? Otóż są to dwa bloki, wewnątrz które możemy wkleić dowolne elementy. np tekst a do drugiego obrazek. Na dużych ekranach (od tabletu w górę) te bloki będą obok siebie a na mniejszych automatycznie ułożą się jeden pod drugim. Przykład tego rozwiązania możemy zobaczyć na każdej z przykładowych stron gdzie w sekcji Kontakt część tekstu jest wprowadzona tradycyjnie a część z zastosowaniem responsywnych szablonów.

Jak to wdrożyć? Instrukcja:
1. Przechodzimy do punktu 1b administracji strony i wybieramy sekcję do edycji.
2. Aby widzieć granice bloków na górnym menu dajemy Widok i Pokaż bloki.
3. Następnie Wstaw i Wstaw szablon...
4. Mamy do dyspozycji trzy szablony, są one takie same bowiem na tej samej stronie internetowej dany szablon możemy wstawić tylko raz (czyli operację użycia responsywnego szablonu możemy powtórzyć trzy razy, za każdym razem używając innego szablonu).
5. Wstawiamy treść do bloków pamiętając, że blok drugi na mniejszym ekranie ułoży się pod blokiem pierwszym, ważne: ilość tekstu obok obrazka nie powinna przekroczyć 20-30% wysokości obrazka, gdyż przy zwężaniu ekranu wysokość tekstu będzie rosła a obrazka nie, więc w końcu tekst może być wyższy, jak obrazek.
6. Sprawdzamy rezultat i -ewentualnie- modyfikujemy.