Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids

Web Design dla Dzieci: Witaj w miasteczku Tuts+!

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Getting Ready to Build a Website

Polish (Polski) translation by Krzysztof Kaptur (you can also view the original English article)

Witaj w miasteczku Tuts+, gdzie każdy kocha web design! W tej serii nauczymy się wszystkiego o projektowaniu i budowaniu strony internetowej. By nam pomóc, stworzymy stronę razem.

Te lekcje (lub tutoriale) pokażą Ci krok po kroku, jak nadać życie stronie internetowej. Pliki z zadaniami będą umieszczone na końcu każdej lekcji, więc możesz porównać swoje prace w trakcie kursu.

Więc usiądź wygodnie i stwórzmy coś dla ludzi z Miasteczka Tuts+!

Jak działa Sieć?

Zróbmy krok w tył i zastanówmy się jak działa sieć.

Kiedy dwa komputery są połączone z internetem (przedstawione jako żółta kreska na rysunku poniżej), to mogą ze sobą rozmawiać.

Serwer (niebieskie pudełko) jest specjalnym komputerem, który zawiera pliki sieci. Twój komputer w domu lub szkole to nie serwer, ponieważ nie jest podłączony bezpośrednio do internetu. Łączymy się z internetem za pomocą dostawcy usług internetowych (ISP).

Zawartość strony (wszystkie informacje na niej zawarte) jest poukładana zgodnie z regułami, które komputer rozumie; jest to pewnego rodzaju tajny, zakodowany język, którego sami niedługo poznamy!

Jak komputer łączy się z siecią

Na tym zdjęciu przeglądarka prosi o wyświetlenie www.tutsplus.com z serwera, na którym znajdują się pliki strony. Serwer przesyła pliki do przeglądarki i ta tłumaczy informacje, by wyświetlić ją na stronie. Dzieje się to bardzo szybko!

Wszystko opiera się na komunikacji i dzieleniu się informacjami.

Dzięki temu, strona którą tworzysz lokalnie (na swoim komputerze) nie jest widoczna na innych komputerach, dopóki nie prześlesz plików na serwer. Później szczegółowo to omówimy.

Praca Web Designera

Praca web designera jest bardzo ważna. Wszystko, co dzieje się na zdjęciu powyżej ma jeden cel: wyświetlić stronę internetową. Web designer decyduje jak strona będzie wyglądała i działała, oraz że jest przyjazna dla niepełnosprawnych użytkowników (w podobny sposób, w jaki Ty jesteś użytkownikiem Tuts+).

Praca web designera

Nasz projekt

W tej serii będziemy tworzyli stronę Miasteczka Tuts+. Miasteczko potrzebuje miejsca, gdzie turyści będą mogli znaleźć potrzebne informacje o miasteczku, zanim je odwiedzą.

Tak wygląda podgląd naszej strony:

Tę stronę zbudujemy

Strona będzie zawierała wszystkie punkty web designu, o których będziemy się uczyć. Twój pierwszy projekt będzie świetny!

Szkic i Budowa

Porozmawiajmy teraz, co nam będzie potrzebne.

Po pierwsze, narysujemy naszą stronę i napiszemy w specjalnym pliku, co chcemy mieć na stronie. Umieścimy hiperłącza (linki), które zabiorą użytkowników w różne miejsca, np. do sklepu naszej strony.

Szkic jest bardzo ważny!

Projektowanie

Gdy skończymy rysować i napiszemy specjalny plik dla naszej strony, będziemy musieli sprawić, by dobrze wyglądała. To jest sekcja, w której wprowadzimy w życie kolory oraz kompozycję (zdecydujemy o rozmieszczeniu elementów na stronie).

Co ułatwi korzystanie z naszej strony? Jakie emocje chcemy wywołać za pomocą kolorów? Jaki układ powinien być na smartfonie? Jaki na komputerze? Jaka czcionka będzie najodpowiedniejsza? O tym wszystkim będziemy myśleć, ale nie martw się, to naprawdę świetna zabawa i po kilku projektach te pytania będą Ci się nasuwały automatycznie.

Mapa

Poniżej znajduje się mapa naszej wędrówki, którą odbędziemy tworząc naszą stronę. Każdy blok wprowadza zagadnienie, a następnie jest rozkładany na mniejsze elementy.

Nasza mapa

Wprowadzenie

Dzięki różowej gwiazdce widzisz, że teraz czytasz Wstęp  Teraz mamy podstawowe pojęcie o tym jak jak działa sieć, jaka jest rola web designera, oraz mieliśmy wgląd w projekt, który będziemy projektować i tworzyć wspólnie.

Budowanie Strony

W następnej części wymyślamy pomysły i zaczynamy szkicować. Szkicowanie to świetny sposób na zebranie myśli zanim zaczniemy pisać kod. Pomoże w zaoszczędzeniu czasu i śledzeniu postępu.

Następnie porozmawiamy o plikach i narzędziach, które będą nam potrzebne do pisania kodu.

HTML

Język znaczników hipertekstowych (HTML) jest tym sekretnym (ale nie na długo) językiem wykorzystywanym do organizacji wspomnianego wcześniej pliku tekstowego. Język ten pomaga wyszukiwarce zrozumieć i przedstawić stronę.

Wszystko na naszej stronie, oraz wszystkich innych, znajdzie się w elementach HTML. Elementy są częściami języka, które mają znaczenie i pomagają określić miejsce wszystkiego na naszej stronie.

Nie martw się, że na razie nie rozumiesz tego kodu. Musisz tylko wiedzieć, że każda strona powstaje jako tekst.

CSS

Kaskadowe Arkusze Stylów, CSS, pozwalają na ustawienie wyglądu (kolory, czcionki, klimat) dla naszej strony, tworząc ją atrakcyjną i możliwie łatwą dla użytkowników.

Jak wygląda CSS

Układ graficzny CSS

CSS służy także do rozłożenia wszystkich elementów na stronie.

Obrazki

W tej części szybko przedstawimy rodzaje obrazków, które znajdą się na naszej stronie i jak je ozdobić. Dodane będą cztery ładne obrazki. Co o nich sądzisz?

Our images

Podstawy Projektowania

W tej części przyjrzymy się elementom, które tworzą web design. Chcemy się upewnić, że ludzie będą jej z łatwością używali, oraz że będzie dobrze wyglądała.

Typografia

Typografia jest sztuką układania czcionki, oraz świetnym uzupełnieniem naszych lekcji projektowania, ponieważ może wzbogacić lub zaszkodzić naszej stronie.

Pierwszy przykład typografii na naszej stronie znajdziesz na samej górze:

Heading

Kolor

Kolor jest bardzo ważny i dostarcza dużo zabawy. Kolor może uczynić stronę piękną, może nadać znaczenie, o czym powiemy w kursie.

Koniec Serii

Na koniec serii nauczymy się jak umieścić stronę na specjalnym komputerze, serwerze, by Twoi przyjaciele i rodzina mogli ją zobaczyć w internecie. Powiemy także, gdzie możesz kontynuować naukę, będąc "Web Designerem Miasteczka Tuts+".

Ale nie przejmujmy się tym jeszcze, skoro dopiero jesteśmy tutaj!

Do zobaczenia wkrótce!

W następnej lekcji przeskoczymy do nauki: jak przygotować się do budowania stron w HTML. Nie mogę się doczekać, do zobaczenia w miasteczku!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.