W przeszłości zajmowałem się kodowaniem HTML, CSS i PHP, ale pracowałem tylko nad rzeczami, które już zostały „ukończone” i nigdy nie zacząłem tworzyć strony od zera. Jednak niedawno kupiłem domenę i trochę hostingu za tani i mam nadzieję poprawić swoje umiejętności w zakresie HTML, CSS i JavaScript, dzięki czemu mogę stać się nieco bardziej zbywalny jako programista / webmaster.

Zazwyczaj jakiego procesu używasz do założenia strony internetowej? Czy rysujesz układ na papierze, a następnie tworzysz kod? A może dopiero zaczynasz kodować i dostosowywać wyjście do swoich upodobań?

Mój proces ogólnie wygląda trochę tak:

1. Właściwości . Za pomocą ołówka i papieru ułóż wyraźne cechy / strony, które będą składały się na stronę. To dotyczy szerokich pytań - czy budujesz prostą stronę informacyjną i graficzną dla swojej mamy? rozwiązanie e-commerce dla małej firmy? blog / galeria dla przyjaciela fotografa? Twoja odpowiedź będzie miała decydujący wpływ na ścieżkę kompilacji, którą musisz podążać. Ten etap może również obejmować poważną dyskusję z klientem lub z kimkolwiek, kto prowadzi łódź (jeśli to nie ty).

2. Model szkieletowy . Po ułożeniu wszystkich niezbędnych funkcji opracuj szkielet. Na papierze lub za pomocą narzędzia takiego jak fajerwerki, które pozwolą Ci zbudować bardzo prostą funkcjonalność nawigacyjną. Jeśli pracujesz z systemem CMS, takim jak wordpress, w jaki sposób obsłużysz swoje treści statyczne? To może być dobry moment, aby zacząć myśleć o strukturze plików. Jeśli Twój projekt będzie potrzebował niestandardowej bazy danych, teraz jest także czas, aby rozpocząć planowanie jego projektu i wdrożenia. Jest to krytyczny etap, ponieważ inteligentne planowanie pozwoli zaoszczędzić wiele cofania się i przerabiania, w przypadku popełnienia błędów lub wystąpienia pełzania projektu.

3. Technologia . Gdy etap planowania zostanie stosunkowo opracowany - wybierz swoje technologie. Czy robisz prosty HTML? php cms w środowisku lampy? Witryna .net mvc? Te pytania mogą wpłynąć na to, jakie środowisko hostingowe będzie wymagane, a także na koszty związane z uruchomieniem rzeczy. Jeśli robisz sklep, bezpieczeństwo jest tutaj najważniejsze (na przykład zgodność z SSL i PCI). Upewnij się, że masz świetne środowisko testowe (host lokalny lub inny).

4. Projekt / układ . Kiedy twoja lista funkcji i model szkieletowy są dość dobrze określone, możesz zacząć myśleć o projekcie witryny. Wiedza o tym, co zapełni strony, jest oczywiście warunkiem wstępnym. Lubię pracować w Photoshopie i często wykorzystuję foldery jako analogię do twojej struktury znaczników. Idę tak daleko, aby nazwać je zamierzonymi znacznikami i identyfikatorami css. Chociaż prawdopodobnie dobrze jest zrobić rysunek w dowolnej formie, zanim staniesz się naprawdę szczegółowy. Zwykle używam plików „układu”, z których będę pobierać elementy i umieszczać je w plikach „procesowych” - plików, których używam do generowania grafiki produkcyjnej.

5. Znaczniki / CSS . Po opracowaniu całkiem czystego projektu (biorąc pod uwagę, że z pewnością trochę się ugnie, gdy przejdziesz do trybu produkcyjnego), możesz zacząć pisać znaczniki. Ogólnie lubię mieć standardowy układ, który pomieści całą zawartość witryny. Więc - czysty i elastyczny powinien być tutaj kluczowy. Znaczniki układu powinny być dość kompletne, zanim zaczniesz pisać CSS, ale uważam, że robią dużo, aby się nawzajem informować. Na tym etapie wykonasz również wiele optymalizacji SEO (prawidłowe nazewnictwo zdjęć lub tagów A, meta informacje, typy dokumentów itp.) Bądź dokładny.

