Jak nauczyć się projektowania stron internetowych na własnych błędach

Sieć nie składa się z jednego monolitycznego frameworka. O wiele trudniej jest nauczyć się wszystkich elementów, które składają się na wszystko, co widzimy w Internecie, ze względu na jego modułowość.

Każdy popełnia błędy, które spowalniają czas tworzenia programu lub wprowadzają do niego błędy. Nie tylko to, ale niektóre rodzaje błędów stawiają cię w niekorzystnej sytuacji, gdy szukasz pracy.

Istnieją najlepsze praktyki, aby zapewnić jak najmniej problemów podczas projektowania witryny lub uruchamiania jej w środowisku produkcyjnym. Oto pięć najczęstszych błędów popełnianych przez młodych twórców stron internetowych i sposoby ich unikania.

Nadmierne poleganie na jQuery

jQuery jest zdecydowanie najpopularniejszym frameworkiem JavaScript na świecie. Zaadoptowanie go w swoim projekcie zaraz po utworzeniu może wydawać się kuszące, ale nie spiesz się.

Chociaż jQuery zapewnia wiele wygodnych metod przyspieszania tworzenia stron internetowych, ważne jest, aby nie używać go zbyt często. Nowi twórcy stron internetowych prawie zawsze popełniają błąd polegający na zrozumieniu metod API jQuery zamiast tego, jak one działają pod spodem.

Wielu pracodawców uważa jQuery za zobowiązanie, a nie coś, co warto mieć, ponieważ niektórzy programiści nie rozumieją , jak działa JavaScript .

Nie ma nic złego w korzystaniu z jQuery. Jeśli możesz, przyzwyczaj się do samodzielnego używania metod JavaScript. Polegaj tylko na jQuery dla wygodnych metod, których implementacja zajęłaby trochę czasu.

Nadmierne poleganie na frameworkach CSS

Frameworki CSS, takie jak Semantic UI i Bootstrap, mogą zaoszczędzić sporo czasu. Eliminują potrzebę ręcznego stylizowania i włączania responsywnego projektowania do Twojej aplikacji.

Podobnie jak w przypadku jQuery, łatwo jest wciągnąć się w cykl, w którym nigdy nie będziesz pisać własnego kodu CSS. Pod koniec dnia Twoja witryna będzie wyglądać ogólnie i w połowie gotowa. W skrajnych przypadkach może nawet wyglądać jak kilkanaście innych stron internetowych, które miały ten sam pomysł, co Ty.

Jeśli nie jesteś ekspertem w pisaniu kodu CSS, będziesz miał możliwość przeczytania podręczników, znalezienia mentora, który udzieli Ci potrzebnych informacji, np. jako przewodnik badawczy napisze dla mnie pracę naukową i dostarczy z dobrą i jakościową pomocą. Istnieją różne frameworki, które mogą być bardziej intuicyjne do pisania kodu.

Struktury takie jak Bootstrap istnieją, aby ułatwić Ci życie . Aby uniknąć nadmiernego polegania, naucz się samego stylu CSS, naucz się korzystać z preprocesorów, aby przyspieszyć rozwój i przestudiuj teorię kolorów, aby wiedzieć, które kolory pasują do siebie, a które nie. Kiedy właściwie zrozumiesz koncepcje, możesz zdać sobie sprawę, że nie potrzebujesz już nawet frameworków.

Brak narzędzia do odzyskiwania

Brak narzędzia do odzyskiwania, gdy jest ono najbardziej potrzebne, może spowodować awarię witryny i jej możliwy upadek. Za każdym razem, gdy wprowadzasz zmiany w swojej witrynie, ryzykujesz, że nie będzie ona dobra. Aby mieć pewność, że masz sieć bezpieczeństwa, do której możesz wpaść, pomyśl o użyciu narzędzia do odzyskiwania, takiego jak WP Reset.

WP Reset to najlepsze rozwiązanie, gdy pojawią się problemy w Twojej witrynie. Być może problemem jest brak dostępu do administratora WP lub spotkanie z białym ekranem śmierci. Cokolwiek to może być, WP Reset ma twoje plecy. Jest wyposażony w pomocne narzędzia do czyszczenia, które pozwolą Ci szybko i łatwo odzyskać Twoją witrynę.

Ponadto możesz go użyć do szybkiego zainstalowania dowolnych wtyczek i motywów lub wyłączenia ich, jeśli są wadliwe. Co więcej, funkcja Migawki WP Reset automatycznie wykonuje migawkę witryny przed wprowadzeniem w niej jakichkolwiek zmian, umożliwiając odzyskanie tej migawki, jeśli coś nie pójdzie zgodnie z planem.

Najpotężniejszą opcją, jaką zapewnia ta wtyczka, jest opcja Nuclear Reset, która pozwala całkowicie wyczyścić instalację, usunąć wszystkie wtyczki, motywy i wpisy w bazie danych. Używaj go jednak tylko wtedy, gdy naprawdę tego potrzebujesz.

Zapominając o optymalizacji witryny pod kątem szybkości

Jednym ze skutków nadmiernego polegania na jQuery jest tendencja do wpadania w nawyk antywzorców. Po pierwszym załadowaniu przeglądarki kod JavaScript i CSS musi zostać wykonany przed załadowaniem strony, w zależności od tego, gdzie umieścisz swoje skrypty.

Jak możesz sobie wyobrazić, posiadanie zbyt wielu skryptów spowolni Twoją witrynę. Posiadanie nieużywanych klas CSS zwiększy rozmiar pakietu Twojej witryny i podobnie ją spowolni.

