witola.com

Det følgende er en artikel jeg læste på en blog om front-end udviklere og kodning praksis og tænkte jeg ville give det videre. Det er ved at Doug Neiner, redaktør på brændstof din Kodning og er formand for Pixel Grafisk Design Studio . Han er afhængig af ny teknologi, og specielt elsker at tilbringe tid sammen med WordPress, Ruby on Rails og jQuery.

Hvad der følger her er der en serie på 10 ting at huske og øve sig på de enkelte web-udviklingsprojekt. Jeg har nævnt dem her i prioriteret rækkefølge, som mange af de trin, bygge videre på hinanden. Hvis du tager intet andet væk fra læsningen, skal du tage Regler # 1 og # 2 til hjerte og praktisere dem. Jeg tror, ​​at løse disse to problemer vil føre til bedre design og bedre gennemførelse på hjemmesider på internettet.

1. Oplad nok, og derefter nogle

Især i hårde økonomiske tider, erhvervslivet og privatpersoner forsøger at reducere omkostningerne og holde projekter ned til et minimum. På grund af denne viden, vi som webudviklere forsøger at bevæge sig gennem hver fase så hurtigt som muligt. Front end udvikling, men tage en betydelig mængde tid, hvis det gøres ordentligt. Ikke tilstrækkeligt betaling for den tid fører os som udviklere at springe over ting, vi ved er vigtigt bare at holde projektet inden for budgettet. Reglen er enkel ... du normalt ikke vil tage sig tid til at gøre det rigtige, hvis du ikke har tid til at tage. Den eneste måde at få mere "tid" som en udvikler, er at sikre den tid, vi bruger er korrekt kompenseres. På det punkt alene kan vore hjerter og sind fuldt sat ind i vores projekter ... og først derefter kan vi tage tid til at følge de resterende 9 reglerne.

2. Uddan Designer

For dem, der er en designer / udvikler alt-i-én maskine, skal denne være let. Men, kodere, der arbejder med eller for at en designer har et unikt ansvar. Da mange designere kommer fra en print baggrund, er det op til dig, udvikleren, til at oplyse dem om de muligheder til rådighed for deres design. Nej ... Jeg sagde ikke fortælle dem om de 150 + jQuery plugins du bruger, eller dine tanker om ved hjælp af en UL / LI combo vs en serie af A-tags. Jeg sagde opdrage dem til muligheder. Hjælp dem med at forstå, hvordan deres design kan vise på forskellige enheder. Hjælp dem med at forstå hvordan man kan udnytte gentagne baggrunde og flisebelagte mønstre til at opnå store design med minimal filstørrelse.

Efterlad ikke kreativitet alene til designeren enten! Dette er din chance for at bevise at du er kreativ, samt ved at finde de perfekte teknologiske løsninger for at opfylde behovene hos designeren. Fortælle dem "det er bare ikke gjort den måde" for enhver anmodning er en sikker-brand måde at skabe frustrationer på begge sider. Sæt dit sind til at arbejde at finde måder omkring forhindringer.

Bemærk: Regler 3 til 10 bygger ud de første to regler. Nogle af de følgende regler kræve yderligere grafik fra designeren, og alle de regler, der tager tid at følge. Foretag en forpligtelse til at regler 1 og 2, samt de øvrige regler vil både give mening og gøre dit færdige produkt, meget bedre.

3. Tænk i lag, ikke i skiver

Selv i dag, vi stadig bruger udtrykket "skære designet" til at beskrive processen med at flytte et design fra Illustrator eller Photoshop i den færdige HTML / CSS layout. Mens dette er stadig i vid udstrækning præcis, dens navn modsiger den tidligere begrebet skære et design i stykker og samle den (som regel i en tabel) tilbage på HTML-siden.

Det var den gamle web. Den nye bane anvender konceptet med lagdeling, stabling og z-index for at opnå mønstre med dybden. Som en koder, skal du sørge for at få lagdelte PSD-filer eller lagdelte AI filer fra designeren vs et fladt design. Dette vil tillade dig at have langt mere fleksibilitet i, hvordan du sammensætter et websted. Husk, når du arbejder i lag, overveje de HTML-elementer, der er afgørende for den struktur, inden der gribes til at tilføje yderligere divs og spænder. Du kan bruge en gentaget lodret mønster på html element, og et gentaget vandret baggrund på body element, uden at bringe den frygtede div#wrapper for at løse dine baggrund elendighed.

