1

Тема: Сайт на роботу

Добрий день, зробив сайт на роботу, тобто по роботі можете глянути і вказати на помилки або побажання до покращення https://ustinovka.pp.ua/index.php  *HI*

Подякували: ostap34PHP, NaharD, leofun013

2

Re: Сайт на роботу

Гарно, але подумайте про адаптивність з заголовком на телефоні:
https://image.ibb.co/m3qW98/image.png

Подякували: Zolin_7771

3 Востаннє редагувалося Zolin_777 (12.07.2018 13:10:30)

Re: Сайт на роботу

ostap34PHP написав:

Гарно, але подумайте про адаптивність з заголовком на телефоні:
https://image.ibb.co/m3qW98/image.png

Дякую та я знаю там щось через запит медіа треба, але щось не виходить) працюю над цим.
Це було легко, ось може комусь треба... вказувати треба розмір h1 у vw тобто 7 vw наприклад і всі проблеми))

Подякували: ostap34PHP1

4

Re: Сайт на роботу

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

5 Востаннє редагувалося leofun01 (12.07.2018 20:45:45)

Re: Сайт на роботу

Zolin_777 написав:

Добрий день, зробив сайт на роботу, тобто по роботі можете глянути і вказати на помилки або побажання до покращення https://ustinovka.pp.ua/index.php  *HI*

Шрифти жахливі, особливо там де "Історія газети" і "Наші реквізити".
Фон жахливий. Тягнути картинку 300 кб (1920 x 1080 px), щоб зробити розмитий фон, та ще й використовувати PNG, який призначений для збереження максимальної якості зображення, - це дуже погано. Для прикладу JPG дозволяє зтиснути ту картинку до 15 кб без помітної для людини втрати якості. Але у вашому випадку це можна було зробити чистим CSS

filter: blur(...);

, яке б зайняло кілька байт і зекономило б як мінімум 1 запит до сервера.

+ Перевіряйте свої творіння валідатором.

Подякували: Zolin_777, ostap34PHP2

6

Re: Сайт на роботу

leofun01 написав:
Zolin_777 написав:

Добрий день, зробив сайт на роботу, тобто по роботі можете глянути і вказати на помилки або побажання до покращення https://ustinovka.pp.ua/index.php  *HI*

Шрифти жахливі, особливо там де "Історія газети" і "Наші реквізити".
Фон жахливий. Тягнути картинку 300 кб (1920 x 1080 px), що зробити розмитий фон, та ще й використовувати PNG, який призначений для збереження максимальної якості зображення, - це дуже погано. Для прикладу JPG дозволяє зтиснути ту картинку до 15 кб без помітної для людини втрати якості. Але у вашому випадку це можна було зробити чистим CSS

filter: blur(...);

, яке б зайняло кілька байт і зекономило б як мінімум 1 запит до сервера.

+ Перевіряйте свої творіння валідатором.

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

Подякували: leofun011

7 Востаннє редагувалося leofun01 (12.07.2018 20:42:18)

Re: Сайт на роботу

Ок. Бачу ви виправили деякі помилки і використали гарніші шрифти.
Залишилось майже нічого :
Під "Наші реквізити" bolder (тег <b>) - зайвий.
І щось зробити з фоном.
Ну і з input'ами якось порішати.

+ Ваша картинка втратила якість надто помітно. Я прикріпив сюди оптимізовану версію, можете використовувати. Але все одно колись це доведеться переробити на чистий CSS.
Стосовно оптимізації зображень :
Є такі програми "OptiPNG", "JpegTran", "Optimized JPEG".

Post's attachments

back_opt.jpg 15.34 kb, 163 downloads since 2018-07-12 

Подякували: Zolin_7771

8 Востаннє редагувалося Zolin_777 (12.07.2018 21:07:37)

Re: Сайт на роботу

leofun01 написав:

Ок. Бачу ви виправили деякі помилки і використали гарніші шрифти.
Залишилось майже нічого :
Під "Наші реквізити" bolder (тег <b>) - зайвий.
І щось зробити з фоном.
Ну і з input'ами якось порішати.

+ Ваша картинка втратила якість надто помітно. Я прикріпив сюди оптимізовану версію, можете використовувати. Але все одно колись це доведеться переробити на чистий CSS.
Стосовно оптимізації зображень :
Є такі програми "OptiPNG", "JpegTran", "Optimized JPEG".

Дякую, я взяв вашу картинку, а що за тег <b> ? не робити так жирним а зробити через css? теж варіант, я ще підпилюю код доводжу до красоти ахах) я думаю фон з чистого css буде важкувато написати  *SCRATCH* а і з інпутами порішав)

9 Востаннє редагувалося leofun01 (13.07.2018 20:54:46)

Re: Сайт на роботу

Zolin_777 написав:

що за тег <b> ? не робити так жирним а зробити через css?

Почитайте тут і тут.

Zolin_777 написав:

я думаю фон з чистого css буде важкувато написати  *SCRATCH*

Осьо зробив спеціально для вас :

