witola.com

Het volgende is een artikel dat ik las op een blog met betrekking tot front-end developers en coderen van praktijken en dacht dat ik zou het door te geven. Het is door Doug Neiner, redacteur bij Fuel Uw Coding en is voorzitter van Pixel Graphic Design Studio . Hij is verslaafd aan nieuwe technologie, en in het bijzonder houdt van tijd doorbrengen met WordPress, Ruby on Rails en jQuery.

Wat nu volgt is een serie van 10 dingen om te onthouden en te oefenen op elke web development project. Ik heb vermeld ze hier in volgorde van belangrijkheid, veel van de stappen die op elkaar voortbouwen. Als je niets anders uit de buurt van het lezen, neem dan Regels # 1 en # 2 tot en met hart en ze te oefenen. Ik denk dat het oplossen van deze twee problemen zal leiden tot een beter ontwerp en betere uitvoering in websites op het internet.

1. Laad Genoeg, en nog wat

Vooral in moeilijke economische tijden, bedrijven en particulieren zowel proberen om kosten te besparen en projecten te houden tot een minimum. Door deze kennis wij als webontwikkelaars proberen om door elke fase zo snel mogelijk. Front-end ontwikkeling, echter wel eens een aanzienlijke hoeveelheid tijd indien goed uitgevoerd. Niet voldoende opladen voor die tijd leidt ons als ontwikkelaars over te slaan dingen die we weten zijn belangrijk alleen maar om het project te blijven binnen de begroting. De regel is simpel ... je normaal gesproken niet de tijd nemen om het goed te doen als je niet de tijd hebben om te nemen. De enige manier om meer "tijd" als ontwikkelaar te krijgen, is het waarborgen van de tijd die we besteden DO goed gecompenseerd. Op dat punt alleen kan ons hart en geest volledig te worden aangesloten op onze projecten ... en pas dan kunnen we de tijd nemen om de resterende 9 regels te volgen.

2. Educatie van het Designer

Voor degenen die een ontwerper / ontwikkelaar all-in-een machine, moet dit makkelijk zijn. Echter, programmeurs die werken met of voor een ontwerper een unieke verantwoordelijkheid. Zoals veel ontwerpers komen uit een afdruk achtergrond, is het aan u, de ontwikkelaar, om hen te informeren over de mogelijkheden om hun ontwerpen. Nee ... Ik heb niet gezegd laten weten over de 150 + jQuery plugins die u gebruikt, of je gedachten over het gebruik van een UL / LI combo vs een reeks van A tags. Ik zei voeden, zodat zij de mogelijkheden. Help hen begrijpen hoe hun ontwerp kan worden weergegeven op verschillende apparaten. Help hen begrijpen hoe om gebruik te maken herhalen achtergronden en betegelde patronen om grote ontwerpen te realiseren met een minimale bestandsgrootte.

Gebruik de creativiteit ook niet alleen verlaten aan de ontwerper! Dit is uw kans om te bewijzen dat je creatief en door het vinden van de perfecte technologische oplossingen voor de behoeften van de ontwerper te voldoen. Hen te vertellen "het gewoon niet wordt gedaan op die manier" voor elke aanvraag is een zekere manier om frustraties aan beide zijden veroorzaken. Zet je geest aan het werk vinden van manieren om hindernissen.

Let op: de regels 3 tot en met 10 op te bouwen uit de eerste twee regels. Sommige van de volgende regels extra afbeeldingen van de ontwerper, en alle regels de tijd nemen om te volgen. Maak een afspraak op de artikelen 1 en 2, en de overige regels zullen zowel zinvol en maak uw afgewerkt product dat veel beter.

3. Denk in Lagen, Niet in Slices

Zelfs vandaag de dag hebben we nog steeds gebruik van de uitdrukking "versneden het ontwerp" om het proces van het verplaatsen van een ontwerp uit Illustrator of Photoshop in het afgewerkte HTML / CSS-lay-out te beschrijven. Hoewel dit nog grotendeels juist, zijn naam logenstraft het vroegere concept van het snijden van een ontwerp in stukken en opnieuw monteren van het (meestal in een tabel) terug op de HTML-pagina.

Dat was de oude web. Het nieuwe web maakt gebruik van het concept van gelaagdheid, stapelen, en z-index om ontwerpen te bereiken met de diepte. Als een coder, moet u de gelaagde PSD-bestanden of gelaagde AI-bestanden te krijgen van de ontwerper ten opzichte van een plat design. Dit zal u toelaten om veel meer flexibiliteit in hoe je samen een website hebben. Vergeet niet dat bij het werken in lagen, overweeg dan de HTML-elementen die essentieel zijn voor de structuur voor de toevlucht te nemen tot het toevoegen van extra divs en overspanningen. U kunt gebruik maken van een herhalende verticale patroon op de html element, en een patroon dat zich horizontaal achtergrond op de body element zonder dat de gevreesde div#wrapper in om je achtergrond ellende op te lossen.

