Responsywne strony i ich optymalizacja

Korzystanie ze stron internetowych wyłącznie na ekranie komputera to już przeszłość. W dzisiejszych czasach, smartfony są preferowanym wyborem na świecie, jeśli chodzi o korzystanie z Internetu. Dotyczy to ponad 52 % użytkowników. Responsywne strony internetowe projektowane w technologii Responsive Web Design dopasowują się do rozdzielczości ekranu tak, by użytkownik mógł korzystać z jej pełnej funkcjonalności. Kluczem do sukcesu Twojej strony www będzie między innymi takie zaprojektowanie serwisu, które uwzględni wszystkie niezbędne funkcjonalności oraz pozwoli na optymalne zaprezentowanie treści i wszelkich materiałów znajdujących się na niej na ekranach o różnych rozdzielczościach. Responsywny design (responsive web design) to takie zaprojektowanie serwisu www, które umożliwi poprawne wyświetlenie strony internetowej w zależności od rozdzielczości urządzenia. Projektując responsywny układ strony www możemy określić wiele czynników, pod wpływem których układ elementów HTML będzie otrzymywał nowe właściwości CSS.

HTML5

HTML5 jest najnowszym standardem z zakresu kodowania. Podobnie jak każda aktualizacja, miał na celu usprawnienie pracy web developerów i poprawy doświadczeń użytkowników. Bez względu na to czy jesteś początkującym czy doświadczonym już web developerem powinieneś mieć świadomość zmian, jakie pojawiły się w architekturze HTML wraz z jego wprowadzeniem. Nowe tagi, w tym tagi, które kładą nacisk i zwiększają możliwości mediów i animacji, zastosowanie tagów wideo i audio, to tylko kilka przykładów z tych, które zostaną omówione podczas szkolenia przez naszego trenera.

Projektowanie i tworzenie responsywnych stron WWW – praca z CSS

Uczestnicy szkolenia przyjrzą się strukturze typowej strony pod kątem dostępności i optymalizacji pod wyszukiwarki. Wielu dotychczasowych uczestników szkolenia odnotowało znaczną poprawę pozycji ich stron w rankingu Google po wdrożeniu zmian zaproponowanych w tej części kursu. Znaczna część szkolenia poświęcona jest na poszerzenie wiedzy z zakresu CSS. Omówimy liczne selektory oraz właściwości dostępne w CSS. Dodatkowo uczestnicy poznają zalety i wady używania wartości względnych (piksele, punkty etc.) oraz wartości absolutnych (procent, emów itd.). Model pudełkowy jest punktem wyjściowym do ciekawej dyskusji na temat implementacji standardów w różnych popularnych wyszukiwarkach. Poznasz różnice między elementami liniowymi i blokowymi. Co więcej, dowiesz się jak marginesy, paddingi i właściwości obramowania mogą wpłynąć na układ strony. Model pudełkowy daje Ci również możliwość dodawania obrazków tła do elementów. To może dać świetne efekty, zwłaszcza z zastosowaniem przezroczystości przy użyciu PNG lub właściwości CSS3. Większość projektów może być wykonana przy zastosowaniu właściwości float. Jednak bywa też, że lepszym rozwiązaniem okaże się pozycjonowanie absolutne i relatywne. Nasz wykładowca upewni się, że poznasz te sposoby rozmieszczania elementów na stronie. I co więcej będziesz potrafił stworzyć dokładnie taki układ strony, jaki jest w projekcie.

Media Queries – Zapytania o media

Media Queries są to zapytania umożliwiające przypisywanie elementom różnych stylów; reguły, które możemy zastosować pod pewnymi warunkami. Można to ująć w ten sposób: „Jeśli strona użytkownika ma rozdzielczość mniejszą niż określona wartość, wtedy zastosuj dane właściwości CSS”. Zyskujemy możliwość zmieniania wyglądu strony, zwiększenia rozmiaru tekstu, zmiany koloru tła, ustawienia menu w innym miejscu w zależności od rozdzielczości itd. Ale zapytania o media to nie tylko kwestia rozdzielczości. Możesz zmienić wygląd strony w oparciu o takie kryteria jak rodzaj ekranu, ilości kolorów czy orientacja. Podczas szkolenia nauczysz się jak korzystać z rozszerzonych możliwości Media Queries. Zapoznasz się z formami zapisu reguł odpowiedzialnych za określanie minimalnych i maksymalnych wielkości w zależności od rozdzielczości ekranu użytkownika. Dowiesz się jakie reguły zastosować, aby poznać faktyczną szerokość i wysokość strony, uwzględniającą już obecność różnych elementów takich jak toolbar, które w rzeczywistości ograniczają obszar widoczności. Nasz wykładowca pokaże Ci w oparciu o jakie elementy należy zbudować witrynę, tak aby wyświetlała się ona właściwie na urządzeniu bez względu na jego rozdzielczość.

