Witaj w kursie Responsive Web Design
Kurs, który masz przed sobą to ponad 8 godzin materiałów w formie wideo tutoriali, które stanowią esencję praktycznej wiedzy o projektowaniu stron WWW na wiele urządzeń. W kursie stworzmymy krok po kroku projekt nowoczesnej strony, jak również udzielę Ci masy wskazówek dotyczących projektowania na wiele ekranów.
Dlaczego warto projektować na wiele rozdzielczości?
Obecnie coraz więcej osób korzysta z tabletów i smartphone'ów w celu przeglądania treści w Internecie. Każde takie urządzenie posiada już przeglądarkę, jednak strony WWW, które tworzyliśmy do tej pory są w dużej mierze niedopasowane do mniejszych ekranów. Tworzenie witryn zgodnych z różnymi rozdzielczościami to obecnie jedno z najtrudniejszych zadań webdesignerów. Jednocześnie, to zadanie bardzo ważne, ponieważ szacuje się że niektóre witryny już w tym momencie więcej osób przegląda z urządzeń przenośnych, niż z laptopów czy komputerów stacjonarnych. Dopasowanie stron do mobilnych przeglądarek stało się wymogiem rynku, a w ciągu 2-3 lat zdecydowana większość firm będzie posiadać taką responsywną wersję swojej witryny.
Na szczęście, kurs który masz przed sobą, szybko wprowadzi Cię w świat nowoczesnych technologii mobilnych. Poznasz techniki, które pozwolą dostosować istniejące projekty do wymogów Responsive Web Design, jak również tworzyć od podstaw nowe strony zgodne z wieloma rozdzielczościami.
Mobilny ekosystem
W kursie stworzymy między innymi kompletny projekt responsywnej witryny. W pierwszym etapie porozmawiamy o ważnych terminach i pracy koncepcyjnej. Dowiesz się jak działają mobilne przeglądarki oraz które z rozdzielczości powinniśmy obsłużyć. Rozszyfrujemy wiele skrótów jak DPI, Ratio, Density i zastanowimy się, jak wykorzystać tą wiedzę w praktyce przy projektowaniu strony dostosowanej do wielu rozdzielczości.
Projektowanie responsywnego layoutu
Mając już wiedzę na temat urządzeń i rozdzielczości, wykonamy layout naszej strony w Photoshopie. Pokażę Ci krok po kroku jak wybrać optymalne ustawienia programu i stworzyć kilka układów. Zaczniemy od rozdzielczości desktopowej, następnie stworzymy warianty na telefon i tablet. Przy okazji udzielę Ci szeregu praktycznych wskazówek dotyczących projektowania oraz narzędzi Photoshopa, które są szczególnie przydatne w tym procesie.
Zobacz lekcję kursu - Wskazówki do projektowania na wiele rozdzielczości >>
CSS3 Media Queries i inne techniki
Następnie zakodujemy nasze responsywne layouty z pomocą najnowszych technologii, wykorzystując między innymi CSS3 Media Queries, HTML5 oraz JavaScript. Skoncentrujemy się na optymalnym wyświetlaniu poszczególnych komponentów naszej strony takich jak teksty, kontenery i obrazki. Poznasz także szereg technik które pozwolą stworzyć elastyczny layout gdzie poszczególne elementy strony płynnie dopasowują się do rozdzielczości. Dopracowanie naszego projektu będzie polegało na zastosowaniu kombinacji wszystkich tych technik po to, aby użytkownicy mogli wygodnie przeglądać stronę na każdej rozdzielczości.
Zobacz lekcję kursu - Przyciski w CSS3 >>
Testowanie Elastycznych witryn
W projektowaniu na wiele platform niezwykle ważnym aspektem jest testowanie naszych witryn. Na szczęście nie musisz posiadać wszystkich urządzeń, aby dokładnie sprawdzić, czy Twoja strona będzie się na nich dobrze prezentować. Pokażę Ci szereg narzędzi, które wykorzystuję w swojej pracy, dzięki czemu będziesz mógł bezpośrednio w przeglądarce, lub z pomocą emulatorów, podejrzeć jak strona wygląda na telefonach i tabletach.
Ponadto, dowiesz się jak optymalnie i szybko przetestować strony na fizycznych urządzeniach. Pokażę Ci także najciekawsze narzędzia programu Adobe Dreamweaver, które wspomagają pracę i testowanie mobilnej strony.
Natywne aplikacje i Frameworki
Ponadto w kursie zamieściliśmy obszerny rozdział o popularnych frameworkach. Omówimy zarówno proste szablony i tzw. boilerplates, jak również bardziej zaawansowane frameworki - jQuery Mobile, Sencha Touch czy Phone Gap. Nie tylko przyspieszą one Twoją pracę ale również umożliwią wsparcie dla rozmaitych funkcji telefonu czy tabletu, jak geolokalizacja, żyroskop czy akcelerometr. W tym momencie już niewiele dzieli Cię od projektowania tak zwanych natywnych aplikacji na urządzenia mobilne. Dlatego w kursie szczegółowo wyjaśnimy, czym są natywne aplikacje i jakie są ich zalety i wady w porównaniu do stron WWW, które działają po stronie przeglądarki. Dowiesz się też, jak możesz gotową stronę przygotowaną w HTML5 skompilować do natywnej aplikacji, którą użytkownicy ściągną z AppStore czy Google Play.
Jeszcze więcej Elastycznych technik
To nie wszystko! W kursie poznasz mnóstwo dadatkowych, elastycznych technik dotyczących na przykład skalowania zdjęć czy nagłówków. Ponadto, dowiesz się jak tworzyć grafikę dla wyświetlaczy wysokiej jakości Retina w iPadzie i iPhone. Wykorzystamy też CSS3 do stworzenia elementów graficznych, które idealnie skalują się na różnych ekranach a także pokażę Ci czym są grafiki SVG i jak z nich korzystać. Wykorzystamy też narzędzia programu Dreamweaver, jak Fluid Grid czy jQuery Mobile i PhoneGap Build.
Dziesiątki witryn i darmowych zasobów
Kurs Elastyczne Strony WWW zawiera również ogromny zbiór zasobów, które przydadzą się w Twojej dalszej pracy i rozwijaniu umiejętności. Poza szeregiem darmowych narzędzi i generatorów do tworzenia i testowania responsywnych stron, podamy linki do najciekawszych artykułów w sieci, które uzupełnią Twoją wiedzę. Ponieważ Responsive Design to niezwykle modny temat, odfiltrowaliśmy dla Ciebie najważniejsze adresy i informacje. W kursie przedstawimy też szereg darmowych zbiorów zasobów do projektowania jak ikonki czy elementy interfejsu.
Podsumowując, kurs zawiera między innymi:
- Wprowadzenie do mobilnego ekosystemu i projektowania na wiele rozdzielczości
- Praktyczny projekt witryny, od koncepcji, przez projekt grafiki i kodowanie w HTML5 i CSS3
- Szereg narzędzi i porad dotyczących testowania responsywnych witryn
- Wskazówki do projektowania w Photoshop na wiele urządzeń
- Elastyczne techniki dla tekstu i obrazków
- Zbiór darmowych narzędzi, które ułatwią pracę
- Omówienie frameworków jak PhoneGap czy jQuery Mobile
- Porównanie aplikacji natywnych i webowych dla urządzeń mobilnych
- Funkcje Dreamweaver'a, które pomagają projektować Elastyczne witryny
- Wskazówki dotyczące projektowania na ekrany Retina i iOS
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs Elastyczne Strony WWW jest to pozycja obowiązkowa dla każdej osoby, która zajmuje się projektowaniem stron WWW i chce, aby jej witryny były dostępne również na urządzeniach mobilnych. Materiał został przygotowany z myślą zarówno o osobach które już posiadają swoje strony i chcą dostosować je do wymogów rynku, jak również dla tych którzy zaczynają tworzenie nowych stron WWW. Z kursu skorzystają zarówno początkujący jak i zaawansowani twórcy stron, jak również osoby które chcą zorientować się w mobilnym ekosystemie i kierunku projektowania witryn w przyszłości. Zalecana jest podstawowa wiedza z zakresu technologii internetowych oraz HTML. Polecamy przerobienie kursów HTML - Podstawy oraz HTML5 w Praktyce.
Dlaczego wybrać właśnie ten kurs?
- Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję z tworzonych projektów.
- Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i przygotować swoją responsywną witrynę.
- To jedyny i najbardziej obszerny kurs tego typu w sieci. Zebrane techniki wynikają z praktyki a same dodatki które stworzymy są omówione kompleksowo. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także skrótów, które oszczędzą Ci godziny pracy i poszukiwań.
