Уеб дизайнер AngularJS уеб разработка - Матиас Шютц - 8

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

Оптимизация на уебсайтове: фактори и възможности

Скоростта на уебсайта е важен момент, който допринася за качеството на уебсайта. Посетителите обикновено имат малко време в мрежата и очакват страниците да се зареждат бързо. Поради големия брой резултати от търсенето, бавните сайтове могат бързо да отслабнат, тъй като потребителите могат просто да изберат различен сайт. Дали по-бързата страница доставя и по-добро съдържание е друг въпрос. И все пак оптимизирането на скоростта на уебсайта става все по-важно. Има много добри ресурси, които могат да помогнат за подобряване на времето за зареждане.
В този семинар искам да разгледам основните начини, по които уебсайтовете могат да бъдат оптимизирани. Въпросът е да се получи преглед на техническите аспекти, които са променливи и оказват влияние върху времето за зареждане. Създадох модел на малък слой, който трябва да представлява такива фактори.

Отделните слоеве могат да варират или да се обменят. Моделът е предназначен да служи като илюстрация и просто представлява обща архитектура, която обикновено съответства на нормален уебсайт. В тази статия искам накратко да обсъдя отделните точки.

Photoshop: Задайте информационна палитра за уеб дизайн

В Adobe Photoshop има различни палитри (прозорци), които са предназначени за специфични цели. Не всички палитри са настроени от самото начало по такъв начин, че да са полезни за уеб дизайн/дизайн на екрана. Информационната палитра е такъв случай: тя е един от най-полезните инструменти, когато става въпрос за определяне на разстояния и размери. Той обаче трябва да бъде оптимизиран и за показване на екрана, което не е предварително зададено във Photoshop.
За да можете да използвате информационната палитра по смисъл за дизайна на уебсайтове, трябва да се направят само три настройки в опциите на палитрата. За да направите това, информационният прозорец трябва да бъде отворен, до който можете да получите достъп чрез F8 или елемента от менюто "Прозорец -> Информация". След това трябва да се извикат опциите на палитрата, които могат да се отворят чрез малкия бутон в горния десен ъгъл на прозореца.

Сега показанията на цветната стойност трябва да бъдат настроени на "RGB", а координатите на показалеца на "Pixel".

Photoshop: Намалете размера на файла на PSD файловете

Много хора могат да участват в проектирането и изпълнението на уебсайт. Често се случва отворените файлове на уеб дизайни (като PSD или PNG със слоеве) да се изпращат, за да могат да бъдат обработени допълнително. Дори в ерата на DSL скоростите, винаги е предимство, ако данните, изпратени през интернет, се поддържат малки, така че изтеглянето да работи бързо.
Стар, но винаги ефективен трик за намаляване на размера на файла на PSD файловете на Photoshop е създаването на едноцветен слой. Слоят трябва да бъде пикселен слой, който покрива цялата работна област на файла.

Този метод може да спести до 20% (или повече). Изчислението не може да бъде обобщено, но тестваните файлове могат да бъдат намалени от 7,7 MB на 6,2 MB или от 11,1 MB на 9,6 MB, например. Ако такива файлове се изпращат по имейл, малката разлика все още е забележима.

Photoshop: запълнете областите за избор с модели

Някои клавишни комбинации на Adobe Photoshop не са добре известни, въпреки че могат да служат добре. Клавишните комбинации определено си заслужават за по-добра работа, тъй като маршрутът през менютата със сигурност не е най-бързият метод. Препоръчва се и адаптиране на съществуващите команди на клавиатурата, тъй като програмата за редактиране на изображения не е съобразена с конкретна цел (например уеб дизайн). Следователно преките пътища, създадени за ретуширане или отпечатване на данни, могат да бъдат заменени.
Във Photoshop двете най-известни комбинации от клавиши вероятно са тези, които се използват за запълване на област за избор (селекция): ALT + BACKSPACE запълва избраната област с цвят на преден план, докато CTRL + BACKSPACE запълва селекцията с цвят на фона. Друг пряк път вече е SHIFT + BACKSPACE, с който областите за избор могат да бъдат запълнени със съществуващ шаблон.

Между другото, областите могат да бъдат очертани с контур с помощта на SHIFT + F6.

Търсене

За между

За уеб дизайнери и разработчици

Още инструменти за уеб разработчици

Новини от мрежата

Последна статия - уеб дизайн

JavaScript: правилно условие за глобални променливи

В JavaScript от време на време се натъкват на особености, които не винаги могат да бъдат оправдани. Следователно как работи преводачът, не винаги е очевидно. Една от тези специални функции е проверката на глобалните променливи. Има две за това.

За мен

В допълнение към концепцията и дизайна на потребителските интерфейси, разработването на динамични онлайн/офлайн приложения в JavaScript, приложения за мобилни устройства (iOS и Android) и системи за управление на съдържанието (TYPO3 и др.) Са сред моите области на опит. Друга моя страст е разработването на компютърни игри и браузър игри, които са внедрени с JavaScript/Flash/Objective-C/WebGL. Моите проекти с отворен код могат да бъдат намерени на GitHub: Най-новите проекти са Angular 2 Seed и PixelZoomer за Chrome.