Тема: Новий дизайн мого сайту

Привіт всім,
є бажання до  Нового року, дещо оновити дизайн власного сайту та спробувати оптимізувати його під сучасні гаджети.

Шаблон для розробки нового стилю сайту.


http://bestwebit.biz.ua/Forum_Replace_02/New_Best_Web_It.jpg

Попросив би Ваших рекомендацій та порад, щодо правильної реалізації задумки.
По черзі,

1. Моменти, які власне потрібно уточнити, оскільки сайт знаходиться у всесвітній мережі та маю відвідувачів із різних країн, (що звісно приємно) то маю бажання зустрічати відвідувачів англійською мовою:

http://bestwebit.biz.ua/Forum_Replace_02/Visitors_Best_Web_It.jpg

Я написав пивітання слідуюче:

I'm from Ukraine

I love it and I wish peace to my country

I'm like programming
and this is my Work Web Site, where I study programming,
my educational articles, practical work, blog and etc.

Welcome to my site,
I hope You can find here something usefull...

Anatolij

Питання 1. Чи коректно я написав привітальний текст англійською мовою?

далі питання буде...

Збираю знання і... роздаю знання :)

2

Re: Новий дизайн мого сайту

I'm like programming

3 Востаннє редагувалося Анатолій (07.12.2015 17:00:54)

Re: Новий дизайн мого сайту

Питання 2: Як краще виконати ефект нерухомої задньої картинки? ,... ось цієї:

Прихований текст
http://bestwebit.biz.ua/Forum_Replace_02/New_Best_Web_It.jpg

і чи це є оптимальним рішенням?

Мені подобається варіант, що презентує сайт в українському стилі, через те й вибрав такий фоновий малюнок (Ukraine_background.jpg).
Далі відвідувач може прокрутити вебсторінку вниз, і фоновий малюнок буде прихований слідуючим шаром ( чи можна сказати слоєм? Здається ж немає такого слова в українській "слой"..).
Це вважаю досить легко реалізується:
Фонова картинка (Ukraine_background.jpg) розміщена в div

<div class="header_background">          
         <img src="/pictures_05/Ukraine_background.jpg" width="100%">          
</div>

CSS:

.header_background {
  width: 100%;  
  position: fixed; 
}

Основний матеріал вебсторінки  буде в div class="next_layer" з CSS:

.next_layer {
  position: relative;  
  z-index: 2;
}

http://bestwebit.biz.ua/Forum_Replace_02/website_style_01.jpg

Такий хід виконання буде нормальним для сучасних гаджетів?
А то раптом вийде що айпади не розуміють z-index=2? :)

Збираю знання і... роздаю знання :)

4

Re: Новий дизайн мого сайту

Replace написав:

I'm like programming

Правильніше буде " I like programming" ???

Збираю знання і... роздаю знання :)

5

Re: Новий дизайн мого сайту

Анатолій написав:
Replace написав:

I'm like programming

Правильніше буде " I like programming" ???

i'm liking programming at the moment, теж мона, майбуть

тут спілкуються українці, про політику, і інше (серед них є програмісти, але дуже мало, тому не заходьте туди лише з питаннями про програмування)
https://discord.gg/Zk29v4P

6

Re: Новий дизайн мого сайту

Гаразд слідуюче цікаве питання.

Питання адаптації веб-сторінки до роздільної здатності дисплею відвідувача.

Особисто в мене робочий монітор з роздільною здатністю 1920*1080 для себе все гарно й роблю, але інтернет наповнений гаджетами з роздільною здатністю наприклад статистика w3schools.com/browsers/browsers_display.asp

Date                Other high    1920x1080    1366x768    1280x1024    1280x800    1024x768    800x600    Lower
January 2015    32.7%            16%              33%      7%              5%             4%              0.3%            2%

мені здається, це мають бути відносно достовірні дані і... я так розумію, це повинна бути роздільна здатність екрану відвідувача, як стаціонарних комп'ютерів так і мобільних пристроїв - смартфонів, планшетів, айпадів та інше.

Висновок із даної статистики: Веб-сторінку необхідно спроектувати так, щоб зручно переглядати інформацію веб-сторінки від вище 1920px (вищу роздільну здатність використовують більше ніж 32%) і,скажімо, до роздільної здатності у 800px (0.3% та ще менше 2%).

