Strona - wizytówka

Koziołek
Moderator
  • Rejestracja:prawie 18 lat
  • Ostatnio:około miesiąc
  • Lokalizacja:Stacktrace
  • Postów:6821
0

Proszę o ocenę układu, kolorów itp. Przy czym

  • nie jestem grafikiem
  • jestem daltonistą
  • nie ja robiłem logo

Co do zdjęć to będą później, panu linki ze stocka wyślę, pan na fakturę wrzuci..


Sięgam tam, gdzie wzrok nie sięga… a tam NullPointerException
niezdecydowany
niezdecydowany
  • Rejestracja:ponad 12 lat
  • Ostatnio:około 9 lat
  • Lokalizacja:Bieszczady
0

Czcionka mi się nie podoba, dobra do gazet(serio:D) jednak jeżeli chodzi o strony to polecam: 'Open Sans' .
Kolorystyka wygląda spoko - układu nie ma co oceniać, bo nie za dużo tu jest :)


"Perhaps surprisingly, concurrent programming isn’t so much about threads or
locks, any more than civil engineering is about rivets and I-beams."
edytowany 1x, ostatnio: niezdecydowany
twonek
  • Rejestracja:ponad 10 lat
  • Ostatnio:prawie 2 lata
  • Postów:2500
0

Czcionka też mi się nie podoba. I niebieskie menu na ciemnoniebieskim tle może być mało widoczne przy mniejszym rozmiarze ekranu.

sockenesser
  • Rejestracja:ponad 10 lat
  • Ostatnio:prawie 9 lat
  • Postów:57
0

ładnie, estetycznie, minimalistycznie. czcionka znośna, ale literki za małe. kolorystyka bardzo odpowiednia moim zdaniem. bez przesadnie wielkich kontrastów, niebieski świetnie pasuje do stron związanych z prawem.

niezdecydowany
niezdecydowany
czcionka nie jest "znośna" - bo tak się nie robi - są pewne standardy których się trzymamy.
TK
  • Rejestracja:ponad 13 lat
  • Ostatnio:5 dni
  • Postów:342
0
  1. Czcionka mogłaby być lepsza ale o tym już było
  2. Odnosze wrażenie, że w górnym menu przestrzeń ponad tekstem jest mniejsza niż pod tekstem. Odnosze również wrażenie, że tekst nie znajduje się na środku pionowych linii oddzielających poszczególne elementy menu. Być może tekst został wyśrodkowany za pomocą matematycznych przeliczeń i jest wyśrodkowany matematycznie poprawnie. Jednak poszczególne znaki mają to do siebie, że są różnej wysokości i najbardziej znacząca część znaku niekoniecznie jest w jego środku. Dla przykładu litera "ą" jest dość wysoka, ale ogonek jest mniej istotny niż "a". Dlatego jeżeli wyśrodkujesz taką literę matematycznie to możesz uzyskać wspomniany przeze mnie efekt.
  3. Strasznie scisniety jest tekst na tym projekcie. Chodzi mi zarówno o odstępy między nagłówkami / akapitami jak i interlinie. Zwróć uwagę choćby na napis "Legal service" - pod literą "g" masz literę "t" - obie litery prawie na siebie wchodzą.
  4. Zwiększyłbym marginesy między tekstem a obrazami.
  5. Po prawej masz fotke, poźniej fotka jest po lewej a poźniej mapka znowu po prawej, na dodatek mapka nie jest równo pod fotką tylko bliżej środka. Troche to chaotyczne.
edytowany 2x, ostatnio: tk
Koziołek
Moderator
  • Rejestracja:prawie 18 lat
  • Ostatnio:około miesiąc
  • Lokalizacja:Stacktrace
  • Postów:6821
0

@tk,

ad 1. już poprawiłem, bo rzeczywiście wygląda to średnio.
ad 2. rozumiem o co chodzi, ale to na później. Użycie wyrównania na zasadzie stała szerokość boksu + text-align:center;
ad 3. Też już poprawiłem.
ad 4. o ile?
ad 5. Hm.... drugiej foty może nie być w finalnym rozwiązaniu, szczególnie, że dostałem już teksty i się okazało, że w tym bloku będzie go dość dużo.


