Kodowanie strony internetowej pod kątem szybkości i jakości
Piękno bycia projektantem stron internetowych polega na tworzeniu szczegółowego, kreatywnego i oryginalnego projektu strony internetowej Photoshop , bez konieczności (w większości) myśleć o tym, jak będzie kodowane .
W fazie projektowania wszystko zależy od wyglądu , a kodowanie może zostać później zajęte lub zlecone programistom.
Tak czy inaczej, nie myślenie o użyteczności lub funkcjonalności projektu jest świetnym sposobem, aby projektant nie czuł się ograniczony w procesie projektowania.
To świetny sposób myślenia i może prowadzić do najlepszych projektów. Jednak, gdy już trzeba zakodować, my jako projektanci jesteśmy w trudnym miejscu.
W tym artykule znajdziesz kilka prostych wskazówek, które mogą pomóc projektantom w szybkim uczeniu się podstawowej konwersji XHTML / CSS na szybko ładującą się stronę internetową, która jest zgodna z oryginalnym PSD.
Musimy sami wyciąć i zakodować projekty lub odrzucić część zysków na outsourcing PSD do firmy lub programisty XHTML / CSS. Jako główny projektant, druga opcja jest zwykle najlepszym wyborem dla klienta, ponieważ zapewnia najlepsze wyniki.
Czasami jednak, tak jak w przypadku mniejszych projektów lub w inny sposób, musimy sami kodować stronę . Bez względu na przyczynę, nie powinno to być awarią lub czymś, co zajmuje zbyt wiele czasu.
Robiąc to samemu kontra outsourcing
Ten artykuł jest bardziej ukierunkowany na projektantów stron internetowych, chociaż mam nadzieję, że ci, którzy są programistami, mogą również coś z tego zrobić. Koncentrując się na projektantach, wielu projektantów stron internetowych często nie lubi kodować stron internetowych. Lubimy projektować . Jest kilka wyjątków, ale w przeważającej części jest to stosunek do niego.
Wielu projektantów odkryło korzyści płynące z outsourcingu : zapłać zewnętrzną firmę, aby pokroiła i zakodowała projekt, odzyskała go za kilka dni, a zaoszczędzisz czasu i wysiłku, aby zrobić to samemu.
Jeśli ktoś nie ma wystarczającej pewności, by kodować witrynę wystarczająco wydajnie, spędzanie jej zbyt wiele czasu może nie być warte tego, co otrzymasz za projekt.
Na przykład, jeśli niedoświadczony programista spędziłby kilka godzin próbując dowiedzieć się, jak zakodować projekt, który właśnie stworzyli, ich czas spędzony może być wart więcej niż to, co kosztuje po prostu zlecenie pracy na zewnątrz.
Ponadto obciążanie klienta kosztami pracy z outsourcingiem zamiast własnej pracy może być dla nich opłacalne, a także czasochłonne dla siebie. (Och, i będziesz pomagał społeczności programistów, dając im trochę biznesu!)
Przychodzi jednak czas w karierze każdego projektanta, gdzie nie jest praktyczne zlecanie pracy na zewnątrz. Oto kilka przykładów:
- Po prostu nie jesteś w silnym punkcie finansowym.
Zwłaszcza dla freelancerów, przychodzą i odchodzą silne miesiące finansowe. Jeśli jesteś trochę nisko w banku, może to nie być najlepsza opcja, aby wydać około 150 dolarów na outsourcing, kiedy możesz otrzymać dodatkowe wynagrodzenie za samodzielne wykonanie pracy. Podczas gdy klient rekompensowałby wypłatę na rzecz outsourcera w ramach płatności za projekt, oznacza to, że twoje finanse się załamują, nawet jeśli chodzi o część programistyczną witryny. Robiąc to sam, to o wiele więcej pracy, ale to także o wiele więcej pieniędzy w kieszeni. - To mały projekt.
Czy projekt jest poniżej 1000 USD? Czy ponad 1/10 budżetu projektu nie jest opłacalne? Jeśli outsourcing kodu kodu jest zbyt duży w stosunku do procentu projektu, prawdopodobnie bardziej praktycznym rozwiązaniem jest samodzielne wykonanie tej czynności. Również mniejsze projekty są prawdopodobnie prostsze, więc niekoniecznie muszą zająć dużo czasu. - Kiedy wymaga specjalnej obsługi klienta lub dostosowania.
Niektóre projekty wymagają nieco więcej obsługi klienta, od ciebie, projektanta. W zależności od klienta i projektu, najlepiej jest podzielić część kodującą i kodującą na łatwiejsze w zarządzaniu kawałki, przy czym niektóre fragmenty są zmienne w zależności od opinii klienta podczas całego procesu. W każdej sytuacji, w której ty, projektant, musiałbyś zmieniać kod pasujący do potrzeb klienta po zakodowaniu pierwszej strony internetowej, prawdopodobnie najlepiej zrobić to samemu.
Tak więc to od Ciebie zależy, czy każdy projekt, każdy klient i każdy zestaw okoliczności zdecyduje, czy zlecić część kodującą, czy nie.
Jako korzyść dla outsourcingu, doświadczeni koderowie mogą stworzyć identyczną zakodowaną wersję do swojego projektu PSD , zachowując przy tym prędkość ładowania i użyteczność.
Jeśli znajdujesz się w sytuacji, w której chcesz / chcesz samodzielnie wyciąć i zakodować stronę internetową, oto kilka ogólnych wskazówek, jak 1) zaoszczędzić czas, więc nie musisz pracować za 2 USD / godz. I 2) zapewnić lepsze wyniki dla Twój klient, jako doświadczony programista, będzie nadal oszczędzał koszty outsourcingu.
1. Efektywnie pokrój
Photoshop i Fireworks mają wbudowane narzędzie do krojenia, które umożliwia projektantowi kodowanie strony bezpośrednio w HTML. Jednak nawet nowoczesne wersje tych programów tworzą tabelę znaczników. Oczywiście nie jest to bardzo przydatne dla współczesnego projektanta stron internetowych.
Dlatego programowanie i kodowanie stron internetowych to osobna praktyka, która wykorzystuje swój talent i doświadczenie. Wszystkie projekty internetowe wymagają ręcznego kodowania i procesu myślowego. Żadne oprogramowanie nie może zrobić tego za Ciebie.
Narzędzie do wycinania w programie Photoshop i Fireworks można jednak wykorzystać do projektowania aplikacji internetowych . Chodzi o to, aby wiedzieć, jak skutecznie używać narzędzia przekroju.
Zamiast zagłębiać się w samouczek dotyczący krojenia i kodowania, świetny samouczek dotyczący nettuts + może pomóc wielu osobom: " Pokrój i kości tego PSD "Omówiono podstawowe procesy myślowe, a także porady techniczne, dotyczące krojenia projektu strony internetowej w nowoczesny i poprawny sposób - przy użyciu tradycyjnego narzędzia wycinania.
Jest chronologicznie uporządkowany, z różnymi screencastami dla każdej fazy procesu tworzenia, a także z przydatnymi linkami do podobnych i dodatkowych screencastów.
Pierwszym krokiem jest obejrzenie tych samouczków i zrobienie z nich najważniejszych punktów: wiedzieć, jakie obrazy kroić, jak je zoptymalizować pod względem balansu jakości i szybkości oraz jakie elementy twojego PSD powinny być proste XHTML i CSS .
Sam proces tworzenia i wyjaśnienia bardziej doświadczonego programisty może pomóc projektantowi, który ma niewielkie doświadczenie w zakresie krojenia i kodowania, świadczyć o bardziej wydajnym procesie.
2. Uprość kod CSS
Czasami pierwszy sposób, w jaki można określić, jak używać CSS w celu uzyskania określonego efektu, nie jest najlepszym sposobem na to. Jeśli uważasz, że tworzysz zbyt dużo niestandardowych klas lub skomplikowanych taktyk, aby osiągnąć jeden efekt, pomyśl o alternatywnym sposobie, aby zrobić to bardziej efektywnie.
W przeważającej części jest to związane z doświadczeniem. Im więcej kodujesz stronę i odkryjesz nowe techniki, tym łatwiej uzyskasz dostęp do CSS.
Aby zapoznać się z podstawowymi sposobami upraszczania CSS, przeczytaj artykuł Woorka na temat " Podejście odgórne w celu uproszczenia kodu CSS ".
Artykuł dzieli się wskazówkami na temat równowagi w używaniu CSS, aby stworzyć podstawowy szkielet i konkretną stylistykę, jak efektywnie ponownie użyć gotowych elementów HTML i kiedy należy utworzyć własne klasy lub identyfikatory.
3. Używaj skrótów CSS i Minimalizuj znaczniki HTML
Im mniejszy rozmiar pliku, tym szybciej ładuje się i jest to tak proste. Używanie skrótów CSS i minimalizowanie długości znaczników XHTML przez ponowne użycie elementów to świetny sposób na zrobienie tego.
Kodowanie całej witryny musi być równowagą znaczników i stylów, które znaczą w CSS. Znacznik powinien być użyty do struktury, a styl CSS powinien być używany, więc dobrym sposobem na znalezienie tej równowagi jest pamiętanie o tym.
Poza tym praktyka wymaga jedynie zrozumienia technicznych aspektów stenogramu CSS, a także zdobycia doświadczenia.
Zapoznaj się z poniższymi samouczkami dotyczącymi opanowywania skrótów CSS:
Usunięcie zbędnych białych znaków może pomóc w szybszym ładowaniu znaczników i plików CSS. Podobnie jak w przypadku zminimalizowanego pliku JavaScript (takiego jak jquery.min.js), mniejsze pliki sprawią, że ładowanie stanie się bardziej wydajne, dzięki czemu procesor będzie mógł je szybciej odczytać.
Podobnie jak w przypadku CSS i znaczników, usunięcie wszystkich białych znaków w celu edycji i zarządzania nie jest praktyczne.
Zamiast tego weź udział w praktyce wcięcia i używania podziałów linii tylko wtedy, gdy jest to konieczne. Usuń także wszelkie komentarze w znacznikach i arkuszach stylów, które nie są konieczne do utrzymania witryny.
4. Smush.it
Użyj narzędzia takiego jak Yahoo Smush.it jeszcze bardziej schrupać obrazy. Takie narzędzie wykorzystuje algorytm kompresji, który znacznie zmniejsza rozmiar pliku bez utraty jakości obrazu. Średnio około 40% redukcji wszystkich zdjęć może spowodować ogromną różnicę w czasie ładowania strony internetowej.
Po prostu załaduj wszystkie obrazy na stronę internetową po zoptymalizowaniu oryginalnie w Photoshopie do aplikacji Smush.it. Otrzymasz nową listę zdjęć do pobrania, wyjaśniającą, ile miejsca zostało zapisane i jak.
5. Zwróć uwagę na CSS i zamówienie znaczników
Posiadanie elementów strukturalnych przed elementami treści lub styl cytowania bloku przed stylem akapitu nie spowoduje załadowania arkusza stylów szybciej. Jednak arkusz stylów wczytuje się w kolejności, w jakiej jest prezentowany w arkuszu stylów , więc można go użyć, aby strona wyglądała tak, jakby ładowała się szybciej.
Jeśli na przykład w arkuszu stylów najpierw zdefiniowano całą treść, obrazy i styl tekstu, elementy te zostaną załadowane przed załadowaniem jakichkolwiek elementów tła, elementów strukturalnych lub projektów.
Z tego powodu wygląda na to, że projektowanie stron internetowych ładuje się nieco wolniej, niż gdybyśmy najpierw zobaczyli tło i strukturę.
Najpierw przeglądarka ma strukturę i główne obrazy, na których można się skupić w sekundach, w których wciąż ładuje się zawartość.
6. Wiedzieć, kiedy używać skryptów po stronie klienta lub po stronie serwera
W przypadku podstawowych projektów projektanci stron internetowych prawdopodobnie nie będą zbytnio programować. Jednak niektóre skrypty mogą być wymagane w przypadku prostego formularza kontaktowego lub specjalnych efektów nawigacyjnych.
Niezależnie od tego, do czego służy, można używać dwóch typów języków skryptowych: po stronie klienta (gdzie język skryptowy działa w przeglądarce użytkownika) lub po stronie serwera (język skryptowy działa na serwerze).
JavaScript i każda biblioteka pod nim jest najpopularniejszym językiem skryptowym po stronie klienta. Ponieważ działa lokalnie w przeglądarce użytkownika, nie musi działać aż do serwera, aby wykonać jego przetwarzanie, dzięki czemu jest szybszy. Skrypty po stronie serwera są nieco wolniejsze, ale działają dobrze w małych dawkach i kiedy są odpowiednio używane.
Używaj skryptów po stronie serwera dla wszystkiego, co wymaga bazy danych lub czegokolwiek, co jest niezbędne do celu witryny. Ponieważ użytkownik może wyłączyć obsługę skryptów JavaScript, ale nie może wyłączyć języka po stronie serwera, skrypty po stronie serwera można bezpiecznie używać w przypadku wszelkich potrzeb związanych z witryną.
Na przykład formularz kontaktowy, chociaż jest lekki i może nie wymagać bazy danych, najlepiej jest używać z językiem po stronie serwera, ponieważ jest nadal dostępny dla osób z wyłączoną obsługą JavaScript.
Ogólnie rzecz biorąc, większość stron internetowych, które wymagają dodatkowych skryptów, powinna mieć równowagę obu. Niektóre mniejsze witryny mogą potrzebować tylko jednego lub drugiego, ale ważne jest, aby nie używać tylko jednego ze względu na to. Wiesz, kiedy i dlaczego, aby użyć każdego.
7. Ostatni, ale nie mniej ważny, sprawdzanie poprawności
Jest to oczywiste dla większości z nas, ale tak jak w przypadku każdego takiego artykułu, należy powiedzieć: w całym procesie kodowania i kiedy wszystko jest powiedziane i zrobione, sprawdź kod CSS i XHTML.
Wszyscy znamy zalety walidacji, ponieważ pozwala ona na podobne renderowanie różnych przeglądarek, sprawia, że strony internetowe ładują się szybciej i jest ogólnym sprawdzającym błędy kodu semantycznego.
Dodatkową korzyścią płynącą z tego procesu jest zbadanie nowych technik obsługi kodu CSS i znaczników.
Jeśli zaimplementowałeś pewien efekt w projekcie sieciowym, który nie sprawdza poprawności ani nie daje ostrzeżenia, istnieje duże prawdopodobieństwo, że W3 ma ku temu powód. Są to świetne momenty do badania innych opcji, aby stworzyć ten sam efekt, ale w lepszy, bardziej sprawdzony sposób.
Zawijanie
Niektórzy projektanci obawiają się, że muszą poświęcić jakość w obrazowaniu projektu podczas kodowania do XHTML / CSS w celu utworzenia szybko ładującej się strony internetowej - ale to po prostu nieprawda.
Istnieje wiele sposobów inteligentnego kodowania, które można utworzyć na przyjaznej dla użytkownika, szybko ładującej się stronie internetowej, która spełnia jakość projektanta. Korzystanie z tych wskazówek może pomóc, ale jest jeszcze wiele rzeczy do nauczenia się.
Pamiętaj, że jeśli jesteś niedoświadczonym krajalnikiem i programistą, początkowo może to być powolne, zwłaszcza gdy wciąż trwa proces uczenia się. Możemy znać XHTML i CSS, ale to zupełnie inna umiejętność, aby nauczyć się, jak robić to skutecznie. Podobnie jak podczas nauki projektowania, musimy nauczyć się, jak pięknie kodować .
Napisany wyłącznie dla WDD przez Kayla Knight .
Są to ogólne wskazówki, dlatego warto się z nimi podzielić dodatkowymi wskazówkami dotyczącymi praktyki krojenia projektu i kodowania go, zwłaszcza z perspektywy projektanta.