Веб-дизайнер веб-розробки AngularJS - Маттіас Шютц - 8
Статті орієнтовані як на початківців, так і на досвідчених користувачів і покликані допомогти у щоденній роботі з веб/графічним дизайном.
Оптимізація веб-сайтів: фактори та можливості
Швидкість веб-сайту є важливим моментом, який сприяє підвищенню якості веб-сайту. Відвідувачі, як правило, мають мало часу в Інтернеті і очікують швидкого завантаження сторінок. Через велику кількість результатів пошуку повільні сайти можуть швидко схуднути, оскільки користувачі можуть просто вибрати інший веб-сайт. Інша справа, чи швидша сторінка також забезпечує кращий вміст. І все-таки оптимізація швидкості веб-сайтів стає все більш важливим. Є багато хороших ресурсів, які можуть допомогти скоротити час завантаження.
У цьому практикумі я хочу розглянути основні способи оптимізації веб-сайтів. Суть полягає в тому, щоб отримати огляд технічних аспектів, які змінюються і впливають на час завантаження. Я створив малу модель шару, яка повинна представляти такі фактори.
Окремі шари можуть змінюватися або обмінюватися. Модель призначена для ілюстрації та представляє лише загальну архітектуру, яка зазвичай відповідає звичайному веб-сайту. У цій статті я хочу коротко обговорити окремі моменти.
Photoshop: встановіть інформаційну палітру для веб-дизайну
В Adobe Photoshop є різні палітри (вікна), призначені для конкретних цілей. Не всі палітри з самого початку встановлені таким чином, щоб вони могли бути корисними для веб-дизайну/дизайну екрану. Інформаційна палітра - це такий випадок: це один з найбільш корисних інструментів, коли йдеться про визначення відстаней та розмірів. Однак його слід також оптимізувати для відображення на екрані, що не встановлено в Photoshop.
Для того, щоб мати можливість використовувати інформаційну палітру змістовно для дизайну веб-сайтів, у параметрах палітри потрібно зробити лише три налаштування. Для цього необхідно відкрити інформаційне вікно, до якого можна отримати доступ за допомогою F8 або пункту меню «Вікно -> Інформація». Потім потрібно викликати варіанти палітри, які можна відкрити за допомогою маленької кнопки у верхньому правому куті вікна.
Тепер для відображення значення кольору слід встановити значення "RGB", а координати вказівника - "Піксель".
Photoshop: зменшіть розмір файлів PSD
Багато людей можуть брати участь у розробці та впровадженні веб-сайту. Часто трапляється, що відкриті файли веб-дизайну (наприклад, PSD або PNG із шарами) повинні надсилатися, щоб їх можна було обробити далі. Навіть у епоху швидкості DSL завжди є перевагою, якщо дані, що надсилаються в Інтернет, залишаються невеликими, щоб завантаження працювало швидко.
Старий, але завжди ефективний прийом для зменшення розміру файлів Photoshop у форматі PSD - це створення однокольорового шару. Шар повинен бути піксельним шаром, який охоплює всю робочу область файлу.
Цей метод дозволяє заощадити до 20% (або більше). Розрахунок не може бути узагальненим, проте протестовані файли можуть бути зменшені з 7,7 МБ до 6,2 МБ, або з 11,1 МБ до 9,6 МБ, наприклад. Якщо такі файли надсилаються електронною поштою, невелика різниця все ще помітна.
Photoshop: заповніть області виділення візерунками
Деякі комбінації клавіш Adobe Photoshop недостатньо відомі, хоча вони можуть добре служити. Клавіатурні скорочення однозначно варті для кращої роботи, оскільки використання меню, безумовно, не найшвидший метод. Також рекомендується адаптувати існуючі команди клавіатури, оскільки програма редагування зображень не пристосована до певної мети (наприклад, веб-дизайн). Тому ярлики, створені для ретушування або друку даних, можна замінити.
У Photoshop дві найвідоміші комбінації клавіш - це, мабуть, ті, що використовуються для заповнення області виділення (виділення): ALT + BACKSPACE заповнює виділену область кольором переднього плану, тоді як CTRL + BACKSPACE заповнює виділення кольором фону. Тепер ще одним ярликом є SHIFT + BACKSPACE, за допомогою якого області виділення можна заповнити існуючим шаблоном.
До речі, поверхні можна окреслити контуром за допомогою SHIFT + F6.
Категорії
- Adobe
- AngularJS
- Яблуко
- Управління вмістом
- розвитку
- колір
- Пожежна помилка
- Firefox
- Спалах
- HTML/CSS
- натхнення
- Інтерн
- Internet Explorer
- JavaScript
- jQuery
- Мобільний Інтернет
- шаблон
- Node.js
- ООП/MVC
- PHP
- Photoshop
- сафарі
- програмне забезпечення
- Текстури
- Поради
- Хитрощі
- Підручники
- друкарня
- Юзабіліті
- Веб дизайн
- WebGL
- Інструменти
- Windows
пошук
Для проміжків
Для веб-дизайнерів та розробників
Інші інструменти для веб-розробників
Новини з мережі
Остання стаття - веб-дизайн
JavaScript: правильна умова для глобальних змінних
У JavaScript час від часу стикаються з особливостями, які не завжди можуть бути виправданими. Отже, як працює перекладач, не завжди очевидно. Однією з цих особливих особливостей є перевірка глобальних змінних. Для цього є дві.
Про мене
На додаток до концепції та дизайну користувальницьких інтерфейсів, розробка динамічних онлайн/офлайн-додатків у JavaScript, додатків для мобільних пристроїв (iOS та Android) та систем управління вмістом (TYPO3 тощо) входить до сфери моїх знань. Ще однією моєю пристрастю є розробка комп’ютерних ігор та браузерних ігор, реалізованих за допомогою JavaScript/Flash/Objective-C/WebGL. Мої проекти з відкритим кодом можна знайти на GitHub: Останніми проектами є Angular 2 Seed та PixelZoomer для Chrome.