Wiele zależy od optymalizacji prędkości. Aby wymienić kilka czynników: czcionki, obrazy, dodatkowe pliki JavaScript i CSS oraz kompresja plików odgrywają swoją rolę. Gdy już je opanujesz, spójrz na pakiety pakietów, takie jak Webpack i Rollup, które mogą usunąć nieużywane klasy CSS i metody JavaScript z twoich plików.

Niepełna walidacja danych wejściowych

Niektóre z najważniejszych części każdej witryny, jaką kiedykolwiek zbudowałeś, to formularze. Ponieważ jest to jedyny sposób, w jaki dana osoba może przekazać informacje na Twój serwer, zawsze konieczne jest sprawdzenie ich poprawności.

Niektóre z najczęstszych wektorów ataków w Internecie to nadal ataki XSS i wstrzyknięcie SQL. Błędem, który zwykle popełniają młodsi programiści, jest posiadanie walidacji danych wejściowych tylko w interfejsie.

Cała walidacja danych wejściowych odbywa się za pomocą JavaScript, którego wyłączenie jest trywialne. To powiedziawszy, Kenneth Sytian z Sytian Web Developer Filipiny zaleca, aby zawsze przeprowadzać walidację danych wejściowych zarówno na backendzie, jak i na interfejsie. Poza tym wszystkie znaki niealfanumeryczne powinny zostać zmienione, aby uniemożliwić ataki wstrzykiwania.

Ignorowanie znaczenia SEO

Nie wystarczy, że budujesz piękne strony internetowe i je wysyłasz. Równie ważne jest, aby ludzie widzieli i doceniali treści, które oferujesz. Najlepszym sposobem na to jest poszerzenie wiedzy na temat SEO i jej wdrożenie.

Pozycjonowanie to długi i skomplikowany proces, który wymaga ciągłych badań, aby pozostać w pętli ciągle zmieniających się zasad gry. Ze swoim łukowatym zasięgiem nie należy odrzucać tego, aby wykonać go pod koniec procesu rozwoju.

Niektóre praktyki, takie jak umieszczanie zawsze opisowych tagów „alt” na obrazach, muszą być aktywnie przetwarzane. Wyobraź sobie skanowanie wszystkich plików w poszukiwaniu znaczników alt i meta, gdy już skończysz z projektem.

Brak favikony

Łatwo jest odrzucić favicon jako niepotrzebny ze względu na to, jak trywialne jest jego ustawienie, ale jego istnienie jest dość ważne. We współczesnym internecie często zdarza się, że użytkownicy mają otwartych wiele kart, aby móc je później ponownie odwiedzić. Favicony działają jak zakładka, dzięki czemu Twoja witryna jest widoczna na pierwszy rzut oka. Brak jednego może oznaczać, że użytkownicy stracą zainteresowanie po drodze.

Wielokrotnie nagradzana projektantka UX, Michelle Dipp, zamiast tworzyć własne w Photoshopie, zaleca korzystanie z bezpłatnych narzędzi do projektowania graficznego, które można znaleźć w Internecie. Możesz nawet znaleźć taki, który oferuje szablony favicon, dzięki czemu możesz tworzyć własne bez kłopotów.

Ignorowanie responsywnego projektowania

Projektowanie responsywne to jedna z najważniejszych rzeczy, jakie powinna mieć strona internetowa. Większość ruchu w Internecie pochodzi z urządzeń mobilnych. Brak witryny, która wyświetla różne treści w zależności od rozmiaru ekranu, stawia Cię w znacznej niekorzystnej sytuacji. Dzieje się tak zwłaszcza wtedy, gdy twoi konkurenci oferują to samo.

Jednym ze sposobów na poprawę komfortu użytkownika jest zaimplementowanie lepkich elementów na swojej stronie internetowej. Przyklejone elementy to te, które pozostają stałe na stronie, gdy użytkownik przegląda. Gdy elementy są zamocowane, łatwiej jest do nich uzyskać dostęp i wiesz, że są zawsze w jednym miejscu, co jest niezbędne podczas korzystania z telefonu komórkowego.

Biorąc to pod uwagę, WP Sticky to idealna wtyczka, której możesz użyć do tworzenia lepkich elementów. WP Sticky pozwala na przyklejenie tylu elementów, ile chcesz, bez pisania ani jednej linii kodu; wystarczy wybrać swój element bezpośrednio z ekranu.

Dzięki WP Sticky możesz sprawić, że Twoje menu, nagłówek, stopka i wiele więcej będą lepkie. Co więcej, możesz dostosować położenie i krycie elementu oraz dodać go lub usunąć z określonego postu.

Poza tym jest to jeden z czynników, które Google bierze pod uwagę podczas rankingowania stron. Jeśli Twoja strona nie reaguje na telefony komórkowe, prawdopodobnie otrzymasz kilka e-maili z konsoli webmastera z ostrzeżeniem o aktualizacji witryny.

Wniosek

Właściwe projektowanie stron internetowych wymaga czasu. Czas na badania, czas na pracę i jeszcze więcej czasu na przyzwyczajenie się do zalecanych praktyk. Popełnienie błędu w czasie tworzenia to nie koniec świata. Zamiast tego traktuj wszelkie napotkane niepowodzenia jako doświadczenie edukacyjne. Poszerz swoją wiedzę i zastosowanie odpowiedniego projektowania stron internetowych z ich wykorzystaniem.

–

O AUTORZE

Becky Holton jest dziennikarką i blogerką w Bestdissertation.com, najlepszym serwisie pisania esejów. Interesuje się technologiami edukacyjnymi, pisaniem eksperckim i jest zawsze gotowa wspierać przemawianie informacyjne w AustralianWritings. Śledź ją na Twitterze.