Webdesigner AngularJS webfejlesztés - Matthias Schütz - 8

A cikkek kezdőknek és haladó felhasználóknak szólnak, és a webes/grafikai tervezéssel kapcsolatos mindennapi munkát segítik.

Webhely-optimalizálás: tényezők és lehetőségek

A weboldal sebessége fontos pont, amely hozzájárul a weboldal minőségéhez. A látogatóknak általában kevés az idejük az interneten, és azt várják, hogy az oldalak gyorsan betöltődnek. A keresési eredmények nagy száma miatt a lassú webhelyek gyorsan lefogyhatnak, mivel a felhasználók egyszerűen más webhelyet választhatnak. Az már egy másik kérdés, hogy a gyorsabb oldal jobb tartalmat is szolgáltat-e. Ennek ellenére a weboldal sebességének optimalizálása egyre fontosabb. Nagyon sok jó erőforrás létezik, amelyek segíthetnek a betöltési idő javításában.
Ebben a műhelyben szeretnék kitérni a weboldalak optimalizálásának alapvető módjaira. A lényeg az, hogy áttekintést kapjunk azokról a technikai szempontokról, amelyek változóak és befolyásolják a betöltési időt. Hoztam létre egy kis rétegű modellt, amely állítólag ilyen tényezőket képvisel.

Az egyes rétegek változhatnak vagy cserélhetők. A modell illusztrációként szolgál, és csak egy általános architektúrát képvisel, amely általában megfelel egy normál weboldalnak. Ebben a cikkben szeretném röviden megvitatni az egyes pontokat.

Photoshop: Információs paletta beállítása a webdesignhoz

Az Adobe Photoshop programban különféle célokra szánt paletták (ablakok) találhatók. Nem minden paletta van beállítva a kezdetektől fogva, hogy hasznosak lehessenek a webes/képernyőtervezésnél. Az infopaletta ilyen eset: ez az egyik leghasznosabb eszköz a távolságok és méretek meghatározásakor. Ugyanakkor a képernyő megjelenítésére is optimalizálni kell, amelyet a Photoshop nem állít be előre.
Annak érdekében, hogy az információs palettát értelmesen lehessen használni a weboldalak tervezéséhez, csak három beállítást kell megadni a paletta opcióiban. Ehhez meg kell nyitni az információs ablakot, amelyet az F8-on vagy az "Ablak -> Info" menüponton keresztül lehet elérni. Ezután be kell hívni a paletta opcióit, amelyek az ablak jobb felső sarkában található kis gombbal nyithatók meg.

Most a színérték-kijelzéseket "RGB" -re, a mutató koordinátáit pedig "Pixel" -re kell állítani.

Photoshop: Csökkentse a PSD fájlok fájlméretét

Sok ember részt vehet egy weboldal tervezésében és megvalósításában. Gyakran előfordul, hogy a webdesignok nyitott fájljait (például PSD vagy PNG rétegekkel) el kell küldeni, hogy tovább feldolgozhatók legyenek. Még a DSL sebesség korában is mindig előny, ha az interneten elküldött adatokat kicsiben tartják, hogy a letöltés gyorsan működjön.
Régi, de mindig hatékony trükk a Photoshop fájlok PSD formátumú fájlméretének csökkentésére egyetlen színréteg létrehozása. A rétegnek pixelrétegnek kell lennie, amely lefedi a fájl teljes munkaterületét.

Ez a módszer akár 20% -ot (vagy többet is) takaríthat meg. A számítás nem általánosítható, de a tesztelt fájlok például 7,7 MB-ról 6,2 MB-ra vagy 11,1 MB-ról 9,6 MB-ra csökkenthetők. Ha ilyen fájlokat e-mailben küldenek, akkor is észrevehető a kis különbség.

Photoshop: töltse ki a kijelölt területeket mintákkal

Néhány Adobe Photoshop billentyűparancs nem ismert, bár jól használhatók. A gyorsbillentyűkkel mindenképpen érdemes a jobb munka érdekében, mivel a menük használata természetesen nem a leggyorsabb módszer. A meglévő billentyűparancsok adaptálása szintén ajánlott, mivel a képszerkesztő program nincs egyedi célra szabva (pl. Webdesign). Az adatok retusálásához vagy kinyomtatásához létrehozott parancsikonok ezért kicserélhetők.
A Photoshop alkalmazásban valószínűleg a két legismertebb billentyűkombináció az, amelyet egy kiválasztási terület (kijelölés) kitöltésére használnak: Az ALT + BACKSPACE kitölti a kiválasztott területet az előtér színével, míg a CTRL + BACKSPACE kitölti a kijelölést a háttérszínnel. Egy másik parancsikon most a SHIFT + BACKSPACE, amellyel a kijelölési területek kitölthetők egy meglévő mintával.

Egyébként a területeket kontúrral lehet körvonalazni a SHIFT + F6 billentyűkombinációval.

Kategóriák

Vályogtégla
SzögletesJS
alma
Tartalomkezelés
fejlődés
szín
Szentjánosbogár
Firefox
Vaku
Google
HTML/CSS
ihlet

Gyakornok
internet böngésző
JavaScript
jQuery
Mobil web
sablon
Node.js
OOP/MVC
PHP
Photoshop
szafari
szoftver

Textúrák
Tippek
Trükkök
Oktatóanyagok
tipográfia
Használhatóság
Webdesign
WebGL
Eszközök
ablakok

keresés

A kettő között

Webdesignerek és fejlesztők számára

További eszközök webfejlesztőknek

Hírek a netről

Utolsó cikk - webdesign

JavaScript: helyes feltétel a globális változókhoz

A JavaScript-ben hébe-hóba találkozunk sajátosságokkal, ami nem mindig igazolható. A tolmács működése ezért nem mindig nyilvánvaló. Az egyik ilyen sajátosság a globális változók ellenőrzése, erre kettő van.

Rólam

A felhasználói felületek koncepciója és kialakítása mellett szakterületem a dinamikus online/offline alkalmazások fejlesztése a JavaScript-ben, a mobil eszközökhöz készült alkalmazások (iOS és Android) és a tartalomkezelő rendszerek (TYPO3 stb.). Egy másik szenvedélyem a számítógépes játékok és a böngészős játékok fejlesztése, amelyek JavaScript/Flash/Objective-C/WebGL használatával valósulnak meg. Nyílt forráskódú projektjeim megtalálhatók a GitHub-on: A legújabb projektek az Angular 2 Seed és a PixelZoomer for Chrome.