:root {
    --bg-circle-width: 400px;
    --bg-circle-height: 300px;
    --bg-circle-distance: 30px;
    --bg-circle-blur: blur(80px);
    --bg-shadow-spread: 0px;
    --bg-shadow-horizontal-distance:
        calc((var(--bg-circle-width) + var(--bg-circle-distance)) * 0.866 + var(--bg-shadow-spread));
    --bg-shadow-vertical-distance:
        calc((var(--bg-circle-height) + var(--bg-circle-distance)) / 2);
}
.bg::before,
.bg::after {
    content: "";
    display: block;
    width: var(--bg-circle-width);
    height: var(--bg-circle-height);
    position: fixed;
    left: calc(50% - (var(--bg-circle-width) / 2));
    z-index: -1;
    border-radius: 50%;
    filter: var(--bg-circle-blur);
}
.bg::before {
    background-color: #D2EA22;
    top: calc(50% - var(--bg-circle-height) - (var(--bg-circle-distance) / 2));
    box-shadow:
        calc(0px - var(--bg-shadow-horizontal-distance))
        var(--bg-shadow-vertical-distance)
        0px
        var(--bg-shadow-spread)
        #F5C07E;
}
.bg::after {
    background-color: #4DC3EB;
    top: calc(50% + (var(--bg-circle-distance) / 2));
    box-shadow:
        var(--bg-shadow-horizontal-distance)
        calc(0px - var(--bg-shadow-vertical-distance))
        0px
        var(--bg-shadow-spread)
        #8BF473;
}

Переваги :
1) Не потребує змін в розмітках html.
2) Кастомізабельне.
Завантажте архів і відкрийте у браузері.
(оновлений архів тут)
По моєму дуже подібно.

Подякували: Zolin_7771

10 Востаннє редагувалося Zolin_777 (13.07.2018 08:26:47)

Re: Сайт на роботу

leofun01 написав:
Zolin_777 написав:

що за тег <b> ? не робити так жирним а зробити через css?

Почитайте тут і тут.

Zolin_777 написав:

я думаю фон з чистого css буде важкувато написати  *SCRATCH*

Осьо зробив спеціально для вас :

:root {
    --bg-circle-width: 400px;
    --bg-circle-height: 300px;
    --bg-circle-distance: 30px;
    --bg-circle-blur: blur(80px);
    --bg-shadow-spread: 0px;
    --bg-shadow-horizontal-distance:
        calc((var(--bg-circle-width) + var(--bg-circle-distance)) * 0.866 + var(--bg-shadow-spread));
    --bg-shadow-vertical-distance:
        calc((var(--bg-circle-height) + var(--bg-circle-distance)) / 2);
}
.bg::before,
.bg::after {
    content: "";
    display: block;
    width: var(--bg-circle-width);
    height: var(--bg-circle-height);
    position: fixed;
    left: calc(50% - (var(--bg-circle-width) / 2));
    z-index: -1;
    border-radius: 50%;
    filter: var(--bg-circle-blur);
}
.bg::before {
    background-color: #D2EA22;
    top: calc(50% - var(--bg-circle-height) - (var(--bg-circle-distance) / 2));
    box-shadow:
        calc(0px - var(--bg-shadow-horizontal-distance))
        var(--bg-shadow-vertical-distance)
        0px
        var(--bg-shadow-spread)
        #F5C07E;
}
.bg::after {
    background-color: #4DC3EB;
    top: calc(50% + (var(--bg-circle-distance) / 2));
    box-shadow:
        var(--bg-shadow-horizontal-distance)
        calc(0px - var(--bg-shadow-vertical-distance))
        0px
        var(--bg-shadow-spread)
        #8BF473;
}

Переваги :
1) Не потребує змін в розмітках html.
2) Кастомізабельне.
Завантажте архів і відкрийте у браузері.
По моєму дуже подібно.

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

Подякували: leofun011

11 Востаннє редагувалося leofun01 (13.07.2018 12:35:26)

Re: Сайт на роботу

Zolin_777 написав:

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

Я і подумати не міг, що твориться в Chrome (дійсно лагає), бо перевіряв у Firefox v57.0.1 (там все працює ідеально).
Але є один трюк проти лагів :
-webkit-transform: translate3d(0, 0, 0);

.bg::before,
.bg::after {
    /* ... */
    -webkit-transform: translate3d(0, 0, 0);
}

Попробуйте оновлений архів. Мені цікаво чи на смартфоні будуть лаги.

офтопік

Колись давно проходив кілька співбесід і мене питали про знання CSS. А я скромно так відповідав
"Та трохи знаю ..."
, ех, якби вони тільки знали ...

Post's attachments

html_css_Zolin.7z 4.09 kb, 326 downloads since 2018-07-13 

Подякували: Zolin_777, ostap34PHP2

12 Востаннє редагувалося Zolin_777 (13.07.2018 13:05:08)

Re: Сайт на роботу

leofun01 написав:
Zolin_777 написав:

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

Я і подумати не міг, що твориться в Chrome (дійсно лагає), бо перевіряв у Firefox v57.0.1 (там все працює ідеально).
Але є один трюк проти лагів :
-webkit-transform: translate3d(0, 0, 0);

