Kod

HTML5 i CSS3: Wireframing w produkcie końcowym

To klasyczny przypadek Photoshopa i strony internetowej. Istniejące narzędzia do tworzenia szkieletów i prototypowania nie są w stanie dokładnie odzwierciedlić środowiska sieci.

Tworzą statyczne projekty, których nie można zobaczyć za pośrednictwem zmiennej znanej jako przeglądarka internetowa. I kiedy budujesz końcową stronę, niektóre elementy nie będą wyglądały dokładnie tak, jak ich wersje robocze, a klient zauważy te drobne różnice w czcionkach, pozycjonowaniu itp.

Możesz być bardziej komfortowy z programem graficznym, a renderowanie iteracji może potrwać dłużej, jeśli musisz ręcznie kodować kod HTML.

Jednak zalety tworzenia szkieletu w HTML od samego początku zaczynają przewyższać alternatywy: nie tylko mamy nowe elementy układu w HTML5 i bardziej zaawansowane selektory i stylizację w CSS3, ale łącząc je, możemy złożyć razem proste układ szybko.

Codziennie słyszymy nowe przedsiębiorstwo ( 37 Sygnały , Atomiq i inni ) wyjaśnić jej przyjęcie prototypowania HTML. Ich głównym powodem jest to, że proces jest zaskakująco prosty, gdy masz odpowiednie narzędzia. Zaraz dowiesz się, jak prosty może być ten proces, a kiedy skończysz, będziesz miał lepszy start w następnej wersji.

Szybki układ z HTML5

HTML5 oferuje zestaw doskonałych nowych elementów strukturalnych, które ułatwiają szybkie tworzenie dokumentów o mniejszej liczbie klas i identyfikatorów. Gdy zrozumiesz cel tych elementów, będziesz w stanie stworzyć szorstki układ strony w ciągu kilku minut.

Jeśli nie znasz tych nowych elementów, oto krótki wstęp. Nowe elementy zapewniają czystszą strukturę dokumentu niż wcześniej, jednocześnie pozwalając na odejście od intensywnego używania elementów div. Lachlan Hunt pięknie opisuje te elementy w " Podgląd HTML5 ":

  • The article element reprezentuje niezależną sekcję dokumentu, strony lub witryny. Nadaje się do treści, takich jak wiadomości i posty na blogu, posty na forum i komentarze indywidualne.
  • The section element reprezentuje ogólną sekcję dokumentu lub aplikacji, na przykład rozdział.
  • The header element reprezentuje nagłówek sekcji. Nagłówki mogą zawierać więcej niż nagłówek sekcji; na przykład rozsądnie byłoby uwzględnić podtypy, informacje o historii wersji i bylines.
  • The nav element reprezentuje sekcję linków nawigacyjnych. Nadaje się zarówno do nawigacji w witrynie, jak i spisu treści.
  • The aside element jest dla treści, która jest stycznie powiązana z zawartością wokół niego i jest przydatna do oznaczania pasków bocznych.
  • The footer element reprezentuje stopkę sekcji. Zwykle zawiera szczegóły dotyczące tej sekcji, takie jak nazwisko autora, linki do powiązanych dokumentów i dane dotyczące praw autorskich.

W mojej przykładowej witrynie chcę mieć wyśrodkowaną stronę z nagłówkiem, bocznym paskiem po lewej stronie, obszarem głównej treści i stopką. Użyłem elementów HTML5 do oznaczenia struktury za pomocą article element do wszystkiego. 

Example
>

Te elementy i elementy div są bezwymiarowe i niewidoczne, chyba że ustawisz atrybuty stylu lub umieścisz w nich zawartość. Aby były możliwe do zastosowania, musimy tymczasowo przypisać im wysokość. Powinniśmy także ustawić elementy HTML na display: block; tak, że przeglądarka je rozpoznaje (dodatkowa praca jest wymagana dla IE). 

article, header, nav, aside, section, footer {display: block;min-height: 100px; }

Przed pozycjonowaniem elementów musimy mieć możliwość wizualizacji układu. Idealne rozwiązanie do wizualizacji struktury bez jakiejkolwiek zawartości byłoby łatwe do usunięcia później i nie wpłynęłoby na projekt.


Opcja 1: Kontury

Zarys ustawienie jest kompatybilne ze wszystkimi nowoczesnymi przeglądarkami i nie wpływa na szerokość elementów, podczas gdy border atrybut ma. 