Sięgam tam, gdzie wzrok nie sięga… a tam NullPointerException
niezdecydowany
niezdecydowany
stała szerokość boxu ok, ale będzie do tego dorabiał jakieś RWD ? btw, jako ikonki do menu możesz sobie użyć getbootstrap.com/components/ to daje całkiem fajnie wizualnie efekty.
TK
Co do 4: przesunalem sobie w gimpie ten tekst tak aby odstep miedzy tekstem a zdjeciem wynosil 20px. Dla mnie jest to wartosc optymalna, ale to dosc subiektywne odczucie i nie kazdy musi podzielac moje zdanie.
Koziołek
@niezdecydowany, teoretycznie jest RWD i nawet działa... nie mam niestety urządzeń applowych i starych IE by to sprawdzić.
niezdecydowany
niezdecydowany
@Koziołek jeżeli masz to gdzieś zaplołdowane / masz jakąś prevke to podaj adres może uda mi się jutro(dzisiaj) sprawdzić na ipadzie. BTW, nie jest Ci to potrzebne, w firefoxie, masz takie narzędzie jak "widok trybu responsywnego" - użyj po prostu wbudowanego narzędzia developerskiego firefoxa czyli "zbadaj element" -> w prawym rogu jest ikonka.
Koziołek
Moderator
  • Rejestracja:prawie 18 lat
  • Ostatnio:około miesiąc
  • Lokalizacja:Stacktrace
  • Postów:6821
0

Kolejna wersja po uwzględnieniu poprawek.


Sięgam tam, gdzie wzrok nie sięga… a tam NullPointerException
niezdecydowany
niezdecydowany
teraz jest git :) na dole, tam gdzie jest Kontakt, Adres i Lokalizacja można wmontować parę fajnych wodotrysków - Kontakt => zamienić na jakiś ajaxowy formularz(sporo inwencji można tu wrzucić) a lokalizacje i adres można zmontować w jeden element, hm ?
niezdecydowany
niezdecydowany
Chociaż, można by pomyśleć nad większym odseparowaniu rodzaju doradztwa(tak to się nazywa?) - prawo cywilne, prawo rodzinne od szczegółów - kolor i rozmiar trochę się zlewa. P.S.2 może zamiast osobnych stron na kontakt/o mnie/doradztwo prawne zrobić slider ? została by w tedy tylko jedna strona.
Endrju
  • Rejestracja:około 22 lata
  • Ostatnio:ponad rok
1

Teraz to nie jest git. :-P Wybrałeś font, który nie ma polskich znaków diakrytycznych - wygląda to niedobrze, bo są one zamieniane na takie z jakiegoś Times New Roman albo innego obrzydlistwa.

Dlaczego pomiędzy białą i niebieską częścią jest taka duża przerwa? Moim zdaniem nie jest tam potrzebna aż taka, szkoda kółka w myszce. Brakuje telefonu a mapka jest za mała i niewyśrodkowana (nie znam się, ale podobałoby mi się, gdyby można było ją powiększyć jakoś - np. tak jak teraz robi się ze wszelkimi obrazkami)


"(...) otherwise, the behavior is undefined".
niezdecydowany
niezdecydowany
jeżeli zaimportuje googlowego open sasa polskie znaki bez problemu zadziałają,
Koziołek
@niezdecydowany, googlowy zaimportowany. @Endrju, bo ja nie rozumiem jak działa min-height i height z elementami z float w środku... znaczy wiem jak to w teorii działa, ale mam problem z praktycznym zastosowaniem.
niezdecydowany
niezdecydowany
@Koziołek ja importuje to i działa: "http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300"
niezdecydowany
niezdecydowany
k!@ mój błąd - w projekcie w którym używam tej czcionki nie ma polskiego języka - fuk fail... Z polskimi znakami używam: font-family: Arial, Helvetica, sans-serif;
TK
  • Rejestracja:ponad 13 lat
  • Ostatnio:5 dni
  • Postów:342
0
  1. Tekst jest nadal dosc scisniety. Zdanie "Zapraszam do zapoznania sie z profilem mojej dzialalnosci" jest chyba w nowym akapicie? Bo troche nie wyglada to na nowy akapit - odstep jest za maly. To samo z odstępami między kolejnymi wierszami tekstu w tym samym akapicie (interlinia) - ja bym je powiekszyl. Jako wzór zerknij sobie chocby tu:

http://4programmers.net/C/Artyku%C5%82y/Kodowanie_teksu_%5Bcz._1%5D...

Tylko patrz bardziej na proporcie a mniej na odstepy mierzone w pikselach, bo na 4p jest odrobine mniejsza czcionka i przyjecie takich samych marginesow i interlinii da troche inny efekt.

  1. Czarny kolor czcionki to troche porazka. Zerknij sobie na jakis portal czy to onet, czy wp, czy 4programmers czy jeszcze inny. Tekst jest ciemnego koloru ale rzadko kiedy czarny bo to wyglada troche jak dokument do wydrukowania i nie mam tutaj na mysli dokumentu do druku o wysokiej jakosci. Dodam, ze w Twoim przypadku niekoniecznie tekst musi byc ciemno szary (choc moze akurat bedzie pasowal idealnie). Rownie dobrze moze byc ciemno niebieski, ciemno granatowy lub inny ktory pasuje.

  2. W tekscie słowo "Często" az się prosi o przejscie do nastepnej linii. Wlaściwie to gdybyś słowo "dla" przeniósł z pierwszej linii do drugiej to może akurat słowo "Często" przeniosłoby się z drugiej do trzeciej i by bylo fajnie.

Koziołek
Moderator
  • Rejestracja:prawie 18 lat
  • Ostatnio:około miesiąc
  • Lokalizacja:Stacktrace
  • Postów:6821
0

Podsumowanie na szybko i mnie poprawcie jak coś pomieszałem:

  1. Czcionka z polskimi znakami + kolor
  2. interlinia
  3. łamanie tekstu.

Sięgam tam, gdzie wzrok nie sięga… a tam NullPointerException
edytowany 1x, ostatnio: Koziołek
TK
Mozesz jeszcze rozwazyc uwage uzytkownika Endrju w trosce o rolki w myszkach odwiedzajacych :)
niezdecydowany
niezdecydowany
zmniejszenie tej przestrzeni pomiędzy "o mnie" a "doradztwo prawne" ?
TK
Aha i jeszcze marginesy miedzy akapitami
P7
  • Rejestracja:prawie 11 lat
  • Ostatnio:prawie 10 lat
  • Postów:16
0

ad. v2

Kolory OK, ogólne wrażenie OK, choć dużo pustej przestrzeni.

Interlinia
Powinieneś dać ok. 1,5 raza większą niż czcionka, w PS też jest taka opcja
Przykład
czcionka rozm 12px
interlinia 18px

Odstępy
Nie bój się ich używać.
Nie wiele trzeba, aby strona zyskała na przejrzystości.

Poza tym
Jak dla mnie to mniejsze logo i szerszy pasek, w którym zawarte jest logo, tak by nie upychać go, byle się zmieściło. Takie odnoszę wrażenie.
Mniejsze napisy w menu przy zachowaniu odstępów.

Łacinę pod logiem i wersję polską, dałbym w jakiś ładny dymek lub po prostu wyróżnił od loga.

Szerokość każdego bloku też zachowaj. Ustal sobie np. 80%, ale dla każdego z nich.

W tej chwili masz tak na oko
o mnie 70%
doradztwo 95%
kontakt 80%

Czekam na wersję v3 :)


Koduj, kompiluj, psuj i naprawiaj.
edytowany 2x, ostatnio: pitu7dg
Koziołek
Moderator
  • Rejestracja:prawie 18 lat
  • Ostatnio:około miesiąc
  • Lokalizacja:Stacktrace
  • Postów:6821
0

Wersja numero 3... Chyba już wszystko co było nieteges jest ok.


Sięgam tam, gdzie wzrok nie sięga… a tam NullPointerException
Endrju
  • Rejestracja:około 22 lata
  • Ostatnio:ponad rok
1

Teraz jest tak:

  • dziura pod zdjęciem pozostała,
  • pojawiła się nowa dziura na niebieskim tle po prawej (poprzednio niby też była, ale teraz wydaje się większa),
  • blok "Kontakt" jest jakiś krzywy.

"(...) otherwise, the behavior is undefined".
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)