.bg::before,
.bg::after {
    /* ... */
    -webkit-transform: translate3d(0, 0, 0);
}

Попробуйте оновлений архів. Мені цікаво чи на смартфоні будуть лаги.

офтопік

Колись давно проходив кілька співбесід і мене питали про знання CSS. А я скромно так відповідав
"Та трохи знаю ..."
, ех, якби вони тільки знали ...

Так на смартфоні чомусь все одно лаги є...як їх прибрати не знаєте?
Тільки що побачив що на windows xp з chrome не завантажується фон взагалі, тільки два круга без розмивання без нічого)) надіюсь ця ос себе вже віджила, але хотілося б щоб на всіх однаковісінько працювало)

Подякували: leofun011

13

Re: Сайт на роботу

Zolin_777 написав:

Так на смартфоні чомусь все одно лаги є...як їх прибрати не знаєте?

Тут мені треба подумати-попробувати.

Zolin_777 написав:

Тільки що побачив що на windows xp з chrome не завантажується фон взагалі, тільки два круга без розмивання без нічого)) надіюсь ця ос себе вже віджила, але хотілося б щоб на всіх однаковісінько працювало)

Тут можна підкрутити. І ОС немає значення, лише версія браузера.

Але швидше ніж через 4 години мене не чекайте.

Подякували: Zolin_7771

14

Re: Сайт на роботу

leofun01 написав:
Zolin_777 написав:

Так на смартфоні чомусь все одно лаги є...як їх прибрати не знаєте?

Тут мені треба подумати-попробувати.

Zolin_777 написав:

Тільки що побачив що на windows xp з chrome не завантажується фон взагалі, тільки два круга без розмивання без нічого)) надіюсь ця ос себе вже віджила, але хотілося б щоб на всіх однаковісінько працювало)

Тут можна підкрутити. І ОС немає значення, лише версія браузера.

Але швидше ніж через 4 години мене не чекайте.

Добре у мене є час) як думаєте якщо все грамотно зробити сайт зможе сам себе окупати?)

15 Востаннє редагувалося leofun01 (13.07.2018 20:54:20)

Re: Сайт на роботу

Ще раз оновив архів. Цього разу за основу були взяті файли, які висіли на сайті 3 години назад.

:root {
    --bg-before-width: 90px;
    --bg-before-height: 3px;
    --bg-circle-radius: 24vh; /* or 160px; */
    --bg-circle-distance: 30px;
    --bg-circle-blur: blur(80px);
    --bg-shadow-horizontal-distance:
        calc((var(--bg-circle-radius) * 2 + var(--bg-circle-distance)) * 1.08);
    --bg-shadow-vertical-distance:
        calc(var(--bg-circle-radius) + (var(--bg-circle-distance) / 2));
    --bg-shadow-spread:
        calc(var(--bg-shadow-vertical-distance) - var(--bg-circle-distance));
}
.bg::before {
    content: "";
    display: block;
    width: var(--bg-before-width);
    height: var(--bg-before-height);
    position: fixed;
    left: calc(50% - (var(--bg-before-width) / 2));
    top: calc(50vh - (var(--bg-before-height) / 2));
    z-index: -1;
    border-radius: 50%;
    background-color: transparent;
    filter: var(--bg-circle-blur);
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    box-shadow:
        0 Calc(0px - var(--bg-shadow-vertical-distance))
        0px var(--bg-shadow-spread) #D2EA22, /* ^ */
        0 var(--bg-shadow-vertical-distance)
        0px var(--bg-shadow-spread) #4DC3EB, /* v */
        calc(0px - var(--bg-shadow-horizontal-distance)) 0
        0px var(--bg-shadow-spread) #F5C07E, /* < */
        var(--bg-shadow-horizontal-distance) 0
        0px var(--bg-shadow-spread) #8BF473; /* > */
}

Попробуйте на смартфоні і на старих браузерах.
На старих браузерах (які не підтримують filter:blur) фон має бути просто білий.
Якщо на смартфоні знов буде лагати, тоді я не знаю, робіть як хочете.

Post's attachments

html_css_Zolin.7z 4.18 kb, 401 downloads since 2018-07-13 

Подякували: ostap34PHP1

16

Re: Сайт на роботу

Zolin_777 написав:

як думаєте якщо все грамотно зробити сайт зможе сам себе окупати?)

Ви про що ?

Подякували: Zolin_7771

17

Re: Сайт на роботу

leofun01 написав:
Zolin_777 написав:

як думаєте якщо все грамотно зробити сайт зможе сам себе окупати?)

Ви про що ?

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

18

Re: Сайт на роботу

Zolin_777 написав:

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

На сайт можна прикріпити оплату через різні сервіси (наприклад paypal).
В питаннях про отримання прибутків з мене порадник ніякий.

Подякували: Zolin_7771

19

Re: Сайт на роботу

leofun01 написав:
Zolin_777 написав:

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

На сайт можна прикріпити оплату через різні сервіси (наприклад paypal).
В питаннях про отримання прибутків з мене порадник ніякий.

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

Подякували: leofun011

20

Re: Сайт на роботу

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

Подякували: Zolin_7771