witola.com

Oto artykuł czytałem na blogu dotyczących front-end developerom i praktyki kodowania i myślałem, że go przekazywać. Jest Doug Neiner i redaktor w Fuel twój kod i jest prezesem Pixel studio graficzne . On jest uzależniony od nowych technologii, aw szczególności uwielbia spędzać czas z WordPress, Ruby on Rails i jQuery.

Co za tym idzie o to seria 10 rzeczy do zapamiętania i ćwiczyć na każdego projektu internetowego. Wymieniłem je tu w kolejności ważności, ponieważ wiele kroków budować na siebie. Jeśli wziąć niczego innego od czytania, proszę wziąć reguł # 1 i # 2 do serca i ich praktykowania. Myślę, że rozwiązania te dwa problemy będą prowadzić do lepszego projektowania i lepszej realizacji w portalach w Internecie.

1. Naładuj mało, a nawet więcej

Zwłaszcza w trudnych ekonomicznie czasach, przedsiębiorstwa i osoby prywatne starają się obniżyć koszty i utrzymać projektów do minimum. Dzięki tej wiedzy, jak programistów próbuje przenieść poprzez każdej fazie możliwie jak najszybciej. Przód rozwój końca jednak zająć dużo czasu jeśli prawidłowo. Niedostatecznie opłat za tego czasu prowadzi nas jako deweloperów do przeskoczenia rzeczy wiemy, że są ważne tylko do utrzymania projektu w ramach budżetu. Zasada jest prosta ... normalnie nie będzie miała czasu, aby zrobić to dobrze, jeśli nie mają czasu podjęcia. Jedynym sposobem, aby dowiedzieć się więcej "czasu" jako deweloper jest zagwarantowanie czasu mamy trać jest właściwie wynagradzane. W tym momencie sam może nasze serca i umysły w pełni podłączony do naszych projektów ... i tylko wtedy możemy trochę czasu, aby wykonać pozostałe 9 zasad.

2. Kształcić Designer

Dla tych, którzy projektant / programista wszystko w jedno urządzenie, to jedno powinno być łatwe. Jednak programiści pracujący z lub dla projektanta mają unikalną odpowiedzialność. Jak wielu projektantów wywodzą się z druku, to do Ciebie, developer, edukować ich o możliwościach dostępnych do ich wzorów. Nie ... Nie powiedziałem, daj im znać o 150 + jQuery wtyczki używasz lub swoje zdanie na temat korzystania z UL / LI combo vs serii A tagami. Powiedziałem, edukować ich możliwości. Pomóż im zrozumieć, jak ich konstrukcja może wyświetlać na różnych urządzeniach. Pomóż im zrozumieć, jak wykorzystać powtarzających tła i wzorów kafelków, aby osiągnąć wielkie projekty o minimalnej wielkości pliku.

Nie pozostawiaj kreatywność wyłącznie do projektanta albo! To jest twoja szansa, by udowodnić jesteś kreatywny, a także przez znalezienie idealnych rozwiązań technologicznych do potrzeb projektanta. Mówiąc im "to po prostu nie robi w ten sposób" na każde żądanie to najpewniejszy sposób, aby powodować frustracje po obu stronach. Umieścić swój umysł do pracy znalezienie sposobów wokół przeszkód.

Uwaga: od 3 do 10 Zasady budowy od tych dwóch pierwszych zasad. Niektóre z poniższych zasad wymaga dodatkowych grafiki od projektanta, a wszystkie zasady potrwać do naśladowania. Zobowiązać się do reguł 1 i 2, a pozostałe zasady będą zarówno sens i dokonać gotowy produkt, który znacznie lepiej.

3. Pomyśl w warstwach, a nie w plastry

Nawet dziś wciąż używamy zwrotu "wyciąć się projekt", aby opisać proces przenoszenia projektu z programu Illustrator lub Photoshop do gotowego HTML / CSS układu. Chociaż jest to nadal w dużym stopniu dokładne, jej nazwa przeczy poprzednim koncepcie krojenie projekt na kawałki i ponowne złożenie go (zazwyczaj w tabeli) z powrotem na stronie HTML.

To był stary internetowej. Nowa internetowa korzysta z pojęcia warstw, układanie, i z-index dla osiągnięcia projektów wraz z głębokością. Jako programista, należy uzyskać warstwowych plików PSD lub warstwowe plikach AI od projektanta vs płaskiej konstrukcji. To pozwoli Ci się mieć o wiele większą elastyczność w jaki sposób połączyć stronę internetową. Pamiętaj, że podczas pracy na warstwach, należy uwzględnić elementy HTML, które są niezbędne do konstrukcji przed podjęciem dodanie dodatkowych div i przęseł. Możesz używać powtarzający się pionowy wzór na html element, a powtarzający się poziomy tła na body element bez wprowadzania przerażającej div#wrapper w celu rozwiązania swoich nieszczęść tła.