Застосую різні стилі основних блоків div, залежно від роздільної здатності моніторів.
Спроектую стилі веб-сторінки для трьох видів роздільної здатності:
1. Все, що більше 960px - ширина інформації веб-сторінки фіксована та = 960 пх (зручно інформацію читати посередині екрану)
2. Від 600 до 960 - "резинова" - у відсотках; (маленька роздільна здатність - використовуємо всю корисну площу монітору)
3. Менше 600 - фіксована і складає 600 пх; (відвідувачів менше 2%, нехай гортають вліво вправо інформацію вебсторінки, на них не сильно думаю заморочуватись)

CSS щось на зразок цього:

/* media screen more than 961px */
@media screen and (min-width: 961px) {
.div_class_more_than_960 { ширина інформації фіксована на сторінці 960 пікселів }
}

/* media screen between 601 and 960 */
@media screen and (min-width: 601px) and (max-width: 960px) {
.div_class_601_960 { ширина інформації у відсотках 100% }
}

/* media screen less then 600 */
@media screen and (max-width: 600px) {
.div_class_less_600 { ширина інформації фіксована та становить 600 пікселів }
}

- Панове, будуть пропозиції зауваження рекомендації ???

Збираю знання і... роздаю знання :)

7

Re: Новий дизайн мого сайту

До отої помилки, що вам уже сказали "I'm like programming" ще додам:

там звісно, малюнок, але це все так в очі кидається:
1) "Торвальдс, Лінус"
2) з MySQLi

Оце наприкінці
3) "Thikn twice,
code once."


Ну, а також - скроллінг вниз передбачав би, що ширина видимого контенту буде завжди однакова...

Мій блог про ОС сімейства *nix - http://nixtravelling.blogspot.com/
Подякували: Анатолій1

8

Re: Новий дизайн мого сайту

Master_Sergius написав:

До отої помилки, що вам уже сказали "I'm like programming" ще додам:

там звісно, малюнок, але це все так в очі кидається:
1) "Торвальдс, Лінус"
2) з MySQLi

Оце наприкінці
3) "Thikn twice,
code once."


Ну, а також - скроллінг вниз передбачав би, що ширина видимого контенту буде завжди однакова...

дякую,

1) Торвальдс, Лінус - має бути  Linus Torvalds
2) Мг-м,... теж думав якось взагалі не звучить "Конспект навчального матеріалу з MySQLi", можливо взагалі його замінити на щось за тематикою, лиш би щось придумати толкове,.. гаразд подумаю декілька варіантів, на зразок "Веб-конспект навчального матеріалу", "Веб-конспект по Базам Даних", "Від новачка до спеціаліста. Бази Даних та інше" загалом потрібен гарнюній слоган...

Хто підкаже поставлю лайк :)

Збираю знання і... роздаю знання :)

9

Re: Новий дизайн мого сайту

Анатолій написав:


2) Мг-м,... теж думав якось взагалі не звучить "Конспект навчального матеріалу з MySQLi", можливо взагалі його замінити на щось за тематикою, лиш би щось придумати толкове,.. гаразд подумаю декілька варіантів, на зразок "Веб-конспект навчального матеріалу", "Веб-конспект по Базам Даних", "Від новачка до спеціаліста. Бази Даних та інше" загалом потрібен гарнюній слоган...

Хто підкаже поставлю лайк :)

Ну дик по шаблону - "Бази даних для чайників" :)

Мій блог про ОС сімейства *nix - http://nixtravelling.blogspot.com/
Подякували: Анатолій1

10

Re: Новий дизайн мого сайту

дизайн такий ніби привіт з дев'яностих

Був собі цебер, та переполуцебрився на полуцебренята
Неймовірний блог про мандри http://bosano.ga

11

Re: Новий дизайн мого сайту

karmeljuk написав:

дизайн такий ніби привіт з дев'яностих

Дякую, за конструктивне зауваження,
гаразд і щоб Ви пане karmeljuk могли б запропонувати за даною тематикою, який дизайн вважався б сучасним та стильним?
Якщо моїх знань буде досить в реалізації Вашої пропозиції та рекомендація буде мати справді якісний характер що ж я б спробував би.