article, header, nav, aside, section, footer {outline: 1px solid #000; }
Wireframing HTML z konturami CSS

Opcja 2: HSLa

HSLa (lub nawet RGBa) zapewnia lepszą reprezentację hierarchii elementów, ponieważ nieprzezroczystość spowoduje, że nakładające się elementy będą ciemniejsze. Ale jeśli planujesz mieć podstawowe kolory tła w makiety, ta metoda może nie działać dobrze. 

article, header, nav, aside, section, footer {background: hsla(200, 30%, 30%, .4); }
Wireframing HTML z CSS3 HSLa

Pozycjonowanie

Metoda pozycjonowania elementów jest kwestią osobistych preferencji i masz wiele opcji: narzędzia pomiarowe w przeglądarce lub systemie operacyjnym, obrazy siatki tła (które wybrałem), frameworki CSS z pomocą siatki i układu, lub oprogramowanie takie jak Dreamweaver. Pozycjonowanie jest najważniejszą częścią i będzie musiało działać poprawnie od samego początku. Kod, który tu napiszesz, najprawdopodobniej pozostanie w produkcie końcowym.

W moim przykładzie dałem stronie stałą szerokość, z bocznym paskiem po lewej i treścią po prawej, zarówno pomiędzy nagłówkiem, jak i stopką. 

body > article {width: 760px;margin: 0 auto; }article article {overflow: hidden;width: 750px;margin: 20px 0;padding: 5px; }aside {width: 150px;float: left; }section {float: right;width: 590px; }

W trakcie całego procesu mogę zobaczyć każdą sekcję i zobaczyć, gdzie się ona pojawi. Oto wynik:

Wireframing HTML z konturami CSSWireframing HTML z CSS3 HSLa

Nie przejmuj się kompatybilnością przeglądarki, dopóki nie przejdziesz do produktu końcowego. Zdecydowanie zalecamy pozostawienie notatek za pomocą komentarzy CSS, zaznaczając obszary, do których powinieneś wrócić (które będą głównie selektorami i atrybutami wymagającymi dodatkowej opieki dla niektórych przeglądarek).

Prototypowanie treści

Po ukończeniu układu możesz potrzebować dodać przykładową zawartość. Najpopularniejszą metodą jest dziś wyrzucanie na stronę kawałków Lorem Ipsum i znaków wodnych. Po co wyważać koło?

HTML Ipsum to doskonała strona internetowa, która zawiera tekst Lorem Ipsum we wspólnej marży. Umiejętność chwytania wszystkiego na jednej stronie nie może być łatwiejsza.

HTML-Ipsum

PlaceHold.it oferuje obrazy zastępcze o dowolnej wielkości, wywołując każdy obraz za pomocą żądania adresu URL (np http://placehold.it/350x150 , gdzie pierwsza wartość to szerokość, a druga wysokość):

Placehold.it Przykład zastępczy


PlaceKitten działa dokładnie tak samo jak PlaceHold.it, z wyjątkiem obrazów cuter:

Placekitten Placeholder Przykład

Zamiast dodawać zaawansowany JavaScript do map, możesz pobrać mapę podstawową jako obraz za pośrednictwem Google Static Maps . Wymagany jest klucz API lub unikalny podpis, ale i tak musisz go zdobyć, jeśli ostateczny produkt będzie zawierał mapę.

Symulowanie zachowania

Nowoczesne strony internetowe zawierają funkcjonalność, która jest trudna do komunikowania się za pomocą statycznych modeli krawędziowych: rozwijanie i zwijanie elementów, przejścia, przeciąganie i upuszczanie, dynamiczne menu itp. W każdym razie będziesz musiała użyć biblioteki JavaScript, więc teraz ładowanie biblioteki i wykonywanie skryptów w niektórych podstawowa funkcjonalność nie zaszkodzi.

Możesz uniknąć pobierania, ładując jQuery z sieci partnerskiej. Naśladuj zamierzone zachowanie za pomocą kilku funkcji zamiast zapisywania rzeczywistego kodu. Na przykład, jeśli element powinien się pojawić po kliknięciu łącza (powiedzmy, okno logowania lub formularz kontaktowy), utwórz szybki szkielet okna, ukryj go domyślnie, a następnie użyj jQuery, aby odsłonić go po kliknięciu.

Tak długo, jak robisz wystarczająco dużo pracy, aby naśladować zachowanie, klient będzie mógł zobaczyć wynik dla siebie, zamiast konieczności wlewania serii wykresów lub wyjaśnień.

Symulacja stanów

Jeśli tworzysz szkielety dla aplikacji internetowej, a nie strony internetowej, możesz chcieć szybko pokazać kilka stanów pojedynczej strony. Można tworzyć różne kopie szkieletu, z których każdy jest zmieniany, aby pokazać określony stan, lub można go użyć PolyPage .

PolyPage to wtyczka jQuery, która umożliwia używanie klas w znacznikach do reprezentowania elementów, które będą obecne w różnych stanach (na przykład zalogowany i wylogowany). Możesz przełączać każdy stan za pomocą linku, dzięki czemu możesz łatwo pokazać różnice klientowi bez potrzeby kilku stron.

Końcowe przemyślenia

Podczas gdy oryginalne projekty zawsze wyglądają wspaniale na papierze lub w PDF, budowanie stron HTML od samego początku ma kilka zalet.

Oszczędzisz czas poświęcony na odtworzenie projektu w kodzie. Unikasz zamieszania, zastanawiając się, dlaczego produkt końcowy nie wygląda dokładnie tak, jak oryginał. I oszczędzasz zarówno Tobie, jak i klientowi czas, pieniądze i nerwy.


Michael Botsko jest web developerem i instruktorem technologii internetowych w Portland w stanie Oregon. Lubi pracować zarówno nad klientem, jak i otwarte źródło projekty z Botsko.net , LLC. Kiedy nie pracuje, lubi spędzać czas ze swoimi dwójką dzieci i wspaniałą żoną.

Które szybkie narzędzia do projektowania i prototypowania zostały przeoczone? Jakie są zalety projektowania i budowania później?

html5 programowanie css3 wireframing html kod