Skip to main content

[03 MyFood] Stworzenie szablonu HTML

Od czego zacząć jak niczego nie ma

Wpis powiązany z projektem MyFood. Szczegóły tutaj »
  • Stworzenie repozytorium [zrobione] – https://github.com/mfratczak/myfood-generator
  • Stworzenie szablonu szablonu html [w trakcie]
  • Wgranie aktualnej wersji projektu na domenę [wymyślam nazwę domeny, masz propozycje? pisz!]

Github

Przy tworzeniu nowego repozytorium, github automatyzuje tworzenie pliku z licencją (wybrałem licencje MIT). Drugą rzeczą ułatwiającą życie jest utworzenie automatycznie pliku .gitignore na podstawie wybranej technologii projektu. Co daje ten plik?

Git sprawdza plik .gitignore, i przy kolejnym pushu, ignoruje pliki nie powiązane z projektem, lub pliki które są generowane automatycznie (cache, kompilacje itp).

Dzięki temu nie wysyłamy do repo zbędnych plików, oraz trzymamy porządek.

Szablon strony / wygląd

Projekt tworze etapami.

  • stworzenie szablonów html
    • główna strona
    • logowanie
    • wygląd modułów
  • wrzucenie szablonów do flask
  • oprogramowanie po stronie backend i frontend elementów szablonów

Co mi daje przygotowanie szablonów oddzielnie, z wykorzystaniem dockera?

  • instalacja npm + gulp w dockerze
  • wykorzystanie pelnego repozytorium semantic ui (możliwość włączania / wyłaczania modułow, kompilacja plików less)
  • wykorzystanie live preview
    • co to jest i po co? A więc na jednym monitorze mam edytor, gdzie edytuje pliki html, css itp, a na drugim jest otwarta przeglądarka gdzie każda zmiana w plikach powoduje natychmiastowy podgląd. Brak konieczności przełączania się z edytora do przeglądarki i wciskania: CTRL + F5 (odświeżenie okna)
    • po co to? Bo to ułatwia pracę. Przy tworzeniu szablonu, jest pełno mały zmian, sprawdzania wyglądu, coś co jest męczące :)Dzięki temu mogę pracować w jednym programie i widzieć podgląd od razu. Robisz zapisz, a po sekundzie widzisz zmiany
    • aby odpalić live preview należy posiadac gulp + wtyczke w przeglądarce (nazwa LiveReload)

 

Co to docker przeczytać możesz tutaj: 1, 23 (chcesz więcej? napisz komentarz)

Pierwsze kroki z semantic ui przeczytasz tutaj, oraz przy okazji zobaczysz co można osiągnąć z tą paczką.

Semantic można ściągnąć jako paczke z wszystkimi stylami i dodawać tylko własne. Jednak jeśli chcesz stworzyć lekki szablon to musisz sam skonfigurować projekt z wykorzystaniem npm + gulp. (co to gulp?, co to npm? długo by wyjaśniać dlatego podaje linki. )

 

W projekcie MyFood będzie kilka kontenerów dockera. (python, mysql, ..) . W dodatkowym kontenerze, który będzie odpalany tylko do tworzenia szablonu znajdować się będzie Npm + Gulp.

Jeśli cię to nie interesuje, zapraszam do kolejnego posta, gdzie już będzie gotowy wstępny szablon html i zacznie się prawdziwa zabawa!

Dzisiaj tworzymy kontener dockera do szablonów!

Utworzyłem dwa repozytorium. Jeden to sam czysty projekt z plikami html + css + js (tylko do podglądu dla was). Drugie repozytorium to docker (w którym odpalam npm + gulp). Do szybkiego testu użyjemy dwóch.

Wejdź w dany katalog. A następnie zaciągnij repozytorium:

git clone git@github.com:mfratczak/docker-node-gulp-bower.git livetest

Wejdź do katalogu „livetest”. Zbuduj obraz dockera:

docker build -t gulp .

Następnie, klonujemy repozytorium z przykładowym kodem źródłowym szablonu html

git clone git@github.com:mfratczak/node-gulp-livereload.git opt

Następnie instalujemy zależności NPM

docker run --rm -i -t -v $(pwd)/opt:/opt gulp npm install

następnie odpalamy live preview

docker run --rm -it -p 35729:35729 -p 8080:8080 -v $(pwd)/opt:/opt gulp gulp live

I to na tyle …

Wchodząc na stronę: http://localhost:8080/ widzimy nasz plik html.

Aby edycja live zadziałała, musimy jeszcze zainstalować dodatek do przeglądarki o nazwie „LiveReload” (dostępne na stronach chrome store, oraz ff extension). Po instalacji dodatku, każda zmiana pliku css, js, html widać w przeglądarce.

Koniec

Pogubiłeś się? hmmm, ja po pierwszym redagowaniu posta również. Jeśli więc dalej się gubisz napisz. Z twoją pomocą poprawie nieczytelne rzeczy.

Może to wygląda na skomplikowane. Jednak nie jest aż tak źle, jak wygląda. Jak się wkroczy w w świat dockera to potem wszystko jest łatwiejsze.

 

Ps. Czytałem tego posta 3 razy. Pewnie będzie kilka razy w przyszłości ulepszany i upraszczany :) . Jeśli masz propozycje, pisz komentarz (co wyrzucić, co zostawić, czego za dużo).

Marcin Frątczak

Początkujący bloger, początkujący fotograf, nie początkujący pasjonat technologii.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Google Analytics Alternative