Rozdzielczość monitora do pisania stron - kilka pytań nowicjusza

Rozdzielczość monitora do pisania stron - kilka pytań nowicjusza
SZ
  • Rejestracja:ponad 3 lata
  • Ostatnio:ponad 3 lata
  • Lokalizacja:Londyn
  • Postów:2
0

Cześć,

Aktualnie tworzę swoją pierwszą stronę. Sprawdzając responsywnosc generalnie jest wszystko na swoim miejscu, ramki, obrazki. Uzywam wtyczki do chroma, żeby sprawdzać responsywnosc ale tekst jest miniaturowy.

Jest to wina tego że używam monitora 43 cale w rozdzielczości 4k? Gdy sprawdzam zawartość przykladowo na 1920x1080 wszystko jest małe

Jeśli tak, to w jakiej rozdzielczości najlepiej jest pisać? Używam tego monitora z tego względu, że mogę podzielić sobie ekran dość konkretnie i wszystko zmieścić na ekranie i nie musieć przeskakiwać z zakładki na zakladke.

Pozdrawiam!

RA
  • Rejestracja:około 4 lata
  • Ostatnio:ponad 3 lata
  • Postów:17
1

chyba była jakaś moda na mobile-first już jakiś czas temu w projektowaniu, bootstrap etc., ale można spróbować modyfikować jakiś gotowy template np. stąd https://www.free-css.com/.

Freja Draco
Freja Draco
  • Rejestracja:prawie 7 lat
  • Ostatnio:ponad 3 lata
  • Postów:3394
3

W takiej rozdzielczości, w jakiej ludzie ją będą oglądać. Prawdopodobnie ustawienie sobie w przeglądarce powiększenia 200% powinno dać ci wyobrażenie, jak strona wygląda na typowych monitorach.


piotrpo
  • Rejestracja:ponad 7 lat
  • Ostatnio:około 17 godzin
  • Postów:3277
1

@Freja Draco: 43" to 4 monitory FullHD po 21.5", czyli taki domowy standard. Pytanie z jakiej odległości na to patrzy OP, zakładając skalowanie 100%

LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:2 minuty
  • Postów:8397
2
Szymusz napisał(a):

Jeśli tak, to w jakiej rozdzielczości najlepiej jest pisać?

W jakiej rozdzielczości pisać to kwestia indywidualna, ale testować warto w różnych rozmiarach okna, różnych przeglądarkach, różnych urządzeniach czy nawet systemach operacyjnych. Jeśli masz możliwość sprawdzenia zarówno na monitorze 43 cale w 4k, jak i na 1920x1080, to jeszcze lepiej, bo możesz sprawdzić w praktyce, jak coś się zachowuje i wygląda zarówno na dużym monitorze, jak i w full hd (chociaż jeszcze przydałoby się posprawdzać na komórce choćby - pewne wyobrażenie daje włączenie widoku mobilnego w dev toolsach, chociaż to nie to samo, co prawdziwe urządzenie).


edytowany 2x, ostatnio: LukeJL
Freja Draco
Freja Draco
  • Rejestracja:prawie 7 lat
  • Ostatnio:ponad 3 lata
  • Postów:3394
3
LukeJL napisał(a):

pewne wyobrażenie daje włączenie widoku mobilnego w dev toolsach, chociaż to nie to samo, co prawdziwe urządzenie).

No. Tzw. widok mobilny w przeglądarce nadaje się - owszem - do bieżącej pracy, ale finalnie i tak na telefonie trzeba posprawdzać, bo albo coś się czasem inaczej zachowa, albo wyjdą nieoczywiste na komputerze rzeczy. Że np. w jakiś przycisk jest trudno paluchem trafić.


SZ
  • Rejestracja:ponad 3 lata
  • Ostatnio:ponad 3 lata
  • Lokalizacja:Londyn
  • Postów:2
0

Dzieki za odzew, linki i rady chlopaki :)

@piotrpo: Jako nowicjusz nie bardzo wiem co oznacza skrót OP, wujek google odnosi tylko do overpowered z gier ;) Możesz rozwinąć? Jeśli chodzi o odległość mojej osoby od monitora..jest dość mała, jakieś pół metra może.

@LukeJL: Faktycznie, do głowy mi nie wpadło sprawdzić pliku na laptopie, on ma 1920x1080. Wygląda w porządku, dużo lepiej niż przy użyciu extension z chroma. Tylko nie wiem jak mam sprawdzić to na telefonie? Nie mam jeszcze żadnego linka ani założonej domeny, jest to jedynie folder z plikami..

Więc wygląda na to, że jeśli na telefonie będzie ok, rozmiar monitora i rozdziałka niczego tutaj nie psuje, ale to muszę zweryfikować telefonem jeszcze...

Ostatnie pytanie, polecicie jakiś solidny laptop stricte do kodowania? Nie musi być wysoka półka, ale prosiłbym o jakieś linki może, albo ich nazwy. Uczę się też Pythona i w przyszłości czegoś innego.

edytowany 1x, ostatnio: Szymusz
piotrpo
Bodajże Original Poster
LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:2 minuty
  • Postów:8397
1
Szymusz napisał(a):

@LukeJL: Faktycznie, do głowy mi nie wpadło sprawdzić pliku na laptopie, on ma 1920x1080. Wygląda w porządku, dużo lepiej niż przy użyciu extension z chroma. Tylko nie wiem jak mam sprawdzić to na telefonie? Nie mam jeszcze żadnego linka ani założonej domeny, jest to jedynie folder z plikami..

Możesz postawić serwer na localhoście (np. python3 -m http.server) i wtedy masz serwer, który jest widoczny w całej sieci LAN, więc możesz się komórką do tego podłączyć (zakładając, że komórka jest podłączona do domowego Wifi). Musisz tylko znać lokalny adres IP swojego komputera - możesz to zrobić używając komendy ifconfig, albo ipconfig jeśli korzystasz z Windowsów.
`


piotrpo
Trzeba to zrobić, żeby sprawdzić, czy nie ma jakichś głupot typu odwołanie do lokalnego pliku z obrazkiem itp.
LukeJL
No, to też. Plus jeśli są na stronie jakieś skrypty, które np. pobierają dane przez AJAX itp. to taka strona i tak będzie potrzebować jakiegoś serwera, bo inaczej dane się nie pobiorą.
Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)