HTML/CSS - menu bez robienia strony na każdą zakładkę

pytanie zadane 4 lutego 2018 w HTML i CSS przez KtoPyta... Początkujący (280 p.)

Witajcie!

Szukałm trochę po internecie, ale nie mogę znaleźć rozwiązania pewnej kwestii. Otóż chodzi o menu pionowe, w którym umieszczam przyciski do kolejnych sekcji danej strony. Wiem, że da się to rozwiązać na pewno na dwa sposoby. Albo powklejać kotwice do kolejnych nagłówków (ale wtedy taka strona będzie dużo mniej czytelna przez zbyt dużą ilość treści) albo robić oddzielną stronę (plik html) do każdego artykułu, do którego przenoszą przyciski. Drugie rozwiązanie jest o tyle niewygodne, że każda ta strona ma pewien stały kod (menu poziome, gdzie są przyciski do głównych stron, na których to znajdują się te problematyczne menu pionowe prowadzące do podstron), który niestety będzie się na bieżąco zmieniał/rozrastał. A dość uciążliwe będzie poprawianie go na każdej z kilkudziesięciu podstron.

Stąd pytanie - czy da się zrobić tak, by w ramach jednej strony znajdowało się kilka wymieniajacych się sekcji/artykułów/divów? Tak, by po kliknięciu w przycisk na menu pionowym aktualna treść znikała i pojawiałą się ta, którą wywołuje przycisk.

A jeśli się nie da, to jest opcja, by zastąpić pewien fragment kodu jakąś zmienną, czy innym pojemnikiem? Np. przez użycie js (jeśli tak, to proszę o jakiś przykład, bo ten język nie jest mi jeszcze zbyt dobrze znany).

Pozdrawiam i z góry dziękuję za pomoc :)

1	komentarz 4 lutego 2018 przez pablop76 VIP (123,120 p.) To przyszłość a może już teraźniejszość stron internetowych. SPA (Single Page Application)

4	komentarz 4 lutego 2018 przez adrian17 Ekspert (344,860 p.) Strona z tekstem to nie Aplikacja.

1	komentarz 4 lutego 2018 przez pablop76 VIP (123,120 p.) SPA

1	komentarz 4 lutego 2018 przez ShiroUmizake Nałogowiec (46,300 p.) Jak już chcecie robić tak zubożałe SPA, to już lepiej wziąść coś lekkiego knocka lub preact.

komentarz 4 lutego 2018 przez adrian17 Ekspert (344,860 p.)

Już chciałem napisać spory rant na ten artykuł, ale na szczęście pod koniec zorientowałem się że...

Możliwość korzystania z mikroserwisów.

...że to sarkazm. uff!

4 odpowiedzi

odpowiedź 4 lutego 2018 przez niezalogowany
wybrane 7 lutego 2018 przez KtoPyta...

odpowiedź 4 lutego 2018 przez pietia213 Dyskutant (8,110 p.)

Cześć to pierwsze co wymieniasz jest do osiągnięcia w tym o to szablonie: http://demo.themewagon.com/preview/free-bootstrap-one-page-template-download wygląda to nawet estetycznie. Co do kodu to się za bardzo nie wpatrywałem.
Ślę pozdrowionka i powodzonka :D

komentarz 4 lutego 2018 przez Mikołaj Kawczynski Dyskutant (9,160 p.)

Sposobów jest bardzo dużo:

1. Tworzysz sobie sekcje i manipulujesz diplay.

2.Ściągasz podstronę ajaxem i dajesz innerHTML.

3. Możesz przez iframe ale ta się zdecydowanie nie powinno tego robić.

Oczywiście jest więcej ale chcesz chyba proste rozwiązania.

2	komentarz 4 lutego 2018 przez ShiroUmizake Nałogowiec (46,300 p.) A co jeżeli mam 200 podstron?? I na 40 ma się zmienić treść, innych porobić boxy, innych kolorystyke zmienić. Dodajmy warunki brzegowe i robi się coś co ciężko utrzymać.

komentarz 4 lutego 2018 przez Mikołaj Kawczynski Dyskutant (9,160 p.)

No piszesz sobie domyślny styl a jak chcesz mieć inny to sobie po id strony nadpisujesz. akurat css dużo nie waży więc możesz sobie jeden wrzucić. Jak robisz onePage to na ogół interfejs jest stały choć też możesz go zmieniać przez js zależnie od właściwości strony. Jak masz 200 to sobie je folderami pogrupuj ale przy takiej ilości to bym raczej cms sobie już napisał.

komentarz 4 lutego 2018 przez pietia213 Dyskutant (8,110 p.)

@ShiroUmizake,
domniemywałem, że chodzi o skalę mikro, ale skoro aż tak to przepraszam. Mea culpa :D

komentarz 4 lutego 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Optimum za które google nie ucina to maks 250kB. Czyli jak zmienię styl na jednej to muszę 250 też zmienić style na każdej? Ile to mi zajmie? Po trzecie, na każdą witrynę klient będzie musiał poczkać, a 200 ajaxów page-testowi nie przejdzie koło nosa. Po czwarte, zęwnetrzne serwery mają ograniczenia dotyczące ilości AJAX-ów. Po piąte czas ładowania strony się znacznie wydłuży. Co jeżeli mam 200 kategorii? A co jeżeli klient powie, że na tym i na tym ma tego i tego nie widać (a zdarza się przy typowo utrzymaniowej robótce) i co teraz?

@pietia213 - doświadczenia własnego,że zawsze trzeba brać po uwagę punkt, że klient będzie chciał to rozwinąć :).

odpowiedź 4 lutego 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Podstawowe pytanie - co to za aplikacja, w jakim stopniu ma być dostępna offline itp. itd.

Generalnie jeśli chcesz zrobić SPA to polecam np. React. Wsio raz podasz z serwera z danymi początkowymi (React ma fajne wsparcie dla SSR) i potem całą apką użytkownik zarządza już u siebie lokalnie. Wiąże się to z koniecznością przesłania większego pliku JS, choć też bym tutaj nie dramatyzował. Jeśli dobrze zminifikujemy JSa i dodamy np. gzipa to przy dzisiejszych łączach nie jest to duży problem.

Ale oczywiście nie ma sensu stosować React do np. małej stronki www. Owszem, można armatą zabić komara... ale czy ma to sens?

Alternatywnie wcale nie musisz iść w stronę SPA (które moim zdaniem są dobre bardziej do aplikacji, np. CRM, inżynierskie itp., a nie do prostych stronek) tylko wystarczy odpowiednie przemyślenie struktury plików i relacji między nimi. Polecam poczytać o szablonach np. Twig lub Smarty dla PHP, jade czy ejs dla Node i wiele innych. Generalnie zasady są w szablonach podobne, także wybierz sobie jakiś jeden i dobrze go poznaj, a kolejnych w razie potrzeby szybko się nauczysz. Ja zanim przeszedłem na node to w PHP korzystałem ze Smarty i przyznam, że w pełni spełniał moje oczekiwania na tamtejsze strony/apki (choć przyznam, że bardziej były to mniej lub mocniej rozbudowane stronki, a do aplikacji było im daleko).

Alternatywnie możesz też po prostu w samym PHP robić includowanie, ale szablony pozwalają lepiej organizować cały kod i znacznie uprzyjemniają pracę.

Chyba, że nie chcesz w ogóle serwera (PHP, node) no to pozostaje JS i tutaj polecałbym właśnie React.