5.1 Zarządzanie tematami . Jeśli pracujesz z CMS, a Twój projekt zostanie wykorzystany jako niestandardowy motyw, znajdź kilka samouczków, jak dokładnie to zrobić dla zamierzonej aplikacji. To może być zniechęcające, szczerze mówiąc;) Zawsze będę budować statyczny układ znaczników z dość kompletnym CSS przed podzieleniem go na elementy motywu.

6. Zachowanie . Kiedy twoje znaczniki i css wyglądają na całkiem kompletne, a być może Twój motyw jest już na miejscu, możesz zacząć rozwijać zachowania (najazdy, itp.) Dyskretny javascript jest ważny, chyba że korzystasz z funkcji, które go absolutnie wymagają (ciężki ajax) galeria lub zawartość flash oparta na danych). Ogólna zasada brzmi: jeśli ktoś odwiedzi Twoją witrynę przy wyłączonym javascript, co zobaczy? Czasami usuwam elementy statyczne i zastępuję je interaktywnymi wersjami w czasie wykonywania.

7. Treść . Chyba że projekt jest zależny od treści (na przykład obrazy są czasami treścią) = Zazwyczaj używam tekstu zastępczego / grafiki, dopóki projekt i zachowanie nie zostaną ustalone. Unikaj wykonywania pracy więcej niż raz. Jeśli wypełniasz dane produktu, konieczne będzie staranne sprawdzanie błędów i testowanie.

W tym momencie zawsze wydaje się, że jest okres przeróbki, naprawy i polerowania. Ale w gruncie rzeczy nadszedł czas, aby żyć. Potem idź na przekąskę.

Hmmm. Myślę, że to coś więcej niż „jak zacząć”. Ale i tak może to pomóc. Powodzenia!

Przy projektowaniu strony internetowej zaczynam od pytania, dlaczego?

Pierwszą częścią mojego przepływu pracy jest pytanie DLACZEGO? Jeśli pracuję z klientem, muszę upewnić się, że mają jasno zdefiniowaną wizję tego, czego chcą od strony internetowej.

1. Dlaczego pytania.

• Opowiedz mi trochę o sobie i dlaczego to robisz.

• Kim są klienci? Jaka jest ich specyficzna potrzeba / ból? Proszę o dostarczenie mi - kilku konkretnych przykładów różnych rodzajów klientów, czego potrzebują, co zrobi dla nich strona internetowa.

• Opowiedz mi o firmie. Co dokładnie robisz?

• Co czyni cię lepszym od następnego faceta?

• Gdybyś szukał usługi, którą oferuje Twoja firma, co wpisałbyś w Google, aby ją znaleźć?

Jeśli budujesz witrynę dla siebie, lepiej już wiesz, jakie są te odpowiedzi.

Jeśli na podstawie odpowiedzi na powyższe pytania ustalisz, że osoby te są poważne i rzeczywiście mają dobry pomysł. Następnie kontynuuj (pamiętaj, że nie zarabiasz jeszcze, ale lepiej zdejmij skarpetki, jeśli chcesz, żeby cię zatrudnili).

2. Badanie.

Poświęć trochę czasu na badanie klienta i jego firmy. Dowiedz się o ich przeszłych sukcesach i napotkanych problemach. Czy jesteś trzecim programistą, którego zatrudnił? Co stało się z pozostałymi 2 facetami?

Dowiedz się, czego potrzebuje klient. Dla kogo będziesz budować tę stronę. Czy klientem jest 60-letnia emerytowana weterynarz czy 16-letni dzieciak z krostą, który gra w Farmville na Facebooku przez cały dzień?

Dowiedz się, kim są konkurenci. Mogą nawet nie wiedzieć. Dokonaj analizy konkurencyjnej od 5 do 10 konkurentów i dowiedz się, kto jest dupą, aby kopnąć Serps. To jest etap, na którym musisz wiedzieć, na czym polega słowo kluczowe. Później, a już i tak się nie udaje.

