1 of 29

前端流程解析

與響應式網頁設計基礎

Frontend Development Workflow and Responsive Web Design Fundamentals - Tutorial by Ying-Ray Lu

2 of 29

講者

Ying-Ray Lu

Full Stack Software Engineer － Mattel, Inc.

Developed and implemented web client using ES7, React, Redux, LESS, Webpack.
Wrote unit tests, e2e tests, api tests using Mocha, Jest for Behavior Driven Development.
Created a RESTful API endpoints using Node and Express, Java Servlet.
Deployed services using Docker, Ansible, SSH.
Implemented account system, social web application.
Added databases using MySQL, MS SQL, MongoDB.

Github: https://github.com/yingray | LinkedIn: https://tw.linkedin.com/in/yingraylu

3 of 29

大綱

主題簡介
前端流程解析
什麼是響應式網頁設計(RWD)?
網頁應用vs原生應用
前端專用編譯器
回顧一下基礎的layout
RWD三大核心：Media query, Flexible grid, View port
Programming Challenge
Bootstrap

4 of 29

前端工程師 Front-end Engineer (F2E)

什麼是前端？

我們這整堂培訓課程，跟前端有關嗎？

5 of 29

什麼是響應式網頁設計(RWD)?

來看看近代科技設計主流品牌：蘋果的官方網站

Apple - Website

6 of 29

原生應用

網頁應用

硬體完整結合
效能佳
使用者體驗較優
良好金流
網路差或離線仍有良好操作

成本預算低
搜尋引擎最佳化
減少不必要的審核流程
更新頻繁
跨平台

7 of 29

Web app 吸引到更多的用戶

8 of 29

Native app 平均使用時間大勝

9 of 29

前端專用編譯器

Sublime Text

Atom

Visual Studio Code

WebStorm / PhpStorm (JetBrains)

10 of 29

Sublime Text - Installation

Download installer: https://www.sublimetext.com
Install Package Control: https://packagecontrol.io/installation
Install plugins:

Emmet
Html-css-jss prettify

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

11 of 29

回顧一下基礎的layout

12 of 29

CSS Layout

display

block
inline
inline-block
flex
inline-flex
grid

margin: 0 auto
max-width, min-width
box-sizing: border-box

position

static
relative
fixed
absolute

float

left
right

clear

left
right

13 of 29

RWD三大核心 - Media Query

@media screen and (max-width: 768px)

media type media feature

14 of 29

RWD三大核心 - Media Query

width: 0 - 768px

width: 769px up

15 of 29

RWD三大核心 - Flexible Grid

WEB

TABLET

MOBILE

16 of 29

RWD三大核心 - Flexible Grid

4. 使用CSS framework

float: right;

display: inline-block;

display: flex/grid;

過去習慣上使用的方法

直覺、方便快速

較新、排版神技

17 of 29

RWD三大核心 - View port

width
initial-scale
minimum-scale
maximum-scale
user-scalable

18 of 29

Programming Challenge

19 of 29

| Bootstrap |

包含具現代感設計UI、行動裝置友善之響應設計、最熱門的WEB框架

20 of 29

等等，我們職訓不是後端的課嗎？

前端的框架對我們來說重要嗎？

Bootstrap其實更適合後端開發者：

提供符合現代設計的UI
良好的響應格線系統
適當的媒體適應性
簡易且堪用的互動、動畫

21 of 29

還記得重要的RWD三大核心嗎？

22 of 29

Bootstrap - Grid system

http://getbootstrap.com/css/#grid

進入官方網站，暸解Bootstrap的格線系統

23 of 29

Flexible grid - Bootstrap實作

24 of 29

New Semantic Elements in HTML5

Reference:

25 of 29

Wireframe and Flow Chart

How to create a user experience flow chart (UX Flow Chart): https://www.startuprocket.com/articles/how-to-create-a-user-experience-flow-chart-ux-flow-chart

26 of 29

Wireframe - Bootstrap實作

綜合 Flexible grid 和語意化標籤來實作一個簡易的RWD頁面。

28 of 29