Biblioteki JavaScript

JavaScript wprowadza interaktywność na stronę WWW. Biblioteki JavaScript zawierają wiele przydatnych funkcji, które wykonują ważne zadania, takie jak np. tworzenie pokazu slajdów. Szkolenie HTML i CSS w praktyce dla zaawansowanych – Responsywne strony i ich optymalizacja przybliży Ci świat bibliotek JS. Nauczysz się je instalować i korzystać z możliwości jakie one oferują. Będziesz pracować ze skryptem Lightbox wykorzystującym bibliotekę jQuery, aby stworzyć własną galerię zdjęć. JQuery Cycle pozwoli Ci zrobić pokaz slajdów, który niewątpliwie okaże się przydatny w niejednym projekcie, jaki będziesz realizować w przyszłości.

Framework Bootstrap

Podczas szkolenia nauczysz się tworzenia responsywnych stron internetowych przy użyciu jednego z najbardziej popularnych frameworków jakim jest Bootstrap. Poznasz grid system i dowiesz się jak tworzyć funkcjonalne layouty. Będziesz pracował ze stylami w celu stworzenia czytelnej nawigacji, tabelek, typografii, przycisków i formularzy. Ponadto, nasz trener przedstawi Ci zestaw wtyczek JQuery do tworzenia rozwijanego menu, tabs, modal boxes, tooltips i innych. Znajomość tych funkcji pozwoli Ci tworzyć projekty wyświetlające się prawidłowo na smartfonach, tabletach, laptopach czy komputerach stacjonarnych, rozwiązując wiele z częstych wyzwań przed jakimi staje współczesny web developer.

JQuery Mobile

Podczas szkolenia przyjrzymy się bliżej JQuery Mobile. Jest to framework, biblioteka Java Script, która została zaprojektowana, aby uprościć proces pisania kodu. Biblioteka ta pozwala na stosowanie skróconego kodu, który jest równie efektywny jak oryginalny, rozbudowany kod JavaScript. Strony są wyświetlane prawidłowo na smartfonach czy tabletach, czyli urządzeniach o różnych rozdzielczościach ekranu. Nie ma nawet konieczności nauki innego języka programowania. Macie możliwość napisania kompletnych aplikacji na iOS i Androida od zera używając jedynie języka JavaScript. Brzmi jak świetne rozwiązanie i faktycznie tak jest. Szkolenie HTML i CSS w praktyce dla zaawansowanychzapozna Cię z podstawami tworzenia aplikacji mobilnych przy użyciu frameworka jQuery Mobile. Nauczysz się podstawowej struktury strony, wstawiania typowych komponentów takich jak nagłówki, stopki, paski narzędzi, przyciski, listy czy układy wielokolumnowe.

Google Analytics oraz Google Search Console

Jako uczestnik szkolenia HTML i CSS w praktyce dla zaawansowanych – Responsywne strony i ich optymalizacja zapoznasz się z narzędziami Google Analytics oraz Google Search Console, które są źródłem cennych informacji. Będziesz miał możliwość m.in. identyfikacji stron, które słabo radzą sobie w wyszukiwarkach, określenia jak na Twoją stronę trafili użytkownicy, skąd pochodzą czy też jak długo pozostają na stronie. Raporty ecommerce pozwalają na analizę dokonywanych transakcji, przychodów i wielu innych danych. Google Search Console jest narzędziem, które pozwala na sprawdzenie statusu indeksowania strony i zoptymalizowanie widoczności strony dla wyszukiwarek. Ilość informacji dostarczana przez oba te narzędzia może wydawać się przytłaczająca. Podczas szkolenia dowiesz się jak wykorzystywać informacje gromadzone w statystykach strony WWW tak, aby Twoi klienci mogli odnieść wymierne korzyści i uzyskać przewagę nad konkurencją.