2b Wniosek

Zdmuchnij je swoją wiedzą na temat ich działalności i wymyśl umowę / propozycję witryny internetowej i bądź gotowy na podpisanie umowy, gdy tylko się zgodzą. Uzyskaj podpisaną umowę i 50% depozytu, a następnie przejdź do kroku 3.

3. Misja - Miej jedną

Jest tu wspólny temat: we wszystkich tych przypadkach misja nie dotyczy samego produktu. Misja jest „po prostu” czymś, co, jeśli naprawdę poważnie podchodzisz, wymaga, aby produkt stał się absolutnie niesamowity, więc tak się stanie. Jeśli wolisz: te misje są odpowiedzią na pytanie, dlaczego właśnie dodaliśmy tę nową funkcję ?, nie, jaką nową funkcję dodajemy? - Benjamin Pollack.

Należy ustalić harmonogram, aby każdy miał swoje oczekiwania w perspektywie.

4. Przepływ pracy

Tutaj zaczyna się większość ludzi, więc wyjaśnię mój proces, ale będziesz musiał zdecydować, który przepływ pracy jest najlepszy dla twojej sytuacji, zespołu, klienta itp.

1. Dla mnie treść jest na pierwszym miejscu. Dbam o to, aby klient wykonał większość czynności przed napisaniem kodu. Nie mówimy o ostatecznej edycji wersji próbnej, ale mniej więcej o słowach tekstu, które będą na stronach. Jeśli zaangażowany jest zespół marketingowy, może to chwilę potrwać.

2. Powinieneś już wiedzieć, jak będzie wyglądać strona. Powinieneś mieć treść. Teraz musisz popracować nad układem i ogólnymi zasadami projektowania, które pozwolą osiągnąć cel, który wymyśliłeś w kroku 3.

   Nienawidzę szkieletów, ale rozumiem, że są konieczne. Tylko dlatego, że wiesz, jak wygląda witryna, Twój klient może nie. To jest dla twojej ochrony i klientów. Kiedy wszyscy będą szczęśliwi, poproś o podpisanie się pod czymś, co brzmi: „Właśnie za to płacimy za budowę”.

3. Tworzenie frontendów i interfejs użytkownika - HTML, CSS i PROJEKTOWANIE W PRZEGLĄDARCE , technika Hardboiled Andy'ego Clarke'a. Mam dość marnowania tak dużo czasu w Photoshopie, gdy wiem, że mogę zademonstrować bardziej realistyczną, szybszą makietę, która również daje mi przewagę w rozwoju.

4b. The Codebase

W końcu możesz się zabawić. Dla Ciebie i dla klientów skorzystaj z VERSION CONTROL, zanim zaczniesz. Odkąd wykonujesz kontrolę wersji, powinieneś ustawić BŁĄD ŚLEDZENIA, gdy jesteś przy nim.

4c. Edycja kopii

Pamiętasz te treści, które mamy? Teraz trzeba go edytować. Ssę na to, więc próbuję zatrudnić kogoś innego lub upewnić się, że wiele osób to czyta. Sprawdź i upewnij się, że słowa kluczowe, o których mówiliśmy w kroku 2, są zoptymalizowane pod kątem SEO. Jeśli nasza treść jest świetna i dotyczy tych słów kluczowych, powinno to nastąpić naturalnie.

5. Beta i testy interfejsu użytkownika

Poproś żywych, oddychających ludzi, aby usiedli przed witryną i zaczęli z niej korzystać. Lubię zaciągać się do mojej matki, która czasami dzwoni i chce wiedzieć, dlaczego jej drukarka nie drukuje (wtyczka Mamo, najpierw musi być podłączona). Tego rodzaju użytkownicy muszą być w stanie poruszać się po Twojej witrynie, chyba że użyli powyższego przykładu 16-letniego dzieciaka z krostami.

6. Plan konserwacji i SEO

Upewnij się, że wszyscy wiedzą, kto jest odpowiedzialny za zwalczanie bestii z serwerów .