4. Brug det bedste image format

Hvad er den "bedste billede Format", spørger du? Det er den, der er bedst egnet til opgaven ved hånden. PNG, GIF, og JPEG-filer har alle forskellige fordele. Når der ikke er gennemsigtighed i et billede, teste hvilken filstørrelse / billedkvaliteten er bedst mellem PNG, GIF og JPEG. For store billeder, vil JPEG næsten altid vinde for kvalitet vs størrelse. For små billeder uden gennemsigtighed, se, hvilket har en bedre filstørrelse PNG eller GIF. Hvis du beslutter dig for en GIF, være sikker på at lege med de dither muligheder og lossy muligheder (Vidste du selv kender Photoshop har en "lossy" mulighed for GIF?). Ofte kan du presse endnu mindre filer ud af Photoshop ved at justere output-indstillingerne yderligere.

For billeder, der skal have åbenhed, træffe kvalificerede beslutninger om, hvordan de vil blive brugt. Hvis de vil blive lagt over en kompleks baggrund, skal du måske overveje at bruge en PNG-fil. Hvis baggrunden er konsekvent nok, at farven matte af en GIF ikke vil skille sig ud dårligt, se om GIF-fil er mindre. GIF har den fordel ikke at behøve yderligere programmering at gøre det arbejde i IE6.

Vedrørende JPEG brug: Hvis du bruger JPEG som en del af din brugergrænseflade (og ikke bare for at vise et foto, osv.) være sikker på at forlade væk fra ICC-profiler, når du gemmer til web. Nogle browsere vil ære profilen og producere en farve forskel mellem GIF / PNG og JPEG-filer i samme farve. Dette er et simpelt problem at undgå ved blot at slukke de ICC-profiler.

Hvad hvis det er en taber situation? Der har været tider hvor jeg har brug for fuldstændig gennemsigtighed i en PNG med billedet kompleksitet bedre egnet til et JPEG. I disse tilfælde har jeg ofte stable (husk, at tænke i lag) to billeder: et PNG for større gennemsigtighed, og en GIF for komplekst billede aspekt. Det er kreativ problemløsning som dette, der vil sikre dine sider indlæses hurtigt, og at designet bevarer sin integritet.

5. Vide, hvornår at bruge klasser vs id'er

Jeg troede, det var bare almindelig sund fornuft, men tilsyneladende er det ikke sådan som jeg ser mange programmører at anvende klasse navne, hvor de skal bruge id'er. Det kan ikke virke som et stort problem, men det vil, når du forsøger at målrette et element ved hjælp af Javascript.

Konceptet er enkelt, hvis der kun vil være ét element på en given side, en id bruge. Hvis der vil være flere tilfælde på en given side, bruge klasse navne. Anytime et element er one-of-a-kind, skal du bruge en id. Dens så simpelt! Ting som ul.navigation til hovednavigation baren eller div.site-logo giver ingen mening. Hver af disse elementer er adskilt og skal have og id.

I stedet for at tilføje en anden regel til vores liste, så lad mig klump noget andet her: Brug ikke for mange klasser! Tag følgende kode for et ekstremt eksempel (Bemærk, at klasser synes seks gange):

For dem, der koden ofte, du indse dette er et latterligt eksempel, men det viser fejlslutning af over-hjælp klasser. Brug kun hvad du har brug for korrekt stil og styrke (via Javascript) HTML, intet mere.

6. Gøre dine sider Responsive

Det vigtigt, at siden reagerer korrekt som slutbruger navigerer igennem den. Brug af konventioner, som billedfiler rollover-effekter samt: hover,: aktiv og: fokus stater kan ikke understreges nok. Du ønsker ikke at angribe brugeren med alt for mange interaktioner eller stilarter, men de fleste mennesker reagerer godt på visuel feedback. Her er en nem en til dig: links bør ændre tilstand, når musen svæver over dem ... periode! Det er ikke nok, at browseren viser en lille hånd der indikerer et link. Jeg kan ikke fortælle dig, hvor frustrerende det er at søge via en side med sort tekst på udkig efter de mørke grå links og håber og beder at hånden synes at lade mig vide, jeg fandt en!

