Web designer AngularJS dezvoltare web - Matthias Schütz - 8

Articolele sunt destinate atât începătorilor, cât și utilizatorilor avansați și sunt destinate să ajute la munca zilnică în web/design grafic.

Optimizarea site-ului web: factori și posibilități

Viteza unui site web este un punct important care contribuie la calitatea unui site web. Vizitatorii au, în general, puțin timp pe web și se așteaptă ca paginile să se încarce rapid. Datorită numărului mare de rezultate ale căutării, site-urile lente pot pierde rapid în greutate, deoarece utilizatorii pot alege pur și simplu un alt site web. Dacă o pagină mai rapidă oferă, de asemenea, conținut mai bun, este o altă problemă. Totuși, optimizarea vitezei site-ului web devine din ce în ce mai importantă. Există o mulțime de resurse bune care pot ajuta la îmbunătățirea timpilor de încărcare.
În acest atelier vreau să intru în modalitățile de bază în care site-urile web pot fi optimizate. Ideea este de a obține o imagine de ansamblu asupra aspectelor tehnice variabile și care influențează timpul de încărcare. Am creat un model de strat mic care ar trebui să reprezinte astfel de factori.

Straturile individuale pot varia sau pot fi schimbate. Modelul este destinat să servească drept ilustrare și reprezintă doar o arhitectură generală care corespunde de obicei unui site web normal. În acest articol vreau să discut pe scurt punctele individuale.

Photoshop: Setează paleta de informații pentru web design

În Adobe Photoshop există diverse palete (ferestre) care sunt destinate unor scopuri specifice. Nu toate paletele sunt setate de la început în așa fel încât să poată fi utile pentru proiectarea web/proiectarea ecranelor. Paleta de informații este un astfel de caz: este unul dintre cele mai utile instrumente atunci când vine vorba de determinarea distanțelor și dimensiunilor. Cu toate acestea, ar trebui optimizat și pentru afișarea ecranului, care nu este prestabilit în Photoshop.
Pentru a putea utiliza paleta de informații eficient pentru proiectarea site-urilor web, trebuie făcute doar trei setări în opțiunile paletei. Pentru a face acest lucru, fereastra de informații trebuie să fie deschisă, care poate fi accesată prin F8 sau prin elementul de meniu „Fereastră -> Informații”. Apoi, opțiunile paletei trebuie apelate, care pot fi deschise prin intermediul butonului mic din colțul din dreapta sus al ferestrei.

Acum, afișajul valorii culorilor trebuie setat la „RGB”, iar indicatorul să fie coordonat la „Pixel”.

Photoshop: reduceți dimensiunea fișierului fișierelor PSD

Mulți oameni pot fi implicați în proiectarea și implementarea unui site web. Este adesea cazul în care fișierele deschise ale desenelor web (cum ar fi PSD sau PNG cu straturi) trebuie trimise astfel încât să poată fi procesate în continuare. Chiar și în epoca vitezei DSL, este întotdeauna un avantaj dacă datele trimise pe Internet sunt păstrate mici, astfel încât descărcarea să funcționeze rapid.
Un truc vechi, dar întotdeauna eficient, pentru reducerea dimensiunii fișierelor fișierelor Photoshop în format PSD este crearea unui singur strat de culoare. Stratul trebuie să fie un strat de pixeli care acoperă întreaga zonă de lucru a fișierului.

Această metodă poate economisi până la 20% (sau mai mult). Calculul nu poate fi generalizat, dar fișierele testate pot fi reduse de la 7,7 MB la 6,2 MB sau de la 11,1 MB la 9,6 MB, de exemplu. Dacă astfel de fișiere sunt trimise prin e-mail, diferența mică este încă vizibilă.

Photoshop: umple zonele de selecție cu modele

Unele comenzi rapide de la tastatură Adobe Photoshop nu sunt bine cunoscute, deși pot servi bine. Comenzile rapide de la tastatură merită cu siguranță pentru o muncă mai bună, deoarece utilizarea meniurilor nu este cu siguranță cea mai rapidă metodă. De asemenea, se recomandă adaptarea comenzilor existente de la tastatură, deoarece programul de editare a imaginilor nu este adaptat unui scop specific (de exemplu, design web). Prin urmare, comenzile rapide create pentru retușare sau tipărire date pot fi înlocuite.
În Photoshop, cele mai cunoscute două combinații de taste sunt probabil cele utilizate pentru a umple o zonă de selecție (selecție): ALT + BACKSPACE umple o zonă selectată cu culoarea din prim-plan, în timp ce CTRL + BACKSPACE umple selecția cu culoarea de fundal. O altă comandă rapidă este acum SHIFT + BACKSPACE, cu care zonele de selecție pot fi completate cu un model existent.

Apropo, suprafețele pot fi conturate cu un contur folosind SHIFT + F6.

Categorii

Chirpici
AngularJS
măr
Management de conținut
dezvoltare
culoare
Firebug
Firefox
Flash
Google
HTML/CSS
inspirație

Intern
Internet Explorer
JavaScript
jQuery
Web mobil
șablon
Node.js
OOP/MVC
PHP
Photoshop
safari
software

Texturi
sfaturi
Trucuri
Tutoriale
tipografie
Utilizare
web design
WebGL
Instrumente
Windows

căutare

Pentru intermediar

Pentru designeri și dezvoltatori web

Mai multe instrumente pentru dezvoltatorii web

Știri de pe net

Ultimul articol - web design

JavaScript: condiție corectă pentru variabilele globale

În JavaScript se întâlnește din când în când particularități care nu pot fi întotdeauna justificate. Prin urmare, modul în care funcționează interpretul nu este întotdeauna evident. Una dintre aceste caracteristici speciale este verificarea variabilelor globale. Există două pentru aceasta.

Despre mine

Pe lângă conceperea și proiectarea interfețelor de utilizator, dezvoltarea de aplicații dinamice online/offline în JavaScript, aplicații pentru dispozitive mobile (iOS și Android) și sisteme de gestionare a conținutului (TYPO3 etc.) se numără printre domeniile mele de expertiză. O altă pasiune a mea este dezvoltarea de jocuri pe computer și jocuri browser care sunt implementate cu JavaScript/Flash/Objective-C/WebGL. Proiectele mele open source pot fi găsite pe GitHub: Ultimele proiecte sunt Angular 2 Seed și PixelZoomer pentru Chrome.