Responsywne strony WWW – kompendium projektowania od A do Z

Responsive Design to zagadnienie, które powinno obowiązkowo znaleźć się w słowniku każdego web designera – a popularność tematu z roku na rok rośnie.

Jeżeli chcesz, by Twoje umiejętności projektowania stron były aktualne – na pewno musisz zapoznać się z tym zagadnieniem.

Responsive design to technika, która polega na wykorzystaniu najnowszych standardów jak HTML5 i CSS3 do tworzenia stron WWW, które dobrze prezentują się na popularnych urządzeniach mobilnych, takich jak tablety i telefony.

Nie jest to już tylko nowinka, ale aktualny wymóg i – jeszcze! – nisza na rynku.

Z naszym kursem dowiesz się wszystkiego o projektowaniu nowoczesnych witryn i będziesz mógł być o krok przed innymi!

CO JEST ZAWARTE W KURSIE?

• wprowadzenie do mobilnego ekosystemu i projektowania na wiele rozdzielczości

• stworzymy praktyczny projekt witryny, od koncepcji, przez projekt grafiki i kodowanie w HTML5 i CSS3

• poznasz szereg narzędzi i porad dotyczących testowania responsywnych witryn

• otrzymasz zbiór darmowych narzędzi, które ułatwią pracę

• omówimy frameworki takie jak PhoneGap czy jQuery Mobile

• porównamy aplikacje natywne i webowe dla urządzeń mobilnych

PROJEKTOWANIE NA WIELE OBECNOŚCI

Obecnie więcej stron internetowych jest otwieranych na urządzeniach mobilnych, niż na komputerach stacjonarnych – mimo, że parę lat temu było to nie do pomyślenia.

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.

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.

W kursie:

• wprowadzimy Cię w świat nowoczesnych technologii mobilnych

• poznasz techniki, które pozwolą dostosować istniejące projekty do wymogów Responsive Web Design

• stworzysz od podstaw nowe strony zgodne z wieloma rozdzielczościami

MOBILNY EKOSYSTEM

W kursie stworzymy kompletny projekt responsywnej witryny.

• porozmawiamy o ważnych terminach i pracy koncepcyjnej

• dowiesz się jak działają mobilne przeglądarki

• przekonasz się, które z rozdzielczości powinniśmy obsłużyć

• rozszyfrujemy wiele skrótów jak DPI, Ratio, Density

• 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.

• krok po kroku dowiesz się jak wybrać optymalne ustawienia programu i stworzyć kilka układów

• zaczniemy od rozdzielczości desktopowej, następnie stworzymy warianty na telefon i tablet

• poznasz szereg praktycznych wskazówek dotyczących projektowania

• dowiesz się, które z narzędzi Photoshopa są szczególnie przydatne w tym procesie

CSS3 MEDIA QUERIES I INNE TECHNIKI 

W następnej części kursu 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 szereg technik, które pozwolą stworzyć elastyczny layout.

Zastosujemy kombinacje wszystkich tych technik po to, aby użytkownicy mogli wygodnie przeglądać stronę na każdej rozdzielczości.

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ć.

• poznasz szereg narzędzi, dzięki którym będziesz mógł bezpośrednio w przeglądarce, lub z pomocą emulatorów, podejrzeć jak strona wygląda na telefonach i tabletach

• dowiesz się jak optymalnie i szybko przetestować strony na fizycznych urządzeniach

• poznasz najciekawsze narzędzia programu Adobe Dreamweaver, które wspomagają pracę i testowanie mobilnej strony

NATYWNE APLIKACJE I FRAMEWORKI

Kolejny fragment kursu został poświęcony frameworkom.

• omówimy zarówno proste szablony i tzw. boilerplates, jak również bardziej zaawansowane frameworki – jQuery Mobile, Sencha Touch czy Phone Gap

• dowiesz się jak umożliwiają one wsparcie dla rozmaitych funkcji telefonu czy tabletu, jak geolokalizacja, żyroskop czy akcelerometr

• wyjaśnimy, czym są natywne aplikacje i jakie są ich zalety i wady w porównaniu do stron WWW

• 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

ELASTYCZNE TECHNIKI

W kursie poznasz mnóstwo dodatkowych, 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 dowiesz się 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.

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 i CSS od Podstaw oraz HTML5 w Praktyce.