Choć ludzie zapowiadają kres potrzeby kodowania, tak kontakt z językiem programowania jest póki co nieunikniony. Nie ma niczego złego w posługiwaniu się innym językiem, zwłaszcza tak egzotycznym jak ten. Do zbudowania templatki potrzebna jest jednak nieco większa wiedza i nieco więcej doświadczenia. Na takim portalu aukcyjnym jak eBay wciąż szablony tworzy się w języku HTML i CSS.
W projektowaniu szablonów na potrzeby sprzedażowe liczą się nie tylko twarde umiejętności. Warto uzbroić się też w kilka magicznych sztuczek. Liczne obostrzenia prowadzą do tego, że najlepiej pisać w czystym HTML, a CSS trzymać blisko w głowie. Dochodzi do tego problem utrzymania standardów RWG dla urządzeń mobilnych. Hamburger menu, zwijane tabele, galeria zdjęć. Do tego pole informacyjne z zakładkami, kilka ikon i odnośników do kategorii sklepu. Wszystko to prowadzi do tego, że zbudowanie templatki eBay jest trudne i męczące… Ale da się zrobić. Trzeba się jednak liczyć, z prostym (choć estetycznym) rezultatem.
Szablon eBay i jego budowa
Z zewnętrznego punktu widzenia, tj. od strony serwera i połączenia ftp, templatka aukcyjna jest plikiem xyz.html (np. index html), któremu powinny towarzyszyć dwa pliki: style.css i media.css. Ograniczenia eBay dot. polityki czystego kodu sugerują, że pliki o innych rozszerzeniach, aniżeli CSS i HTML nie są pożądane.
Od strony wewnętrznej też nie powinno być skryptów, ani odniesień do stron skrypty te zawierające. Budowa templatki może być różna, zazwyczaj składa się z:
- mobilne MENU, które na mniejszym ekranie przeistacza się e pasek z ikonką hamburgera;
- subMENU z ikonami i krótkimi zajawkami
- BILLBOARD, czyli banner reklamowy o dużym formacie
- TYTUŁ, nazwa produktu, podstawowe cechy
- SPECYFIKACJA, krótki opis i wyszczególnienie najważniejszych cech
- ZDJĘCIE, galeria zdjęć produktu
- ZAKŁADKI, w jednej linii menu z odnośnikami przełączającymi się między sobą po naciśnięciu
- przedSTOPKA, linia z ikonami i zajawkami
- STOPKA, pasek z logo i odnośnikami
- Informacja o prawach autorskich
eBay wymaga czystego kodu HTML, CSS. Nie akceptuje skryptów. Wszystkie “dodatki”, jak składane menu, zakładki z przełączeniem tekst-arena, podświetlenia tekstu po najechaniu myszką… trzeba wykonywać bez użycia skryptów czy plików o rozszerzeniach js.. Możemy więc podświetlić znacznik HTML przy użyciu selektora, a w zasadzie pseudoklasy: HOVER:
#menu ul li a{
text-decoration:none;
color:#fff;
line-height: 20px;
}
#menu ul li a:hover{
opacity: 0.5;
}W ten sposób można podświetlić (po najechaniu myszką) odnośnik (link) prowadzący do innej strony. Takie oznaczenie interaktywności może pomóc klientowi w zorientowaniu się co do zachodzącej akcji. Możemy też zmienić kolor tła dla tekstu i uzyskać efekt kafelków zmieniających kolor po najechaniu wskaźnikiem myszki. Wystarczy nieco zmienić wygląd kodu.
Nieco trudniejsze będzie podświetlenie za pomocą samego CSS całego kafelka DIV wokół którego zbudowany jest odsyłacz, a nie tylko tekstu odnośnika. Nasze MENU zbudowane jest bowiem z poziomo ułożonych wypunktowań listy, a te nie mają wysokości i szerokości. Istnieje jednak prosty trik, który pomaga w tej sytuacji. Podświetlany kafelek można zbudować za pomocą BORDER.
.blyskcalegoelementu:hover{
background-color: #0b3764!important;
border-top: 12px solid #0b3764;
border-bottom: 13px solid #0b3764;
opacity: 0.5;
}
Kulminacją pracy jest dostosowanie do ekranów urządzeń mobilnych RWG. Najważniejsze jest równe w pionie i poziomie rozłożenie elementów. Loyaut nie może się nam rozpływać. Choć w przypadku czystego kodowania CSS,HTML… może to być trudno wykonalne (zwłaszcza na poziomie mikro). Menu w postaci ściętej. Hamburger z poszerzonymi elementami. Taki blok lepiej się obsługuje i ładniej się prezentuje. Nie wszystkie urządzenia mobilne obsługiwane są za pomocą myszki. Wręcz w większość stuka się palcem. Dobrze więc wykonać efekt potwierdzający kliknięcie. Tym razem będzie to reakcja na dotyk.