Za miesiąc powróć do wykonanej przez nas analizy konkurencji i porównaj naszą witrynę z analizowanymi. Użyj tych danych, aby stworzyć swój plan SEO. NIE. Nie mówię o SEO wężowym oleju, mówię o tym, aby upewnić się, że nadal generujesz odpowiednie treści, strony naturalnie linkują do ciebie (ponieważ jesteś niesamowity) i twoje tagi tytułowe dopasuj tekst podstawowy. SEO jest długim procesem, chyba że przepełnienie stosu i armia 14,1 miliona użytkowników do generowania wysokiej jakości treści dla Ciebie.

Istnieje duża różnica między jakością treści a materiałami, które można znaleźć w „witrynie z łącznikami”, których nie będę łączył. (Aby zapobiec nawet kapaniu na nie soku „bez śledzenia”).

7. Uruchom

Wszystko działa poprawnie? Czy misja budowania niesamowitości została osiągnięta? Przygotuj plan uruchomienia i wykonaj go.

Jeśli wszystko zrobiłeś poprawnie w krokach 1–6, uruchomienie będzie proste, bez problemu , że możesz mieć problemy. Po prostu bądź na nie przygotowany i napraw wszelkie błędy.

Wyślij fakturę, spłucz i powtórz.

Lubię zaczynać <!DOCTYPE html>

A tak na poważnie ... pierwsze priorytety:

1. Dowiedz się, czego chce klient. Narysuj przybliżony szkic dla podstawowego układu, wymyśl z schematem kolorów itp.
2. Wykonaj podstawową makietę nawigacji i układu (statyczną) i pracuj z klientem, aby ją udoskonalić.
3. Rzeczywista produkcja. Uzyskaj CMS i / lub zawartość statyczną na swoim miejscu. Porozmawiaj ponownie z klientem, aby upewnić się, że tego właśnie szukają i że mogą obsłużyć CMS / CMS może obsłużyć ich potrzeby.
4. Udoskonal i powtarzaj 3, aż klient będzie zadowolony.
5. ????
6. Zysk!

Przede wszystkim narysowałem podstawowy układ i zaprojektowałem go na papierze przed rozpoczęciem kodowania. Po ukończeniu podstawowego projektu na papierze łatwo go kodować w sposób modułowy. Najlepszym sposobem na jego dostosowanie byłoby użycie php & css.

Zawsze lubię zaczynać od wykonania makiety za pomocą oprogramowania do Photoshopa, aby mógł on zawierać wszystkie obrazy na twojej stronie.

Większość odpowiedzi jest już dogłębna, dodam tylko, że powinieneś użyć jakiegoś frameworka lub szablonów, aby nie marnować czasu na przepisywanie podstaw.

Istnieje wiele dostępnych ram PHP ( Kohana jest moim ulubionym) lub wiele osób używa Wordpress jako podstawy. Możesz również użyć frameworka CSS, znowu jest ich wiele, jednym z najbardziej popularnych jest system grid 960

Jak zwykle zaczynasz projektować stronę internetową ?

Podobnie jak ty, kilka lat temu odkryłem potrzebę promowania się jako programista / projektant stron internetowych. Odkryłem, że moim punktem wyjścia jest zrozumienie, jakie informacje, obraz i wiadomość chcę przekazać odwiedzającym moją stronę internetową? i co chciałem, aby użytkownik osiągnął / zrobił podczas odwiedzania mojej witryny .

Kiedy już to zrozumiałem, proces projektowania stał się znacznie bardziej przejrzysty. Pozwoliło mi to zapisać elementy mojej strony głównej i kolejnych stron, które przekazywałyby te elementy.

Na przykład bardzo chciałem, aby moje CV było łatwe do znalezienia i pobrania. Dlatego podczas projektowania mojej witryny zapewniłem, że informacje o moim CV i gdzie można je znaleźć, są łatwo dostępne.

Morał tej historii powinien być istotny. Wszystko na twojej stronie powinno mieć jakiś cel, w przeciwnym razie jest to po prostu niepotrzebny hałas.