|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/kurs-elastyczne-strony-www/
课程评论：没有评论
**课程名称：** 响应式网页设计 - 从A到Z的综合指南 **课程概述：** 本课程是为网页设计师量身定制的，旨在深入讲解响应式网页设计（Responsive Web Design, RWD）。随着移动设备成为访问互联网的主要方式，掌握RWD已成为网页设计师的必备技能。本课程将引导您学习如何利用HTML5和CSS3等最新标准，创建能够在手机、平板电脑等各类设备上良好显示的网页。RWD不仅是一种新兴技术，更是当前和未来的市场需求。本课程将帮助您领先一步，掌握现代网站设计的核心技术。 **课程内容亮点：** * **移动生态系统与多分辨率设计入门：** 了解移动设备的工作原理，学习如何为不同屏幕分辨率设计网站。 * **实践项目：** 从概念构思、图形设计到HTML5和CSS3编码，全程实践一个响应式网站项目。 * **工具与测试技巧：** 掌握测试响应式网站的各种工具和实用技巧。 * **免费资源宝库：** 提供一系列免费工具，助您更高效地工作。 * **框架介绍：** 深入探讨PhoneGap和jQuery Mobile等流行框架。 * **原生应用与Web应用的对比：** 比较原生应用和Web应用的优劣，并学习如何将HTML5网站打包成原生应用。 **课程细则：** * **多平台设计：** 移动设备上的网页访问量已超过桌面电脑，本课程将教授您如何将现有网站适配到响应式设计，以及如何从零开始创建多分辨率兼容的新网站。 * **移动生态系统解析：** 学习移动浏览器的工作方式，理解DPI、Ratio、Density等专业术语，并学会如何在实际设计中应用这些知识。 * **响应式布局设计：** 在Photoshop中设计响应式布局，学习创建桌面、手机和平板电脑的多种布局变体，并掌握Photoshop在其中发挥的关键作用。 * **CSS3 Media Queries及其他技术：** 利用CSS3 Media Queries、HTML5和JavaScript等技术，编码实现响应式布局，优化文本、容器和图像的显示效果，确保在任何分辨率下都能提供流畅的用户体验。 * **弹性网站测试：** 学习如何使用浏览器内置工具、模拟器甚至真实设备来全面测试您的响应式网站。熟悉Adobe Dreamweaver中辅助测试的工具。 * **原生应用与框架：** 了解jQuery Mobile、Sencha Touch、PhoneGap等框架，学习它们如何支持手机和平板电脑的各种功能（如地理位置、陀螺仪等）。对比原生应用与Web应用的优缺点，以及如何将HTML5项目转换为App Store或Google Play上的原生应用。 * **弹性技术应用：** 学习图像和标题的缩放技巧，为Retina显示器创建高品质图形，利用CSS3创建可伸缩的图形元素、SVG图形，并应用Dreamweaver中的Fluid Grid等工具。 * **丰富资源：** 课程提供大量免费工具、生成器、精选文章链接以及设计资源（如图标、UI元素），助您持续学习和发展。 **适合人群：** 本课程适合所有网页设计师，特别是希望网站能够适应移动设备访问的专业人士。无论您是想更新现有网站，还是从头开始创建新网站，本课程都能提供有价值的指导。课程内容对初学者和进阶者都适用，也适合希望了解移动生态系统和未来网页设计趋势的学习者。 **先修知识：** 建议具备基础的网页技术知识，以及HTML和CSS基础。建议先完成“HTML和CSS基础”以及“HTML5实战”等课程。
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ścistworzymy praktyczny projekt witryny, od koncepcji, przez projekt grafiki i kodowanie w HTML5 i CSS3poznasz szereg narzędzi i porad dotyczących testowania responsywnych witrynotrzymasz zbiór darmowych narzędzi, które ułatwią pracęomówimy frameworki takie jak PhoneGap czy jQuery Mobileporównamy aplikacje natywne i webowe dla urządzeń mobilnychPROJEKTOWANIE NA WIELE OBECNOŚCIObecnie 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 mobilnychpoznasz techniki, które pozwolą dostosować istniejące projekty do wymogów Responsive Web Designstworzysz od podstaw nowe strony zgodne z wieloma rozdzielczościamiMOBILNY EKOSYSTEMW kursie stworzymy kompletny projekt responsywnej witryny. porozmawiamy o ważnych terminach i pracy koncepcyjnejdowiesz 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ściPROJEKTOWANIE 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 tabletpoznasz szereg praktycznych wskazówek dotyczących projektowania dowiesz się, które z narzędzi Photoshopa są szczególnie przydatne w tym procesieCSS3 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 tabletachdowiesz się jak optymalnie i szybko przetestować strony na fizycznych urządzeniachpoznasz najciekawsze narzędzia programu Adobe Dreamweaver, które wspomagają pracę i testowanie mobilnej stronyNATYWNE 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 Gapdowiesz się jak umożliwiają one wsparcie dla rozmaitych funkcji telefonu czy tabletu, jak geolokalizacja, żyroskop czy akcelerometrwyjaśnimy, czym są natywne aplikacje i jakie są ich zalety i wady w porównaniu do stron WWWdowiesz się też, jak możesz gotową stronę przygotowaną w HTML5 skompilować do natywnej aplikacji, którą użytkownicy ściągną z AppStore czy Google PlayELASTYCZNE TECHNIKIW 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.