4. Gebruik de Best Image Format

Wat is de "Best Image Format" vraag je? Het is de enige die het best is om de taak geschikt is bij de hand. PNG-, GIF-en JPEG-bestanden hebben allemaal verschillende voordelen. Als er geen transparantie in een beeld, uit te testen die de bestandsgrootte / beeldkwaliteit is het beste tussen PNG, GIF en JPEG. Voor grote afbeeldingen, JPEG zal bijna altijd te winnen voor kwaliteit vs grootte. Voor kleine afbeeldingen zonder transparantie, zien welke heeft een betere bestandsgrootte PNG of GIF. Als u besluit op een GIF-, zorg er dan te spelen met de dither opties en de lossy opties (Wist je wel Photoshop heeft een "lossy" optie voor GIF?). Vaak kun je knijpen nog kleinere bestanden uit Photoshop door middel van het aanpassen van de output-instellingen nog verder.

Voor beelden die moeten om de transparantie te hebben, te maken opgeleide beslissingen over de manier waarop ze zullen worden gebruikt. Als ze worden gelaagd over een complexe achtergrond, kan je rekening moet houden met een PNG-bestand. Als de achtergrond is consistent genoeg is dat de kleur mat van een GIF-niet slecht uitkomen, zien of het GIF-bestand is kleiner. GIF heeft het voordeel dat niet nodig extra programmering te laten werken in IE6.

Wat betreft JPEG-gebruik: Als u JPEG-als onderdeel van uw user interface (en niet alleen om een ​​foto, enz. weer te geven) moet u achterwege laten van de ICC-profielen bij het opslaan voor web. Sommige browsers zullen eren het profiel en de productie van een kleur verschil tussen GIF / PNG-en JPEG-bestanden van dezelfde kleur. Dit is een eenvoudig probleem te vermijden door alleen het uitschakelen van de ICC.

Wat als het een verlies-verlies situatie? Er zijn tijden geweest waar ik de volledige transparantie van een PNG nodig met het beeld complexiteit beter geschikt voor een JPEG-bestand. In deze gevallen heb ik vaak stapelen (vergeet niet, denken in lagen) twee afbeeldingen: een PNG voor de transparantie, en een GIF voor het complexe beeld aspect. Het is creatief oplossen van problemen als deze die zorgen ervoor dat uw pagina's snel geladen, en dat het ontwerp behoudt zijn integriteit.

5. Weet wanneer je moet lessen vs Ids Gebruik

Ik dacht dat dit was gewoon gezond verstand, maar blijkbaar is het niet zo heb ik veel programmeurs met klasse namen, waar ze moeten gebruik maken van id's te zien. Het lijkt misschien niet als een groot probleem, maar het zal wanneer u probeert om een ​​element met behulp van Javascript richten.

Het concept is simpel, als er slechts een element op een bepaalde pagina, gebruikt u een id. Als er zullen meerdere exemplaren op een bepaalde pagina, gebruik class namen. Altijd een element is one-of-a-kind, gebruik maken van een id. Het is zo eenvoudig! Dingen zoals ul.navigation voor de belangrijkste navigatie-bar of div.site-logo geen zin. Elk van deze elementen zijn te onderscheiden en moeten hebben en id.

In plaats van het toevoegen van een andere regel aan onze lijst, laat het me ineens iets anders hier: gebruik niet te veel klassen! Neem de volgende code voor een extreem voorbeeld (Merk op dat de klassen zes keer verschijnen):

Voor degenen die code vaak, je je realiseert dat dit een belachelijk voorbeeld, maar het toont de misvatting van de over-met behulp van klassen. Gebruik alleen wat je nodig hebt om de juiste stijl en te verbeteren (via Javascript) de HTML, meer niet.

6. Maak je pagina's Responsive

Het is belangrijk dat de juiste pagina reageert als de eindgebruiker navigeert doorheen. Met behulp van conventies zoals beeld rollover-effecten als met de: hover,: actief en: focus staten kan niet genoeg benadrukt worden. Je wilt niet aan te vallen de gebruiker met te veel interacties of stijlen, maar de meeste mensen goed reageren op visuele feedback. Hier is een eenvoudige een voor u: links moet veranderen staat als de muis over hen ... punt uit! Het is niet genoeg dat de browser een handje wijst op een koppeling wordt. Ik kan je niet vertellen hoe frustrerend het is om door middel van een pagina zoeken met zwarte tekst op zoek naar de donkergrijze links en hopen en bidden dat de hand lijkt me te laten weten dat ik er een gevonden!

