網站建置流程

Anna Su

Anna Su

AGENDA part 2

•

•

•

AGENDA part 2

...

PM

PM

Flow Wireframe Mockup Prototype

Guideline

Flow

就像是⼀張地圖，必須清楚說明路徑，讓之後的⼈可以找到要⾛的道路。

Wireframe

1.

2.

3.

Mockup

mockup

mockup

prototype

Mockup Prototype

Prototype

Designer

Designer

Guideline

...

Guideline

...

Guideline

Flow Wireframe Mockup Prototype

Flow Wireframe Mockup Prototype

Guideline

PM Designer

Back End

Back End

API

Front End

Front End

API

- @webconf

AGENDA part 2

Sublime Text 3

Sublime Text

Sublime Text 3

1. Sublime Text 3

2. Package Control

3. /

HTMLHyperText Markup Language

index.html

HTML Tag

HTML Parser

HTML

CSS

CSSCSSCascading Style Sheets

CSS Parser

index.html- CSS

index.html- CSS

Javascript

Javascript

1. HTML

2. JavaScript

<script> JavaScript </script>

<script src=" .js"></script>

index.html- Javascript

Help to show content in browsers

Help to style the content Help to interact with content

API

Is Your Web Browser Fighting (for) You?

Why You Must Test Browser Compatibility

Foundation Bootstrap Pure960 grid system

Ember.jsAngular.js

Backbone.jsReact.js

Web Performance

Browser Development Tools

Building and Automation Tool

Front End

API

AGENDA part 2

Bootstrap

Sublime Text

Emmet (Zen Coding)

TAB

div>(header>ul>li*2>a)+footer>p

Emmet (Zen Coding)

Emmet (Zen Coding)

p*2>lorem

AutoFileName

Sublime Text plugin that autocompletes filenames

Color Highlighter

ColorPicker

Linux: ctrl+shift+cWindows: ctrl+shift+cOS X: cmd+shift+c

A multi-platform color picker plugin

Q: Anna

但

妳會變得更強！！

https://goo.gl/LefQYj