Główna zawartość
Programowanie
Kurs: Programowanie > Rozdział 2
Lekcja 6: Układ CSS- CSS: Grupowanie elementów
- Wyzwanie: Pogrupuj ryby
- Szerokość, wysokość oraz przepełnienie w CSS
- Wyzwanie: Przeogromny ocean
- Model pudełkowy w CSS
- Wyzwanie: Bokser model
- Pozycja w CSS
- Wyzwanie: Ustaw planetę
- CSS w dzikiej przyrodzie: Mapy Google
- Elementy pływające w CSS
- Wyzwanie: Płynące chmury
- Wykorzystanie możliwości stylów CSS
- Planowanie swojej strony internetowej
- Projekt: Zaproszenie na specjalną okazję
© 2023 Khan AcademyWarunki użytkowaniapolitykę prywatnościInformacja o plikach cookie
Planowanie swojej strony internetowej
Czy chciałbyś zamienić pustą stronę na tę, z twoim snów? Powinieneś zacząć programować w HTML i CSS - zmieniają wszystko! Usuwają to, czego nie lubisz, dodają rzeczy, o których ciągle myślisz i zmieniają części strony.
To nie zawsze jest najlepszą metodą, bo może prowadzić do marnowania czasu pisząc kod. Zamiast tego po prostu zaplanuj wygląd twojej strony przed jej zbudowaniem. Pomyśl o tym, jak będzie wyglądać jej kształt, kolory, układ i nie tylko!
Burza mózgów
Najczęściej pierwszym krokiem planowania czegokolwiek jest burza mózgów - wymyślanie czegoś i tego, co chcesz zrobić. Możesz to zrobić poprzez rysowanie mapy myśli, tworzeniu notatek, pisaniu myśli lub pomysłów na tablicy i nie tylko!
Burzę mózgów można przeprowadzić samemu lub z w grupie, by zwiększyć liczbę pomysłów. Podczas "burzy" nie skupiaj się na błędach, a na odpowiedzi "Tak, i...". Skup się również na pomysłach innych i wnioskach z waszej wspólnej pracy.
Po tym, gdy wymyślicie wiele pomysłów musisz zadecydować, które są najważniejsze. Zróbcie system priorytetowy, np. oznaczcie najcenniejsze pomysły gwiazdką, lub przesuńcie je wyżej na liście. Resztę możesz odrzucić lub zostawić na później.
Testy na kartce
Bardzo dobrym sposobem na planowanie strony jest jej papierowy prototyp. Jak prawdziwa strona, tylko że na kartce. Wykonaj na papierze szkic elementów twojej strony. Zamiast treści napisz bazgroły lub popularne wśród programistów "Lorem ipsum".
Poniżej znajduje się papierowy prototyp dla wyszukiwania placków, aplikacji internetowej, która zaspokaja potrzebę znajdowania placków:
Ponieważ nie potrzeba zbyt dużo czasu do stworzenia prototypu, możesz stworzyć kilka i zmienić styl strony. Możesz stworzyć kilka prototypów w tym samym czasie, a także stworzyć prototypy dla kilku stron tej samej witryny.
Gdy stworzysz już prototyp powinieneś przeprowadzić testy. Pokaż prototyp znajomym, przyjaciołom i spytaj się co przyciąga ich największą uwagę, gdzie kliknęli by na początku oraz czy mają jakieś inne pomysły.
Szkielety
Gdy prototyp twojej strony będzie wyglądać dobrze warto stworzyć model szkieletowy. Model jest jak prototyp, ale dokładniejszy i rysowany komputerowo. Model składa się z pól, które reprezentują każdą część strony i zawiera kilka niewielkich kawałków tekstów, i ikon tam gdzie są potrzebne. Na przykład, oto model mojej aplikacji do wyszukiwania placków:
Oto szkielet popularnej strony do tworzenia prototypów, Balsamiq. Możesz stworzyć szkic korzystając z PowerPoint'a, Keynote'a, aplikacji graficznych, np. Photoshop, Gimp itd. lub z jeszcze czegoś innego. Większość kosztuje niemałe pieniądze, więc dobrze zastanów się jakie narzędzie kupić.
Gdy już stworzyłeś szkielet strony, warto przetestować po raz kolejny stronę z użytkownikami. Niektóre narzędzia do tworzenia szkieletów pozwalają na komentowanie przez innych. Istnieją też takie narzędzia jak InvisionApp, które pozwalają na tworzenie interaktywnych szkieletów, gdzie klikalne elementy przekierowują do innych ekranów.
Chcesz dołączyć do dyskusji?
- moglibyście dodać właściwość ' target="_blank" ' do znaczników <a> w artykule... chyba że zależy wam na tym żeby ludzie opuścili stronę Khan Academy i nie doczytali do końca :P(14 głosów)
- z twoim snów? to chyba błąd!(1 głos)
- Podejrzewam, że strona jest tłumaczona automatycznie przez tłumacza internetowego. Dlatego nie ma co się dziwić błędom.(1 głos)