Моя позиція, в першу чергу інформація та знання, що я з того можу отримати - хоча це напевно більш голосні слова...
Робочий зошит він і є робочий зошит.... Ну так, хоч і робочий зошит, можна було б приліпити якусь красу, але щоб сильно перейматись; -Це що дизайнера наймати, чи самому сидіти і розбиратись ще й з дизайном?...
Можу також добавити, що занадто багато часу не хочеться витрачати, щоб реалізовувати супер пупер мега стильний сайт, так як прийдеться сидіти і копати дизайн сайтів, може бібліотеки підключати, а це все мій час, що більш хотілось би витратити в іншому напрямку,
- я можу реалізувати простий дизайн сайту, в цілому особисто мене це не переймає.

Тому приходиться йти на компроміс між часом, стилем, ніби дизайном :)

І загалом давайте визначимось,... у всякому випадку я визначусь, а навіщо мені цей сайт?
Скажу:
ПЕРШЕ І ГОЛОВНЕ це практика, як працюють коди, посилання, Css, PHP, MySQL, Ajax, jQuery, інше чим більше я напрактикуюсь, чим більше я буду знати, тим мені краще і зможу вже заявляти про себе в оголошеннях про роботу - наразі я усвідомлюю що мій рівень недостатній;

Друге: Це мій записник, зручно переглянути скопіювати,  а як ж я там реалізовував ту частину коду, бачити власний ріст як програміста :) 

Третє: Все ж якщо пишу собі помітки, то вже й нехай інші користуються, - це ніби людське вихваляння, ось як я можу чи ще щось типу цього, - хоча за цим пунктом я теж не переймаюсь взагалі,...

Четверте: Так було б здорово щоб робочий зошит мав охайний вигляд, легку навігацію, щоб хоча б сам пам'ятав та знав де які записи - От такий преорітет наразі має дизайн мого сайту.

Збираю знання і... роздаю знання :)

12

Re: Новий дизайн мого сайту

Анатолій написав:
karmeljuk написав:

дизайн такий ніби привіт з дев'яностих

Дякую, за конструктивне зауваження,
гаразд і щоб Ви пане karmeljuk могли б запропонувати за даною тематикою, який дизайн вважався б сучасним та стильним?

нафіг вам стильний? аби тільки було приємно дивитись, а для цього достатньо мати очі
мене найбільше збентежив футер: там прекрасно все вміститься в два рядки, ДВА РЯДКИ КАРЛ, і не потрібно такий великий шрифт, ніби це щось важливе, неекономно забагато місця на півекрану (нафіга?), ну і колір дитячої несподіванки божественний *OK*  *OK*  *OK*  *OK*  *OK*  *OK*  *OK*  *OK*  *OK*  *OK*


Анатолій написав:

Це що дизайнера наймати, чи самому сидіти і розбиратись ще й з дизайном?...

ви на сайтах буваєте? ви хоч дивитесь поверхнево, хоча б поверхнево, на їхню верстку? ви у попередньому пості таку простиню розписали, згадали CSS, яке, до речі, входить в список того, з чим вам так цікаво розбиратись як воно працює - так чому цього не достатньо, щоб просто клацнути десь на сайті "перевірити елемент" і швиденько глянути на той CSS, проаналізувати як він застосовується в реальному житті і зробити певні висновки в сторону свого сайту? та навіть не клацнути, а просто прикинути на перший погляд, як він там реалізований
і якщо у вас так погано з візуальним сприйняттям, то не треба докладати багато зусиль, щоб клацнути два рази, аби зрозуміти чому колір тої ж самої дитячої несподіванки там ні до чого

*мій диван так нагрівся, що аж шоколадка розтанула, яка випадково лежала на ньому*

Психологічні бесіди з додатковою послугою промивання мізків. Недорого.
Не дизайню. Взагалі ні разу. У назві розділу "Дизайн та графіка" є слово "графіка" - ось тут трохи шарю. І не більше. Так, часто питають.
Продам гараж
Подякували: Анатолій, 0xDADA11C72

13

Re: Новий дизайн мого сайту

Анатолій написав:
Replace написав:

I'm like programming

