W 1999 roku zbudowałem swoją pierwszą witrynę internetową przy użyciu Web Studio 1.0. Web Studio było graficznym interfejsem użytkownika. Można było stworzyć nowy landing page i przeciągnąć na niego elementy. Następnie założyłem darmową domenę i hosting w GeoCities i voila! Miałem stronę internetową. Szybko do roku 2004, chciałem pójść dalej, więc, podobnie jak wielu innych, postanowiłem zbudować stronę internetową zespołu.
- Odpowiedzi na 12 typowych pytań dotyczących języka JavaScript
Od tamtego czasu wiele się zmieniło. W tym artykule zamierzam udać się w podróż w przeszłość i ponownie odtworzyć tę samą witrynę internetową.
Zdobądź pliki w tym samouczku.
A więc zacznijmy! Po pierwsze, generalnie każdy nowy projekt dla mnie zaczyna się od mkd, po którym następuje g init. Dla tych z Was, którzy mnie znają, w którymś momencie prawdopodobnie wspomniałem wam o plikach dotfiles. Pliki dotfiles to pliki, które po prostu zaczynają się od kropki (wykonanie połączenia zajęło mi zaskakująco dużo czasu!) I mogą być używane do wielu celów. Dwa z moich ulubionych plików dotfiles to .aliasas i .functions. Pozwól mi rozwinąć…
W bashu możliwe jest utworzenie nowego katalogu za pomocą polecenia mkdir, a następnie trzeba zmienić katalog cd na katalog, który właśnie utworzyłeś. Korzystając z kodu, który mam w pliku .functions, można teraz uruchomić mkd. Spowoduje to nie tylko utworzenie nowego katalogu, ale także zmianę w tym katalogu. Na początku może się to wydawać przesadą, ale uwielbiam te mikro wygrane. Z biegiem czasu, zwłaszcza jeśli uruchamiasz te polecenia kilka razy dziennie, szybko dodają one dużo zaoszczędzonego czasu.
# Utwórz nowy katalog i wejdź do niego function mkd () {mkdir -p "$ @" && cd "$ _"; }
Następnym poleceniem, jeśli znasz git, jest po prostu git init, który pozwoli nam kontrolować wersję projektu. Często używam gita, nawet do list zakupów! Więc zamiast wpisywać git za każdym razem, ponowne dodanie aliasu g = "git" do .aliases jest dla mnie przyjemną, małą oszczędnością czasu.
Obecnie istnieje mnóstwo różnych ram i technologii. W tym projekcie chcę uprościć sprawę. Zamierzam używać HTML, CSS i, jeśli to konieczne, odrobiny JavaScript. Najpierw utwórzmy podstawowe znaczniki HTML. Ale poczekaj! Zatrzymajmy się i pomyślmy przez chwilę.
Czasami programiści, w tym ja, mogą być bardzo podekscytowani projektem i chcą natychmiast zacząć crack i od razu zacząć pisać kod na klawiaturze. Jednak uważam, że często nie jest to najlepsze podejście. Uwielbiam najpierw mieć ogólny zarys projektu. Robiąc to i mając znacznie jaśniejszą wizję projektu jako całości, uważam, że pozwala to na znacznie lepsze podejmowanie decyzji. Na przykład, jeśli zanurzyłem się bezpośrednio w kodzie, mógłbym napotkać problem, który musiałbym następnie cofnąć i zreformować. Istnieje kilka różnych wyników tego podejścia. Po pierwsze, może się zdarzyć, że będę musiał całkowicie usunąć kod i zacząć od nowa; po drugie, jeśli będę kontynuował w ten sposób, mogę skończyć z „kodem spaghetti”, który utrudni w przyszłości aktualizację, debugowanie i spowoduje utratę wydajności; po trzecie, czasami wychodzi dobrze i kończy się lepszy kod, ale mam tendencję do mówienia, że pierwszy i drugi wynik są znacznie częstsze.
Ten projekt jest dość mały; ma kilka stron: Strona główna, Wiadomości, Koncerty, Media, Albumy, Linki i części wspólne między tymi stronami: nagłówek, nawigacja, zawartość typografii, listy, obrazy, filmy. Kiedy pierwotnie budowałem witrynę Flash w 2004 r., Testowanie było znacznie prostsze. Witryna została zbudowana we Flashu na komputer stacjonarny z myszą i klawiaturą. Obecnie korzystanie z internetu na telefonach komórkowych i tabletach jest bardziej powszechne niż na komputerach stacjonarnych, a trend ten nadal rośnie.
Aby było to lepsze dla każdego, kto przegląda witrynę, na początku projektu wezmę pod uwagę kilka rzeczy i zastosuję strategię mobile first. Aby to zrobić i jeszcze raz, zanim napiszę jakikolwiek kod, wyciągnę dobry, staromodny długopis i papier. Najpierw piszę mapę witryny; dzięki temu istnieją pewne kluczowe obszary, które moim zdaniem można ulepszyć. Na przykład moja oryginalna witryna składała się z różnych stron dla każdego albumu zespołu. W tamtym czasie mieli trzy albumy, więc ładnie wpasowali się w nawigację. Teraz mają znacznie więcej i potencjalnie więcej, więc już myślę o sposobach uczynienia witryny bardziej odporną na przyszłość (starsza, ale dobra rzecz to Bulletproof Web Design Dana Cederholma).
Teraz mam w głowie ogólny pomysł na mapę witryny i strony, a następnym krokiem jest stworzenie kilku szkieletów low-fi. Z poprzednich doświadczeń w tworzeniu wielu responsywnych witryn wynika, że urządzenia mobilne wiążą się z interesującymi wyzwaniami projektowymi, a mianowicie, jak stworzyć nawigację, ale nadal umożliwiać ludziom przeglądanie głównej zawartości witryny. Zamierzam pójść za projektem, który wszyscy uwielbiamy / nienawidzimy: podejściem do menu burgerów. Jednak zamierzam dodać trochę skrętu. Oryginalna grafika wykorzystywała ptaki, więc zamiast standardowej ikony menu burgera zamierzam użyć grafiki ptasiej, która aktywuje menu oraz otwiera i zamyka jego skrzydła, aby wskazać, czy menu jest aktywne, czy nie.
Moje myśli zaczynają teraz nabierać kształtu, z myślą o tym, jak ludzie będą mogli poruszać się po witrynie. Pomyślę teraz o tym, jak mogą wyglądać same strony. Zaczynając od strony głównej, jest dość prosta, z zawartością typograficzną. Następnie wiadomości - znowu zawartość typograficzna, potencjalnie obrazy, a potem jakiś rodzaj nawigacji do przeglądania starszych postów. Koncerty - lista nadchodzących koncertów wraz z linkami do zakupu biletów. Jeśli chodzi o media, patrząc wstecz na poprzednią witrynę, widziałem „obrazy” i „filmy” jako dwie różne sekcje, ale myślę, że tutaj jest miejsce na ulepszenia i utrwalenie ich jako „media”. Albumy, ach, tak Albumy - w tym momencie robienie takich rzeczy się opłaca. Widzisz, strona Albumy ma typografię i obraz i będzie potrzebować jakiejś nawigacji, aby wyświetlić starsze posty. Brzmi znajomo? Brzmi bardzo podobnie do tej samej struktury, co strona z wiadomościami! Mając ten przegląd na najwyższym poziomie, mogę przyjrzeć się i przemyśleć rzeczy na bardziej szczegółowym, komponentowym, a niektórzy mogą nawet powiedzieć, że na poziomie projektowania atomowego, jeśli znasz pracę Brada Frosta.
Teraz już wiem, jak witryna będzie działać na mniejszych urządzeniach i elementach wielokrotnego użytku. Czas powtórzyć ten proces na większych urządzeniach. Ponieważ witryna jest dość prosta, a modele szkieletowe już stworzone na urządzenia mobilne, widzę, że większe urządzenia są dość podobne - poza tym mamy dodatkowe miejsce, dzięki czemu możemy poszerzyć obszary treści, a także uwzględnić boczną nawigację.
Boczna nawigacja to fragment witryny, który z przesunięcia mnie najbardziej ekscytuje.Czerpiąc inspirację z oryginalnej grafiki zespołu, zbudowałem nawigację jako sylwetka drzewa z liśćmi. Każdy liść był przyciskiem prowadzącym do innej strony witryny. Ponadto, gdy przewijasz i unosisz się z dala od liścia, liść ożywa, spadając na ziemię. Flash był w tym świetny; nazywano to animacją. Możesz ustawić element w jednej klatce kluczowej w interfejsie na osi czasu, utworzyć kolejną klatkę kluczową dalej na osi czasu i dodać ścieżkę, którą będzie podążał element. Idąc trochę dalej, zmieniając ścieżki, czas trwania i prędkość spadających liści, otrzymałem coś, z czego byłem bardzo zadowolony.
Ale teraz nie używamy Flasha, więc jak to zrobić? Dość często przechodzę do CodePen lub JS Bin. Dla tych z Was, którzy nie są tego świadomi, CodePen i JS Bin to usługi online, które umożliwiają szybkie kodowanie i zapisywanie. Zwykle postrzegam CodePen jako bardziej ukierunkowany na projektowanie, a JS Bin bardziej skoncentrowany na JavaScript. W tym projekcie będę używać CodePen do tworzenia nawigacji w drzewie z kilku powodów. Po pierwsze, chcę zacząć budować główną mobilną wersję strony i faktycznie robiąc to, jeśli sprawy byłyby krytyczne czasowo, mógłbym skończyć z MVP. Chociaż istnieją ulepszenia w witrynie, które można by wprowadzić, dodając przyjemną nawigację i animację w postaci liścia, wykonanie tego zajmie więcej czasu. Zaletą pracy w CodePen do nawigacji po drzewie jest izolacja od strony głównej i bazy kodu. Jeśli coś stanie się trudne z ukończeniem tego zadania, mogę zapisać miejsce, w którym się znajduję, kontynuować tworzenie głównej witryny, a następnie wrócić do nawigacji. Czasami odkrywam, że odchodząc od problemu, a nawet śpiąc na nim, moja podświadomość może dalej o tym myśleć. Następnie, wracając do problemu, pojawia się rozwiązanie.
SVG! Uwielbiam pliki SVG. Wcześniej we Flashu rysowałem zasoby liści w programie Illustrator. O dziwo, wciąż miałem działającą płytę CD z oryginalną grafiką i mogłem ją otworzyć. Obecnie używam Sketch i świetnie się spisało, otwierając plik. Mam teraz wszystkie zasoby liści gotowe do wyeksportowania jako pliki SVG. Dlaczego pliki SVG? Jest wiele powodów. Gdybyśmy mieli użyć pliku jpg lub gif na urządzeniu Retina, musielibyśmy również dostarczyć większe zasoby, w przeciwnym razie wyglądałyby rozmyte. Również w przypadku SVG możemy użyć CSS. To jest świetne i pozwala nam po prostu zmienić kolor SVG za pomocą odrobiny CSS, zamiast tworzyć inny zasób obrazu. Oznacza to, że jest łatwiejszy w utrzymaniu, a jako bonus jest również bardziej wydajny. Jeśli nie znasz SVG, gorąco polecam przeczytanie o nich i niesamowitej pracy mojej dobrej przyjaciółki, Sary Soueidan.
Po zainstalowaniu zasobów drzewa i liścia ostatnią rzeczą do dodania jest animacja. Jest kilka podejść do tego. Jednym z nich byłoby pozostanie wiernym oryginalnej animacji ścieżki Flash, którą zrobiłem. Oznaczałoby to replikację ścieżek i użycie SVG, a następnie potencjalnie dalszą pracę SVG ze ścieżkami i animateMotion. Całkiem podoba mi się ten pomysł z nostalgicznego punktu widzenia, ale CSS bardzo się rozwinął na przestrzeni lat i teraz mamy do dyspozycji transformacje i tłumaczenia, więc może to być inne podejście. Idąc o krok dalej, moglibyśmy nawet dodać trochę JavaScript, który losowałby spadające liście.
Obie opcje brzmią dobrze, ale przechylam się w kierunku trasy bardziej opartej na CSS. Oto kolejna zaleta korzystania z CodePen. Mogę szybko wypróbować jedno podejście. Jeśli okaże się, że jest to bardziej skomplikowane, niż początkowo sądziłem, lub nie wydaje mi się właściwe, mogę spróbować innego podejścia, tracąc niewiele czasu. W rzeczywistości okazał się to świetny pomysł! Nadal szukam opcji na to - zajrzyj do projektu w serwisie GitHub, aby uzyskać ostateczny wynik.
Po uporządkowaniu nawigacji w drzewie wróciłem do pierwszego podejścia mobilnego, budując nawigację. Jeśli znasz Sass, najprawdopodobniej napotkałeś zmienne. Ale czy wiesz, że zmienne są teraz dostępne w CSS? Mają całkiem przyzwoitą obsługę przeglądarek w Chrome, Edge, Safari i Samsung Internet! Ponieważ staram się trzymać podstawowe CSS i unikać dodatkowych zależności, jest to świetna wiadomość. Jak więc mielibyśmy to zaimplementować? Na górze arkusza stylów deklaruję moje zmienne:
: root {--grey: #ccc; --red: # fb0f0c; --grid-size: 10px; }
Teraz, gdy zostały zadeklarowane, mogę do nich zadzwonić, więc na przykład ustawienie koloru tła ciała wyglądałoby tak:
body {background: var (- gray); }
Idąc o krok dalej i pomagając w wyrównaniu siatki, spacji i rytmie pionowym, być może zauważyłeś, że zdefiniowałem również zmienną rozmiaru siatki. Zmienne działają bardzo dobrze z Calc i wygląda to mniej więcej tak:
// Używana jest standardowa zmienna, zwraca 10 pikseli. padding-top: var (- rozmiar siatki); // Dodanie funkcji calc, aby pomnożyć jednostkę zmiennej przez 2, daje wynik 20 pikseli. padding-bottom: calc (var (- rozmiar-siatki) * 2);
Po ukończeniu stylów nawigacji mobilnej zajmijmy się funkcjami ukrywania i pokazywania ich. Do przycisku przełączania zastosujemy tag etykiety, a następnie w tagu nawigacyjnym dodamy dane wejściowe:
header> h1> Band Witryna / h1> h2> Home / h2> label for = "mobileNav_toggle"> Toggle / label> / header> nav> input type = "checkbox" id = "mobileNav_toggle" role = "button"> ul> li> a href = "#"> Strona główna / a> / li> li> a href = "#"> O / a> / li> li> a href = "#"> Portfolio / a> / li> li> a href = "#"> Aktualności / a> / li> li> a href = "#"> Kontakt / a> / li> / ul> / nav>
Korzystając z poniższego CSS, możemy pokazać i ukryć menu nawigacyjne; ponieważ chcemy, aby etykieta znajdowała się w nagłówku, możemy użyć ~ aka tyldy lub (U + 007E), więc działa bez natychmiastowego zastąpienia przez pierwszy element.
#mobileNav_toggle [type = checkbox] {display: none; } #mobileNav_toggle [type = checkbox]: zaznaczone ~ .mobileNav_list {display: block; }
Po ukończeniu nawigacji mobilnej nadszedł czas na wdrożenie elastycznego projektowania witryn internetowych. Dodając główną treść witryny, a następnie korzystając z widoku elastycznego w Narzędziach dla programistów Chrome, mogę zwiększać szerokość widocznego obszaru, aż uznam, że jest wystarczająco dużo miejsca, aby odpowiednio utrzymać nawigację po drzewie. To kończy się na 600px i do tego możemy użyć zapytania o media:
.treeNav {display: none; } @ media screen i (min-width: 600px) {.treeNav {display: block; }}
Prawie na miejscu! Wreszcie, aby nawigacja w drzewie znajdowała się obok głównego obszaru zawartości, zamierzam skorzystać z Flexbox:
.container {display: flex; } .treeNav {display: none; min-width: 140px; }
Teraz nawigacja po drzewie zajmuje 100% wysokości, a zawartość robi to samo i znajduje się po prawej stronie. Oznacza to, że bez względu na to, jak długo trwa zawartość, nigdy nie przepłynie ona pod nawigacją po drzewie. Jeśli chcesz dowiedzieć się więcej o Flexbox, polecam wypróbowanie flexbox.io przez jedynego Wesa Bosa. Wiele może zdziałać!
To wszystko, na co w tej chwili mam czas, ale wciąż jest wiele rzeczy, które moglibyśmy zrobić, aby uczynić ten projekt jeszcze lepszym. Jeśli masz jakieś pytania lub spodobał ci się artykuł, przywitaj się na Twitterze lub przez moją stronę albo wyślij mi prośbę o ściągnięcie na GitHub!
Artykuł ukazał się pierwotnie w numerze 304 z netto, najlepiej sprzedający się magazyn na świecie dla projektantów i programistów stron internetowych. Kup numer 304 tutaj lub zapisz się tutaj.