4. Użyj najlepszy format obrazu

Co to jest "Best Image Format" pytasz? To jedno, że najlepiej nadaje się do zadania pod ręką. PNG, GIF i JPEG mają różne zalety. Gdy nie ma przejrzystości obrazu, przetestować, który plik rozmiar / jakość obrazu jest najlepiej między PNG, GIF i JPEG. W przypadku dużych obrazów JPEG prawie zawsze wygrywać dla wielkości vs jakości. Dla małych obrazku bez przeźroczystości, zobaczyć, który ma lepszy rozmiaru pliku PNG lub GIF. Jeśli zdecydujesz się na GIF, należy grać z opcjami ditherowym i opcji stratnej (Czy ty w ogóle wiesz Photoshop ma "stratnej" opcję GIF?). Często można wycisnąć nawet mniejsze pliki z Photoshopa poprzez dostosowanie ustawienia wyjścia jeszcze bardziej.

W przypadku obrazów, które muszą mieć przejrzystość, uczynić świadomych decyzji, w jaki sposób zostaną one wykorzystane. Jeśli będą one nakładane na złożonym tle, być może trzeba rozważyć użycie pliku PNG. Jeśli tło jest zgodny wystarczy, że matowy kolor GIF nie będzie wyróżniać się źle, czy plik GIF jest mniejszy. GIF ma tę zaletę, nie potrzebuje dodatkowego oprogramowania, aby to działało w IE6.

Jeśli chodzi o wykorzystanie JPEG: Jeśli używasz JPEG jako część interfejsu użytkownika (a nie tylko do wyświetlania zdjęć, itp.) Pamiętaj, aby zostawić off profili ICC podczas zapisywania do internetu. Niektóre przeglądarki będą honorować profil i wytwarzają różnicę koloru pomiędzy GIF / PNG i JPEG o tym samym kolorze. Jest to prosty problem, aby uniknąć po prostu wyłączyć profile ICC.

Co jeśli jest stracić-lose sytuacja? Były czasy, gdzie trzeba pełną przezroczystość PNG ze złożonością obrazu lepiej nadaje się do JPEG. W tych przypadkach często stos (pamiętaj, że w warstwach) dwa obrazy: PNG dla przejrzystości, a GIF do złożonego aspektu obrazu. Jest to twórcze rozwiązywanie problemów jak ten, który zapewni twoje strony ładują się szybko, i że projekt zachowuje swoją integralność.

5. Wiedzieć, kiedy użyć klas vs identyfikatory

Myślałem, że to po prostu zdrowy rozsądek, ale najwyraźniej to nie jest tak widzę dużo koderów używając nazwy klas, w których powinni używać identyfikatorów. Nie może wydawać się duży problem, ale to będzie podczas próby kierowania element przy użyciu JavaScript.

Koncepcja jest prosta, jeśli będzie tylko jeden element na danej stronie, należy użyć identyfikatora. Jeśli nie będzie wielu wystąpień na danej stronie, używać nazw klas. Zawsze elementem jest jedyny w swoim rodzaju, należy użyć identyfikatora. Jej takie proste! Rzeczy takie jak ul.navigation na głównym pasku nawigacyjnym lub div.site-logo sensu. Każdy z tych elementów są różne i powinny mieć i id.

Zamiast dodanie nowej reguły do ​​naszej listy, daj mi kawałek coś innego tu: nie używać zbyt wielu klas! Weź następujący kod skrajnym przykładzie (Zauważ, że klasy pojawiają się sześć razy):

Dla tych, którzy często kod, zdajesz sobie sprawę, że jest to śmieszny przykład, ale pokazuje błędność zbyt wykorzystaniem klas. Używaj tylko to, czego potrzebujesz, aby prawidłowo stylu i zwiększenia (poprzez JavaScript) HTML, nic więcej.

6. Nakręć Strony Responsive

Jego ważne, że strona reaguje prawidłowo jako użytkownik nawiguje przez niego. Korzystanie konwencje jak efekty rollover obrazów jak: hover,: active i: Państwa ostrości nie można przecenić. Nie chcesz, aby napaść użytkownikowi zbyt wiele interakcji lub stylów, ale większość ludzi reaguje na widoczności. Oto proste jeden dla Ciebie: linki powinien zmienić stan, kiedy myszą nich ... okres! Nie wystarczy, że przeglądarka wyświetli rączkę wskazujące na związek. Nie mogę powiedzieć, jak frustrujące jest to, aby przeglądać strony z czarnego tekstu szuka mrocznych powiązań szarych i nadzieję i modląc się, że ręka wydaje się poinformowanie mnie znalazłem jeden!