Правильніше буде " I like programming" ???

Тільки якщо не малось на увазі «Я схожий на програмування» :)

py -3 -m pip install git+https://github.com/snoack/python-goto
∩⍴○⌈⍴⍺/∧\∨/⊢○ ⌿⍀⍴⌊

14 Востаннє редагувалося 0xDADA11C7 (08.12.2015 00:45:10)

Re: Новий дизайн мого сайту

Я бачу ваші успіхи у веб-програмуванні, але дизайн і оформлення статей страшенного кольору, мають страшенні шрифт та пунктуацію. Я раджу вам сходити до окуліста з метою перевірки сприйняття кольорів. Я сам роблю подібні помилки в веб-дизайні, але моя робота не інформаційний сайт.

Говорила баба діду: «Я поїду к Білодіду, Ізучу двомовну мову І вернусь обратно знову». А дід бабі: «Не *изди, К Білодіду нєт їзди, — Туди не ходять поїзди»
Подякували: Анатолій1

15

Re: Новий дизайн мого сайту

Можу також добавити, що занадто багато часу не хочеться витрачати, щоб реалізовувати супер пупер мега стильний сайт

не тіште себе, ви все-рівно не реалізуєте такий сайт навіть при витраті багато часу

Був собі цебер, та переполуцебрився на полуцебренята
Неймовірний блог про мандри http://bosano.ga

16

Re: Новий дизайн мого сайту

Візміть Bootstrap або шаблон на його основі і не морочте собі голову.

=)

17

Re: Новий дизайн мого сайту

karmeljuk написав:

дизайн такий ніби привіт з дев'яностих

+1.

Текст дуже погано сприймається. Різна ширина контенту - просто ахтунг!

Подякували: Анатолій1

18

Re: Новий дизайн мого сайту

Всім вдячний за відгуки.
Знову ж по черзі:
Щодо статей веб-сторінок:

Якщо брати питання кольорової гамми наразі існуючого сайту, то колір мені подобається. Чи скажімо так, я полюбляю світлі кольори, мій монітор їх відтворює такий колір який мені приємний, і тут окуліст не допоможе.

Гаразд візьмемо останню статтю що я розглядав, та проаналізуємо кольорову гамму;
Остання стаття - Conversation about website тут скажу фон білий, (хоча можна відтінок білого зробити)
h1 - синій, h2-зелений, h3-коричневий fon-weight: стандартний, не більше не менше - така кольорова гама заголовків мені подобається;

http://bestwebit.biz.ua/Forum_Replace_02/site_design_02.jpg


Розглянемо кольорову гамму попередньої статті, світлі кольори, мені до вподоби...
Чи вони вже такі ядовиті, чи що?

комплекс jQuery, AJAX, PHP, MySQLi
http://bestwebit.biz.ua/Forum_Replace_02/site_design_03.jpg

щодо тексту то звичайний <p>text</p>

Давайте тоді говорити конкретно, -Де, який саме колір страшенний, і як на вашу думку краще, та чому саме такий краще? Якщо це вам не буде сильно обтяжливо....

Збираю знання і... роздаю знання :)

19

Re: Новий дизайн мого сайту

karmeljuk написав:

Можу також добавити, що занадто багато часу не хочеться витрачати, щоб реалізовувати супер пупер мега стильний сайт

не тіште себе, ви все-рівно не реалізуєте такий сайт навіть при витраті багато часу

згоден тут я перебрав, супер пупер не зроблю, та й не хочу; згоден на простий та зручний.
А все ж пане karmeljuk, "привіт із дев'яностих" ну гаразд нехай буде, а як варто на вашу думку зробити? Можна один два зразки посилань вказати, який сайт був доречний?

Збираю знання і... роздаю знання :)

20

Re: Новий дизайн мого сайту

Sensetivity написав:
karmeljuk написав:

дизайн такий ніби привіт з дев'яностих

+1.

Текст дуже погано сприймається. Різна ширина контенту - просто ахтунг!

Який саме текст погано сприймається? Текст статей чи ви маєте на увазі за головну сторінку?

І там і там загальний текст в мене йде просто тегом <p>text text text</p> і що в цьому ахтунг?

Збираю знання і... роздаю знання :)