Brug konventioner såsom "Du er her" indikatorer eller beskrivende værktøj tips alle falder ind under denne kategori. Jo mere interaktion og feedback, der vises til brugeren, mens de navigerer gennem et websted, jo bedre.

7. Brug altid CSS Sprites for Overgange

Hvis du ikke ved, hvad CSS Sprites er, så tjek denne artikel på Smashing Magazine eller dette en på A List Apart for detaljer. For dem der ikke ved, hvad de er, hvorfor du ikke bruge dem!? Hvis du fortæller mig det på grund af manglende tid, vil jeg henvise dig til Regel # 1 i denne liste. Forbi tid argument, jeg kan ikke rigtig komme i tanke om nogen fordel vigtigere end at bruge CSS Sprites for image overgange. Tjek den Starter for jQuery hjemmeside. Næsten alle de brugergrænseflader, stykkerne er bygget ved hjælp af en enkelt PNG-fil (billedet nedenfor). De interface belastninger på én gang, og alle de pegefølsomme / aktiv stater er umiddelbart tilgængelige. Ingen forsinkelse for a: hover på billedet for at indlæse, en anmodning til serveren, ikke 10 +. Dette er et fantastisk redskab i frontend kodning Toolkbox at udviklere skal bruge oftere.

8. Forstå forskellen mellem Flash og Javascript

Jeg tror Javascript kan gøre fantastiske ting. Jeg elsker også at skubbe grænserne for, hvad det kan gøre. Jeg elsker at lave widgets og plugins lige så meget som den næste fyr ... men Javascript kan ikke løse alle problemer i dynamiske web-udvikling. I stedet for at bruge 10 timer emulerer en Flash-funktion, der ville tage 1 time at lave i Flash, træffe det rigtige valg og vælge Flash. På den anden side, ... hvis du bare har brug for et billede rotator du ikke tør åbne Flash!

9. Test dit websted i mange browsere (inklusive IE6)

Denne ene tager tid, er der ingen tvivl om det. Jeg udvikler på en Mac, og har en PC (og flere Virtual PC-miljøer), der lad mig test er de fleste af de almindelige browsere folk bruger i dag. Medmindre du har Google Analytics-rapporter, der siger ingen bruger IE eller alle bruger Firefox, gør ikke en antagelse om, hvordan folk vil gennemse dit websted. Jeg siger ikke, at de steder se ens ud, men få dem til at arbejde, funktion, og ser pæn (Og sikkert samme!) I de fleste browsere.

Note: Jeg nævner IE6 specifikt, fordi min største kunde er et selskab, der stadig bruger IE6. Jeg har udviklet en kodning stil, der giver mig mulighed for at bygge hurtigt til moderne browsere, og gennemfører kun få style sheet og javascript rettelser så stedet ser til højre i IE6. Jeg er sikker på jeg mister nogle kant ved at gøre det på denne måde, men det sparer mig for mange pinlige øjeblikke.

10. Altid Hold Vedligeholdelse In Mind

Som du er "skære op" et Photoshop design, eller at forberede din CSS og Javascript, holde vedligeholdelse i tankerne. Nogle crazy-cool CSS hack du bruger i dag kan komme tilbage til hjemsøge dig senere. Dumping CSS-regler, uanset hvor du vil i en CSS-fil kan synes hurtigt i øjeblikket (Guilty!), men vil gøre at ændre og opdatere dem senere et mareridt.

Et vigtigt skridt at huske, opstår, når du har prepped en designer-fil til eksport fra Photoshop eller Illustrator: Husk at gemme en version af filen lige før eksport. Den måde, hvis du har brug for at re-eksportere det senere, tilføjer en anden knap, ændre en linje med tekst, osv., vil du være i stand til at eksportere det hurtigt igen. Photoshop normalt sparer Billedformat valg, komprimering indstillinger og matte farver for at gøre dit arbejde endnu nemmere.

Konklusion

Der er en række andre ting som er vigtige for Front End Coders at huske på, men jeg tror, ​​det er nogle af de vigtigste. Mange kunne argumentere for, at disse ikke er regler, men jeg udfordrer dig til at tænke på dem som sådan. Måske vil du være mindre tilbøjelige til at bryde dem af hensyn til tid eller penge på dit næste projekt.