Korzystanie z konwencji, takich jak "Jesteś tu" wskaźników lub opisowych narzędzie końcówki wszystkie należą do tej kategorii. Więcej interakcji i sprzężenia zwrotnego, który pojawia się użytkownikowi podczas gdy oni poruszać się po witrynie, tym lepiej.

7. Zawsze używaj CSS sprites do najazdów

Jeśli nie wiesz, co CSS sprites to, sprawdź ten artykuł na Smashing Magazine czy ten jeden na A List Apart szczegóły. Dla tych, którzy wiedzą czym one są, dlaczego nie można z nich korzystać!? Jeśli powiesz mi jej z powodu braku czasu, chcę skierować Cię do Zasada nr 1 na tej liście. Ostatni argument czasu, naprawdę nie mogę myśleć o jakiejkolwiek korzyści ważniejsze niż przy użyciu CSS sprites do najazdów obrazu. Sprawdź Starter dla jQuery miejscu. Prawie wszystkie elementy interfejsu użytkownika są budowane przy użyciu pojedynczego pliku PNG (na zdjęciu poniżej). Obciążenia interfejsu wszystkie na raz, a wszystkie hover / active stany są natychmiast dostępne. Bez opóźnienia dla: hover obrazu do załadowania; jeden wniosek do serwera nie, 10 +. To fantastyczne narzędzie w przednim końcu kodowania Toolkbox że deweloperzy muszą stosować częściej.

8. Zrozumieć różnicę między Flash i JavaScript

Myślę Javascript może robić niesamowite rzeczy. Uwielbiam też przesuwanie granic, co może zrobić. Uwielbiam robić widgety i pluginy tak samo jak kolejnego faceta ... ale Javascript nie mogą rozwiązać wszystkich problemów w dynamiczny rozwój internetowej. Zamiast spędzać 10 godzin emulowania funkcji Flash, która weźmie 1 godzinę, aby w programie Flash, dokonać właściwego wyboru i wybierz Flash. Z drugiej strony, jeśli tylko potrzebujesz rotator obrazu ... nie waż się otwierać Flash!

9. Przetestuj swoją stronę w wielu przeglądarkach w tym IE6)

To jeden wymaga czasu, nie ma wątpliwości. I rozwijać na komputerze Mac, i mieć komputer (i wiele Wirtualne środowiska PC), które pozwoli mi test jest większość normalnych przeglądarek ludzi używa dziś. Jeśli nie masz raportów Google Analytics, które mówią, nikt nie używa IE lub każdy używa Firefoxa, nie czynią założenie o tym, jak ludzie będą przeglądania witryny. Nie mówię, sprawiają, że strony wyglądają identycznie, ale ich pracy, funkcji i wyglądają ładnie (a na pewno podobny!) W większości przeglądarek.

Uwaga: Wspominam IE6 specjalnie bo mój największy klient jest osobą prawną, że nadal używa IE6. I stworzyli styl kodowania, która pozwala mi zbudować szybko dla nowoczesnych przeglądarek, i wdrożyć jedynie kilka arkuszy stylów i poprawki javascript tak strona wygląda prawo w IE6. Jestem pewien, że stracę trochę przewagi, wykonując w ten sposób, ale ratuje mnie z wielu kłopotliwych momentów.

10. Zawsze miej na uwadze Konserwacja

Jak jesteś "cięcie" projekt Photoshop, lub przygotowaniu CSS i JavaScript, zachować utrzymania w umyśle. Niektóre szalony-cool Hack CSS użyć dziś może wyjść na jaw później. Dumpingu CSS gdziekolwiek proszę w pliku CSS może wydawać się szybko w momencie ust Guilty!), ale będzie zmiany i uaktualnienia później koszmar.

Ważnym krokiem do zapamiętania nastąpi po prepped projektanta plik do eksportu z programu Photoshop czy Illustrator: Pamiętaj, aby zapisać wersję pliku tylko przed wywozem. W ten sposób, jeśli musisz ponownie wyeksportować go później dodać kolejny przycisk, należy zmienić wiersz tekstu, itp., będzie można wyeksportować go ponownie szybko. Photoshop normalnie zapisuje wyborów format obrazu, ustawienia kompresji i matowe kolory, aby Twoja praca jest jeszcze łatwiejsza.

Wniosek

Istnieje wiele innych rzeczy, które są ważne dla Front End Coders pamiętać, ale myślę, że są to jedne z najważniejszych. Wiele może argumentować, że nie są to przepisy, ale Wzywam Was myśleć o nich jako takie. Być może będzie mniej prawdopodobne, aby je łamać w interesie czasu lub pieniędzy na swoim następnym projekcie.