Met behulp van verdragen zoals het 'U bevindt zich hier "-indicatoren of een beschrijvend tool-tips allemaal vallen onder deze categorie. Hoe meer interactie en feedback die wordt weergegeven aan de gebruiker terwijl ze navigeren door een site, hoe beter.

7. Altijd CSS Sprites voor Rollovers

Als je niet weet wat CSS Sprites zijn, controleer dit artikel op Smashing Magazine of deze een op A List Apart voor meer informatie. Voor degenen die weten wat ze zijn, waarom niet je ze kunt gebruiken!? Als u mij vertellen zijn te wijten aan een gebrek aan tijd, wil ik u verwijzen naar # 1 regel in deze lijst. Voorbij de tijd argument, ik kan niet echt dat van enig voordeel belangrijker dan het gebruik van CSS Sprites voor beeld rollovers. Bekijk ook de Starter voor jQuery site. Bijna alle user interface stukken worden gebouwd met behulp van een PNG-bestand (hieronder afgebeeld). De interface laadt alles in een keer, en al de hover / active staten zijn onmiddellijk beschikbaar. Geen vertraging voor a: hover te laden afbeelding, een verzoek naar de server, en niet 10 +. Dit is een fantastische tool in de Front End Coding Toolkbox die ontwikkelaars nodig hebben om vaker te gebruiken.

8. Begrijpen het verschil tussen Flash en Javascript

Ik denk dat Javascript kan geweldige dingen doen. Ik hou ook van verlegging van de grenzen van wat het kan doen. Ik hou van het maken van widgets en plugins net zoveel als de volgende kerel ... maar Javascript kan niet alle problemen in dynamische web development. In plaats van 10 uur emuleren van een Flash-functie die een uur zou duren om te maken in Flash, maken van de juiste keuze en kies Flash. Aan de andere kant, als je hoeft alleen maar een afbeelding rotator ... ga je niet durft te openen Flash!

9. Test uw site in veel browsers (waaronder IE6)

Deze kost tijd, is er geen twijfel over mogelijk. Ik ontwikkel op een Mac, en hebben een PC (en meerdere Virtual PC-omgeving), dat laat me test is het grootste deel van het normale browsers mensen gebruiken vandaag. Tenzij u Google Analytics-rapporten die zeggen dat niemand IE gebruikt of iedereen maakt gebruik van Firefox, maken geen een veronderstelling over hoe mensen uw site te bladeren. Ik zeg niet dat maken de sites zien er identiek uit, maar ze te laten werken, functie, en zien er leuk (en zeker gelijk!) In de meeste browsers.

Opmerking: Ik noem IE6 speciaal omdat mijn grootste klant is een bedrijf dat nog steeds gebruik maakt van IE6. Heb ik een codering stijl die me in staat stelt om snel te bouwen voor de moderne browsers, en slechts een paar style sheet-en JavaScript-oplossingen, zodat de site er goed uitziet in IE6 te implementeren. Ik weet zeker dat ik een aantal rand te verliezen door het te doen op deze manier, maar het bespaart me van vele gênante momenten.

10. Houd altijd Onderhoud In Mind

Als u "snijden" een Photoshop-ontwerp, of de voorbereiding van uw CSS en Javascript, houdt het onderhoud in het achterhoofd. Sommige gek-cool CSS hack je vandaag de dag gebruiken kan komen er later op terug achtervolgen je. Dumping CSS-regels, waar u ook kunt u in een CSS-bestand kan snel lijken op het moment (Guilty!), maar zal veranderen en updaten ze later een nachtmerrie.

Een belangrijke stap om te onthouden optreedt nadat u heeft klaargestoomd van een ontwerper-bestand voor uitvoer uit Photoshop of Illustrator: Vergeet niet om een ​​versie van het bestand op te slaan net voor de export. Op die manier als je nodig hebt om opnieuw te exporteren later, een andere knop toe te voegen, wijzigen van een regel tekst, enz., moet je in staat zijn om opnieuw te exporteren het snel. Photoshop slaat normaal beeldformaat keuzes, compressie-instellingen, en matte kleuren om uw werk nog gemakkelijker.

Conclusie

Er zijn een aantal andere dingen die belangrijk zijn voor Front End Coders in gedachten te houden, maar ik denk dat dit zijn enkele van de meest belangrijke. Veel zou kunnen stellen dat dit geen regels, maar ik daag u uit om van hen denken als zodanig. Misschien heeft u minder kans om ze te breken in het belang van tijd of geld op uw volgende project.