Webový dizajnér AngularJS, vývoj webových aplikácií - Matthias Schütz - 8

Články sú zamerané na začiatočníkov aj pokročilých používateľov a sú zamerané na pomoc pri každodennej práci s webovým/grafickým dizajnom.

Optimalizácia webových stránok: faktory a možnosti

Rýchlosť webovej stránky je dôležitým bodom, ktorý prispieva ku kvalite webovej stránky. Návštevníci majú zvyčajne na webe málo času a očakávajú rýchle načítanie stránok. Vďaka veľkému počtu výsledkov vyhľadávania môžu pomalé stránky rýchlo schudnúť, pretože používatelia si môžu jednoducho zvoliť inú stránku. To, či rýchlejšia stránka prináša aj lepší obsah, je iná vec. Optimalizácia rýchlosti webových stránok je stále dôležitejšia. Existuje veľa dobrých zdrojov, ktoré môžu pomôcť skrátiť dobu načítania.
Na tomto workshope sa chcem venovať základným spôsobom, ako je možné optimalizovať webové stránky. Jedná sa o získanie prehľadu o technických aspektoch, ktoré sú variabilné a ovplyvňujú čas načítania. Vytvoril som malý model vrstvy, ktorý má predstavovať takéto faktory.

vývoj

Jednotlivé vrstvy sa môžu meniť alebo vymieňať. Model slúži ako ilustrácia a predstavuje iba všeobecnú architektúru, ktorá obvykle zodpovedá bežnej webovej stránke. V tomto článku sa chcem v krátkosti venovať jednotlivým bodom.

Photoshop: Nastaviť informačnú paletu pre webdizajn

V aplikácii Adobe Photoshop existujú rôzne palety (okná), ktoré sú určené na konkrétne účely. Nie všetky palety sú od samého začiatku nastavené tak, aby mohli byť užitočné pre webdizajn/návrh obrazovky. V takom prípade je to paleta informácií: je to jeden z najužitočnejších nástrojov pri určovaní vzdialeností a veľkostí. Mal by však byť optimalizovaný aj pre zobrazovanie na obrazovke, ktoré nie je prednastavené vo Photoshope.
Aby bolo možné paletu s informáciami efektívne využiť pri návrhu webových stránok, je potrebné v možnostiach palety vykonať iba tri nastavenia. Za týmto účelom musí byť otvorené informačné okno, do ktorého je prístup cez F8 alebo cez položku ponuky „Okno -> Informácie“. Potom je potrebné vyvolať možnosti palety, ktoré sa dajú otvoriť pomocou malého tlačidla v pravom hornom rohu okna.

Teraz by mali byť farebné hodnoty nastavené na „RGB“ a súradnice ukazovateľa na „Pixel“.

Photoshop: Zmenšite veľkosť súborov súborov PSD

Na dizajne a implementácii webovej stránky sa môže podieľať veľa ľudí. Často sa stáva, že otvorené súbory webových dizajnov (napríklad PSD alebo PNG s vrstvami) sa musia poslať, aby ich bolo možné ďalej spracovať. Aj v dobe rýchlosti DSL je vždy výhodou, ak sú dáta odosielané na internet malé, aby sťahovanie fungovalo rýchlo.
Starým, ale vždy efektívnym trikom na zmenšenie veľkosti súborov súborov Photoshopu vo formáte PSD je vytvorenie jednej farebnej vrstvy. Vrstva by mala byť pixelová vrstva, ktorá pokrýva celú pracovnú oblasť súboru.

vývoj

Táto metóda môže ušetriť až 20% (alebo viac). Výpočet nemožno zovšeobecniť, ale testované súbory je možné znížiť napríklad zo 7,7 MB na 6,2 MB alebo z 11,1 MB na 9,6 MB. Ak sa takéto súbory odosielajú e-mailom, malý rozdiel je stále badateľný.

Photoshop: vyplňte oblasti výberu vzormi

Niektoré klávesové skratky aplikácie Adobe Photoshop nie sú dobre známe, aj keď môžu slúžiť dobre. Klávesové skratky sa určite oplatia pre lepšiu prácu, pretože používanie ponúk určite nie je najrýchlejšou metódou. Odporúča sa tiež prispôsobiť existujúce príkazy klávesnice, pretože program na úpravu obrázkov nie je prispôsobený konkrétnemu účelu (napr. Webdizajn). Skratky, ktoré sú vytvorené na retušovanie alebo tlač údajov, je preto možné nahradiť.
Vo Photoshope sú dve najznámejšie kombinácie klávesov pravdepodobne tie, ktoré sa používajú na vyplnenie oblasti výberu (výber): ALT + BACKSPACE vyplní vybranú oblasť farbou popredia, zatiaľ čo CTRL + BACKSPACE vyplní výber farbou pozadia. Ďalšou skratkou je teraz SHIFT + BACKSPACE, pomocou ktorej je možné výberové oblasti vyplniť existujúcim vzorom.

Mimochodom, oblasti je možné obrysovať kontúrou pomocou kombinácie klávesov SHIFT + F6.

Kategórie

  • Adobe
  • AngularJS
  • Apple
  • Obsahový management
  • rozvoja
  • farba
  • Firebug
  • Firefox
  • Blesk
  • Google
  • HTML/CSS
  • inšpirácia
  • Intern
  • internet Explorer
  • JavaScript
  • jQuery
  • Mobilný web
  • šablóna
  • Node.js
  • OOP/MVC
  • PHP
  • Photoshop
  • safari
  • softvér
  • Textúry
  • Tipy
  • Triky
  • Návody
  • typografia
  • Použiteľnosť
  • vzhľad stránky
  • WebGL
  • Náradie
  • Windows

Vyhľadávanie

Pre medzi

Pre webdizajnérov a vývojárov

Ďalšie nástroje pre webových vývojárov

Správy zo siete

Posledný článok - webdizajn

JavaScript: správna podmienka pre globálne premenné

V JavaScripte narazíte na zvláštnosti, ktoré sa nedajú vždy ospravedlniť. Ako tlmočník pracuje, preto nie je vždy zrejmé. Jednou z týchto špeciálnych funkcií je kontrola globálnych premenných, na čo sú dve.

O mne

Okrem koncepcie a dizajnu používateľských rozhraní patria medzi moje odborné oblasti vývoj dynamických online/offline aplikácií v JavaScripte, aplikácií pre mobilné zariadenia (iOS a Android) a systémov na správu obsahu (TYPO3 atď.). Ďalšou mojou vášňou je vývoj počítačových hier a hier v prehliadači, ktoré sú implementované pomocou JavaScriptu/Flash/Objective-C/WebGL. Moje projekty s otvoreným zdrojom nájdete na GitHub: Najnovšie projekty sú Angular 2 Seed a PixelZoomer pre Chrome.