Responsive Webdesign Diákműhely

Átírás

1 Responsive Webdesign Diákműhely A diákműhely célja, hogy a résztvevők elkészítsék saját responsive (vagy mobile-only) weboldaluk frontendjét mobil alkalmazás frontendjét responsive (vagy mobile-only) weboldal vagy mobil alkalmazás vizuális terveit Ehhez elméleti inputot kapnak, és óráról órára megbeszélgetjük ötleteiket / koncepciójukat / vizuális terveiket / ill. ameddig a kivitelezésben eljutnak. Tehát az első hetekben otthon érlelik projektjüket, és elméletet hallgatnak órán, ami hétről-hétre 1-1 feladatot implikál (ötlet / elképzelés / koncepció / firka). Ezt követően összerakunk egy egyszerűbb layoutot képszerkesztő szoftverben, majd WYSIWYG-szerkesztővel lekódoljuk (amennyire marad idő). Egyidejűleg házi feladataik is konkretizálódnak (PSD-layout / frontend-kód). Bemeneti feltételek az a hallgatói szándék, hogy a részvétel gyakorlati munkát teremjen HTML-CSS-tudás nem kötelező (jó vizuális tervekhez) a Photoshop-előismeretek nem haszontalanok a webtechnológiai alapismeretek elengedhetetlenek A projektek későbbi fejlesztéséhez a tanár ben tud segítséget nyújtani.

2

3 Elmélet: Interaktív design 1. Interaktív design Az interaktív design alapelvei Felhasználóvezetés Designminták Keresés és szűrés Mozgás Kogníció Viselkedés-tervezés Feedback Mérföldkövek 2. Koncepcionálás Ki vagy és mid van? Kinek kell? De mi kell neki igazán? Hogy lehet neki eladni? Tartalmi strukturálás és designelvek 3. Layouting Szerkesztési elvek Kontrasztok Ritmus Struktúra Elrendezés Aranymetszés Hagyományos szerkezetek Az oszlopszám, a betű- és a kijelzőméret összefüggései Weblapok részei: tartalom és periférikus elemek Navigációk

4 Elmélet: Responsive koncepció 1. Általános Definíció Előnyei Új eszközök A jövő: még kisebb és még nagyobb eszközök 2. Technika Méret, felbontás, pontsűrűség Megoldások o Mobilverzió átirányítással o Mobilalkalmazás o RWD o Adaptív design o RESS Media queries Hagyományos layoutok: fixed / elastic, liquid (fluid), hybrid Új layout elvek o Mostly fluid o Column drop o Layout shifter o Tiny tweaks o Off canvas o Tiles (csempék) o Egészkijelzős lapok viewport heighttal o Tiles (csempék) viewport width-tel Content coreography o Table caption o Flexbox Új navigációs elvek o Do-nothing o Footer-only o Hide & cry o Footer anchor o Select menu

5 o Toggle o Flyout (Off canvas) o Tabs Tipográfia o Szövegtulajdonságok o Új mértékegységek o Fejezetcím-effektek o Automatikus szövegoszlopok Grafikák o Fluid images o Háttérképek o Feltételes letöltés o Image maps o Source set o SVG o CSS-Sprites o Nagyfelbontású ikonok, UTF-8 ikonok, webfont ikonok Média o Carousel o Videók o Táblázatok o Űrlapok Keretrendszerek o Rácsok o Atomic o Összetettek o A Dreamweaver új lehetőségei 3. Performance tuning Frontend o http-lekérdezések o Caching o CDNs o JavaScript helyett CSS o Tömörítés (minifying) o Sorrend o Képtömörítés

6 Backend o Szerverteljesítmény o Tömörítés o Apache szerver o Expires-headers o DNS-lekérések redukálása o Entity tagek konfigurálása o Átirányítások kerülése 4. Responsive workflow Az interaktív rendszerekről: lehetetlen specifikáció Klasszikus workflow Progressive enhancement vs. graceful degradation Desktop first vs. mobile first (Luke Wroblewski 2009) Vízió definiálása Célcsoport definiálása Breakpoints (eszközök definiálása Klasszikus webdesign vs. responsive webdesign workflow 7-lépcsős modell: 1. Content strategy 2. Content wireframe (wireframing tools) 3. Content creation 4. Style tiles, atomic design (Josh Duck és Brad Frost) 5. Linear design 6. Prototyping 7. Device testing 5. Elmélet: Tárgyalás & szerződés Mit adjunk / mit NE adjunk el? Ügyfelek jellemző mondatai Agilis szerződés, mire figyeljünk? Böngésző és mobileszköz tesztek Change management: Mit kell megfontolnia az ügyvezetőnek / designernek / ügyfélnek / értékesítésnek?

7 Az elméleti input után gyakorlatként összeállítunk egy Photoshopos layoutot, és megírjuk a frontend (HTML-CSS) kódját Dreamweaverrel (legalább elkezdjük). Gyakorlat Photoshop Dokumentum Rétegek Vektoreszközök Effektek Képek és maszkok Szövegek Dreamweaver Dokumentum- és site-kezelés Elemek beillesztése CSS-szerkesztés Adaptív (responsive) webdesign Mediaqueries Multiscreen előnézet Rugalmas layout-rács: Fluid Grid Layout JavaScriptes keretrendszer mobiloldalakhoz: jquery Mobile Exportálás mobil alkalmazásként: PhoneGap Weboldal-tesztelés