• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed RWD - stron internetowych, rozwój swoich umiejętności

Object Storage Arubacloud
+1 głos
380 wizyt
pytanie zadane 9 lutego 2019 w HTML i CSS przez SZYMII Użytkownik (510 p.)
zamknięte 5 marca 2019 przez SZYMII

Dzień dobry, lub dla czytających to wieczorem, dobry wieczór,

Jeśli ktoś przestraszył się długością posta zapraszam na sam dół, postarałem się tam wyogólnić moje pytania.

Zwracam się dzisiaj do Państwa z pytaniem związanym z responsywnością stron internetowych, tak rozumiem temat był poruszany na forum nie jeden raz i może te pytanie u niektórych osób wywołać irytacje.

W ostatnim czasie udało mi się stworzyć stronę internetową (http://tech-web.5v.pl/ ), związaną z tematyką informacyjną (jeśli można to tak nazwać), która była w jakiś sposób zainspirowana popularnymi portalami: spidersweb, whatnext etc. Jak to u osób młodych udało mi się stworzyć layout strony, a następnie zdecydowałem, aby tak strona w przyszłości była responsywna, zamiast już od razu na starcie pomyśleć o tym.

Siedzę od jakiegoś już czasu i rozmyślam nad pomysłem rozwiązania mojego problemu, chciałbym aby efekt strony był w sposób bardzo podobny do Onet.pl, że przykładowo moja struktura strony nie została naruszona do szerokości 1200px , rozumiem fakt, że moja strona może nie być w pełni przystosowana od razu do zamierzonego celu, ale każdy popełnia błędy.

Zastanawiam się również nad technikami wykonywania responsynych stron internetowych, tak wiem, że są od tego frameworki typu Bootstrap, jeśli by ktoś się uparł da się to również oskryptować. (nie wiem są jeszcze jakieś techniki, szczerze sama właściwość zoom może wystarczyć)

Ja raczej zdecyduje się na media queries + flexbox (bo kiedyś już to stosowałem) i raczej będę się tego trzymał, ale jestem teraz w wielkim zakłopotaniu i zadaje sobie tysiące pytań: Czy robiąc stronę opartą na flexy stosować elementom strony właściwości "width" czy może "flex-grow, flex-shrink, flex-basis", Stosować procentowe wartości czcionek/ rem/em czy może px, Jak przystosować od razu stronę do bardzo łatwego skalowania jej? Chciałbym, aby moja wiedza w przyszłości była na zadowalającym poziomie, że przykładowo za 4-5 lat pójdę do pracy i nie będzie takiej sytuacji "Panie, tak tego się nie robi";

Chciałbym nauczyć się represywności, można to tak powiedzieć na 100%, nie chciałbym otrzymać od Państwa odpowiedzi, a media queries najlepsza ucz się tego, powodzenia. Potrzebuję Państwa pomocy, chciałbym responsywności, naprawdę nauczyć się na porządnym poziomie, że kolejne moje projekty będą bardziej przystosowane do urządzeń mobilnych i żebym nie miał z tym problemu.

Najlepiej jakby Państwo, opisali własną przygodę z responsywnością i jak się do tego zabrali, nie odrzucam oczywiście jakiś poradników, które pomogą mi w pracy. Każda pomoc się przyda i będzie dla mnie motywująca!

Odbiegając delikatnie od problemu, podobną sytuacje mam w JS, moją wiedzę zdobywałem dzięki portalowi kurs.js, doszedłem tam do rodziału Ajax (wcześniej 2/3 krotnie przejrzałem wcześniejsze tematy, które szczerze nie są w doskonały sposób przystosowane dla osób które dopiero zaczynają programować, często w bardzo prostych przykładach są zdarzenia, odwołanie do tematów, które są bardzo daleko). Moja wiedza teoretyczna z wcześniejszych tematów jest na dobrym poziomie, umiem posłużyć się obiektami etc., zrobiłem klika projektów przykładowo slider i klika udogodnień w powyższej stronie, ale również jestem w momencie, że posiadam jakiś zakres wiedzy, ale nie jestem pewny czego do przykładowego problemu użyć, zwykłego JS czy może dołożyć do tego obiekty itd.

Skracając mój wywód mam do Państwa następujące pytania:

  • Poproszę jak najwięcej technik umożliwiających responsywności stron internetowych,
  • Zdecydowałem, się raczej na media+flexbox (ponieważ już kiedyś to robiłem i znam teorię dotycząca flexbox, strona ma w wyglądzie być podobna do portalu Onet.pl i nie zmieniać swojej struktury do rozdzielczości 1200px), lecz zastanawiam się jak przystosować stronę to resposywności - czcionki definiować %/px/rem/em, "width" czy może "flex-grow, flex-shrink, flex-basis" etc,
  • Jak zabrać się do tego zacząć, zmniejszać szerokości ekranu od góry w dół, czy może na odwrót,
  • Jakie stosować programy do wglądu jak strona się zachowuje, czy samo toggle device toolbar z Google Chrom wystarczy?
  • Jak przystosowywać wielkość czcionki, elementów strony w zależności od rozdzielczości, tzn czy jest jakiś ogólny standard mówiący, że np. przy szerokości 1000px stosować czcionkę 16px i maksymalna szerokość divów na 90% etc. 

Ogólnie ucząc się responsywności korzystałem kiedyś ze stron:

Jeśli będzie coś niejasne to proszę pisać! Od razu postaram się zedytować post.

Dla osób, które poszukują kodu źródłowego: http://tech-web.5v.pl/

Temat jest ciągle otwarty, więc zapraszam serdecznie do udzielania odpowiedzi! laugh

komentarz zamknięcia: Koniec wątku

1 odpowiedź

+1 głos
odpowiedź 9 lutego 2019 przez w2 Obywatel (1,110 p.)
Techniki i wyjaśnienia responsywności na Bootstrapie (szablon jest szybszy niż tworzenie wszystkich własnych klas). Szczególnie przydatna dokumentacja własna Bootstrapa (1):
1. https://getbootstrap.com/docs/4.0/layout/grid/
2. https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
3. https://kursbootstrap.pl/rusztowanie-szablonu/

___
Zachowania strony w rożnych rozdzielczościach kontrolujesz w samej przeglądarce opcją: toggle device toolbar

___
Jakimi wartościami operować przy dostosowaniu strony dla rożnych rozdzielczości ekranu?- prawdopodobnie do większości zastosowań najlepsze są "%" (Bootstrap). Ja stosowałem również "px" gdzie potrzebowałem dużą dokładność zachowania zmiany layoutu w projekcie (tzn aktywowanie responsywnosci kiedy przeskakiwała np z 1110px na 1109px; czyli nie była domyślną klasą Boostrapa)
Używam czcionek z wartościami "px".
___

Jest wiele rożnych urządzeń mobilnych i mają  rożne rozdzielczości- żeby strona poprawnie zachowywała się na nich musisz zbudować (w css) dodatkowe, indywidualne zachowania pod najczęstsze rozdzielczości. Zapoznawałem się z tym tematem i jednocześnie opisałem zebrane materiały w tym poście:
https://forum.pasja-informatyki.pl/345513/emulacja-rozdzielczosci-fizycznej-ekranow-smartfonow-rozdzielczosc-edycja-tematu
komentarz 9 lutego 2019 przez SZYMII Użytkownik (510 p.)
edycja 9 lutego 2019 przez SZYMII
Super dzięki za odpowiedź, szczerze mówiąc nie byłem optymistycznie nastawiony na Bootstrapia, lecz dzięki twojej wypowiedzi dostrzegłem duże plusy w tworzeniu resposywnych stron za pomocą tego frameworku.

Prawdę mówiąc muszę zastanowić się jeszcze nad wyborem i zebrać wady i zalety obydwu rozwiązań.

Co do rozwiązania z Bootstrapem, może jak udało ci się zauważyć projektowałem tą stronę z pomocą flexów, więc moje pytanie brzmi:

Czy niektóre właściwości flexów mogą wpłynąć negatywnie na budowanie siatki Bootsrapowej?

A i jeszcze jedno dotyczące toggle device toolbar. Podgląd tego narzędzia pokazuje w moim pokazuje, że strona będzie się cały czas zmieszać, co jest absurdem, ponieważ przykładowo zmniejszając okno przeglądarki jest wprost przeciwnie.
komentarz 9 lutego 2019 przez lateM Pasjonat (17,660 p.)

Poleciłeś w jednym poście zarówno Bootstrapa, w3schools.com jak i jakiś przestarzały kurs dotyczący siatki bootstrapa... zapomniałeś jeszcze o kursach PHP od MZ. laugh To jakiś troll-post? 

komentarz 9 lutego 2019 przez w2 Obywatel (1,110 p.)
Wszystkie linki miałem zapisane w zakładkach (nie sprawdzałem ich aktualnosci- ale nie zdążyły się zestarzeć, można je potraktować jako inne ujęcie tego samego tematu i wiedzy. Przecież się nie przeterminowały.). Wiem że jest tutaj na forum (pod wplywem niektórych autorytetów) silny ostracyzm na: w3schools, ale ze swojego doświadczenia powiedziałbym że nauczyłem się tam sporo. Żeby kwestionować zawartą tam wiedzę trzeba być już jakimś specjalistą. Ja nie jestem. Ty jesteś? Ja, do swoich celów wykorzystałem tamtą stronę produktywnie, poza tym informacja z rożnych źródeł daje lepszą wiedzę uśrednioną, i jest lepiej przyswajalna i ugruntowywana.
komentarz 9 lutego 2019 przez SZYMII Użytkownik (510 p.)

@MateuszB, Jeśli masz pojęcie o Bootstrapie to wypowiedz się w osobnym komentarzu, bo jeszcze nie zauważyłem twojej wypowiedzi. laugh

komentarz 9 lutego 2019 przez lateM Pasjonat (17,660 p.)
Bootstrap 4 stoi na flexboxie, więc jeśli się już uprzesz na tego Bootstrapa i chcesz wykorzystać przynajmniej kilka % z tych wszystkich pre-definiowanych klas, to  i tak musisz znać flexa - i właśnie od niego zacząć naukę wraz z regułami @media - alternatywą i przyszłościowym rozwiązaniem będzie również CSS grid. Kolega się uczy z Css-tricks i z kodu_je a Ty mu wyjeżdżasz z w3schools... Z resztą "Bootstrap 3 Tutorial" z w3schools który podlinkowałeś i kolejny kurs bootstrapa 3 średnio mu pomoże w nauce bootstrapa 4.0. (którego też podlinkowałeś) Pierwsze z brzegu "class="img-responsive" to teraz "img-fluid".
komentarz 9 lutego 2019 przez w2 Obywatel (1,110 p.)

Czy niektóre właściwości flexów mogą wpłynąć negatywnie na budowanie siatki Bootsrapowej?

Nie jestem zawodowcem w tej dziedzinie. Jakbym łączył bootstrapa z innym systemem- przeprojektował bym wszystko dostosowując stronę do jednego hermetycznego środowiska. Dostosowałbym do tego, które jest większe albo bardziej uniwersalne, albo b.znajome itp.To by dawało więcej korzyści w przyszłości z rozbudowy strony i nie powodowałoby błędów. Nie mieszałbym kilku razem- bo można stracić orientację.

Z doświadczenia swojego. Pierwsze strony budowałem w oparciu o czysty html z własnym nazewnictwem. Ale jak poznałem bootstrapa, to wymieniałem cała zawartość starego, łącznie z arkuszami css na te z klasami bootstrapa. Zrobiłem stronę od nowa.

---

Nie rozumiem problemu z toggle device toolbar. Ale to jest jedyne sensowne narzędzie do projektowania i podglądu. Kiedyś projektowałem w Adobe Dreamweaver, które miało swój własny podgląd strony- ale w oparciu o później nabytą wiedzę, całkowicie te środowisko zarzuciłem.

komentarz 9 lutego 2019 przez w2 Obywatel (1,110 p.)
Wystarczy spojrzeć że jest nowa wersja i można dokumentację wchłaniać w nowej wersji. Proszę: https://getbootstrap.com/docs/4.2/layout/grid/

Z tymi linkami bardziej chodziło mi o zasady i kierunek. Co z tego że zmieniała się nazwa jakiejś klasy- jak reguły są takie same?
komentarz 9 lutego 2019 przez SZYMII Użytkownik (510 p.)
Nie rozumiem dlaczego twierdzisz, że zdecydowałem się na Bootstrapa, nigdzie tego nie powiedziałem, zapytałem Państwa o doświadczenie związane z tym tematem. Nie rozumiem również twojego poirytowania dotyczącą Css-tricks i z kodu_je, nie stwierdziłem jasno, że tylko z nich korzystałem (przecież nie podlinkuje ci 20 kanałów na yt) były to portale, które wpadły mi do głowy jako pierwsze, jeśli ty znasz lepsze to podlinkuj je nikt nie jest idealistą.
komentarz 9 lutego 2019 przez w2 Obywatel (1,110 p.)

Potrzebuję Państwa pomocy, chciałbym responsywności, naprawdę nauczyć się na porządnym poziomie, że kolejne moje projekty będą bardziej przystosowane do urządzeń mobilnych i żebym nie miał z tym problemu.

Pracuj na żywej tkance. tzn na projektach które chcesz wdrożyć. Uczysz się responsywnosci w trakcie projektowania strony. Najpierw zrób stronę dostosowując ją do rozdzielczości swojego monitora. Responsywność to tak naprawdę dodatkowe klasy i warunki w <css>. Które przyłaczasz/dodajesz do szablonu <html> i sprawdzasz czy zachowują się przewidywalnie i zgodnie z oczekiwaniami. Rozwiązujesz problemy na bieżąco- szukając przykładów w necie do Twojego aktualnego problemu. Nauka polega na stopniowym wdrażaniu przyuważonych rozwiązań.

komentarz 9 lutego 2019 przez SZYMII Użytkownik (510 p.)
O to się nie bój znam ogólnej responsywności.

Naszło mnie jeszcze jedno pytanie, które jest chyba najbardziej istotne w tym temacie:

Jak przystosowywać wielkość czcionki, elementów strony w zależności od rozdzielczości, tzn czy jest jakiś ogólny standard mówiący, że np. przy szerokości 1000px stosować czcionkę 16px i maksymalna szerokość divów na 90% etc.

Co do problemu z toggle device toolbar znalazłem alternatywne narzędzie, któe spełania swoją role: http://app.xrespond.com/
komentarz 9 lutego 2019 przez w2 Obywatel (1,110 p.)
Nie znam żadnego takiego standardu ad. web-designu (Może się mylę?). Są standardy np.wydawnicze- dotyczące publikacji książkowych; projektowe- w sensie architektonicznych specyfikacji inwestorskich itp. Chyba że robisz stronę dla Ministerstwa Finansów- dostaniesz specyfikację od inwestora: z kolorystyką, wilelkosciami szpalt, własnymi standardami (żadnej czcionki font-KIDS!) etc. Jakby była taka norma- wszystkie strony byłyby robione na jedno kopyto- a chyba chodzi raczej o różnorodność?
Stosuj zasady: wyczucia, proporcji i własnej pomysłowości etc. Ma być widocznie, nie przysłaniać, i ma być <friendly> w obsłudze.
Jak ustawisz czcionkę 16px- to zawsze przecież możesz zmienić jak będziesz czuł że coś jest nie tak? Niech taki niuans nie zatrzymuje parcia do przodu- nawet z błędami.
komentarz 10 lutego 2019 przez SZYMII Użytkownik (510 p.)

Super, dzięki za pomoc, prawdopodobnie odezwę się jeśli uda mi się sfinalizować projekt yes

komentarz 10 lutego 2019 przez w2 Obywatel (1,110 p.)
Projektowanie jest to proces ciągłego przybliżania. Wciąż poprawiasz, dążąc do najlepszego wyniku.
Tak jak w Breaking Bad;)-  wszyscy robią dobrą metę na 60%, Pinkman robi znakomitą na 96%, Boetticher robi wybitną na ~97%(mogę się mylić) a jako jedyny Walter Hartwell White robi dzieło sztuki na 99,6%. Pomiędzy 97% a 99% jest przepaść.;)
komentarz 12 lutego 2019 przez pirouetti Mądrala (6,490 p.)
No chłopie, nigdy nie zrozumiałem nic tak dobrze jak na twoim przykładzie :P

Podobne pytania

0 głosów
3 odpowiedzi 684 wizyt
pytanie zadane 23 września 2018 w HTML i CSS przez Kubax Początkujący (430 p.)
0 głosów
1 odpowiedź 469 wizyt
0 głosów
2 odpowiedzi 223 wizyt
pytanie zadane 8 lipca 2020 w HTML i CSS przez Author[] Gaduła (3,130 p.)

92,555 zapytań

141,403 odpowiedzi

319,554 komentarzy

61,939 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...