适应性网站的几种简单构建方式和简单模式

模式 1 Column Drop

可以理解为单栏,双栏,三栏式布局。详细方法类似下面的那样。

模式 2. Fluid Layout

使用display: flex 结合 flex-wrap: wrap 可以搭建极其简单的一个适应性网页的框架,再结合media query根据不同屏幕大小设置不同的宽度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.container {
display: flex;
flex-wrap: wrap;
margin: auto;
}

.box {
width: 100%;
}
.green, .light_blue { width: 50%; }

@media screen and (max-width: 400px) {
.dark_blue {
color: blue;
}

}
@media screen and (min-width: 550px) {
.red {
width: 33.33%;
}
.orange {
width: 66.66%;
}
}
@media screen and (min-width: 800px) {
.container{
width: 700px;
}
}

模式 3 Shifter

有些部分在宽屏的时候会优先放置在重点位置,而窄屏时则不需要那么重要,这便是Shifter Layout。这种构建方法的精妙之处是使用order。 在宽屏时调整最后一个元素的order为-1将其排列顺序排列在前方。
同样这样可以使用display: flex 结合 flex-wrap: wrap 构建适应性的元素。

1
2
3
4
5
6
7
<div>
<div id="boxA">A</div>
<div class='container2'>
<div id="boxB">B</div>
<div id="boxC">C</div>
</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.container {
display: flex;
flex-wrap: wrap;
margin: auto;
}

.box {
width: 100%;
}
.green, .light_blue { width: 50%; }

@media screen and (max-width: 400px) {
#boxA {
order: 1;
}
}
@media screen and (min-width: 550px) {
#boxB {
order: -1;
}
#boxA {
order: 2;
}
}
@media screen and (min-width: 800px) {
.container{
width: 700px;
}
}

模式 4 Off Canvas

放置一些不常用的元素进入Off Canvas,例如手机的菜单,隐藏防止,而电脑端则展示出来。

Start Small, 网页尺寸详解

在适应屏幕尺寸过程中,设置viewpoint是重要的一个步骤。

屏幕分辨率和浏览器真正表示的分辨率并不是相同的,有些时候,在分辨率很高的手机屏幕上,不可能使用真实分辨率来呈现网页内容。

区分

Device Independent Pixels

not equal hardware pixels

Font boosting to show the signifacant text.

device pixel ratio DPR

安全起见

1
2
3
img, embed, object, video {
max-width: 100%;
}

在Air Canada上研究飞机轨迹数据

起始

坐得腰酸背痛的时候,尝试一下连飞机wifi发现了AirCanada是收费wifi。好吧这是之前就知道的。但也发现了一个该网站的小功能,显示飞机目前飞行的时间,以及显示剩余的时间,(如下图)但出于直觉认为,该显示的后台实现过程肯定不只是传了飞机的已飞行时间和未飞行时间还有起飞降落的机场信息。所以打开开发者功能一探究竟。
AirCanada的机载wifi的网页
果不其然,该功能最后加载完成,地址如下:

1
http://fig.gogoinflight.com/v1/flights?registration-number=CFIUV&status=current&detail=true

数据为json格式,包括aircraft,arrival,departure,flight等属性,数据内容很详细,而且最为关键的还有飞机飞行的经纬度。一手数据帖在下面。等回去处理下格式,解析一下。

1
[{"flight":{"id":19691735,"key_time":"2018-04-15T18:15:00Z","flight_state":"IN_AIR","flight_number":"25","flight_identifier":"ACA25","oooi":{"out":"2018-04-15T18:33:23Z","off":"2018-04-15T18:51:02Z","attributes":{}},"gps":{"time":"2018-04-15T23:31:01Z","latitude":63.46373,"longitude":176.81715,"speed":541,"course":254,"flight_level":340,"calculations":{"bearing_from_departure":317.04553980532165,"distance_from_departure":2077.151572311619,"bearing_to_arrival":253.47735649208175,"distance_to_arrival":2822.0665857747545,"direct_course_distance":4868.183991421205,"attributes":{}},"estimated":{"time":"2018-04-15T23:33:02.558Z","latitude":63.378374978630745,"longitude":176.16444054428382,"speed":541,"calculations":{"bearing_from_departure":316.9406812511086,"distance_from_departure":2095.063127894187,"bearing_to_arrival":252.8910167443876,"distance_to_arrival":2803.7999195635,"direct_course_distance":4868.183991421205,"attributes":{}},"attributes":{}},"attributes":{}},"time_above_service_level":{"first_known":"2018-04-15T18:51:02Z","last_known":"2018-04-15T22:57:28Z","attributes":{}},"attributes":{}},"aircraft":{"id":7030,"registration_number":"CFIUV","airline_icao":{"owner":"ACA","partner":"ACA","attributes":{}},"fleet_number":"736","aircraft_type":"B777-333ER","seat_count":400,"airlines":[{"id":2476,"name":"Air Canada","icao":"ACA","iata":"AC","call_sign":"AIR CANADA","incorporated_country":"CA","incorporated_country_name":"Canada","currency":"CAD","locale":"en-US","attributes":{}}],"connections":[{"id":11558,"aircraft_id":7030,"connectivity_type":"2KU","connectivity_type_last_changed":"0000-12-30T00:00:00Z","attributes":{}}],"attributes":{"firehose_sync":"true","video_capability":"GGV","firehose_sync_lock":"false","mode_s_code":"C0173E","gogo_business":"CA","official_registration":"C-FIUV","transaction_routing_id":"C1","status":"Active"}},"departure":{"airport":{"id":16194,"icao":"CYVR","iata":"YVR","name":"Vancouver Intl","mailing_address":{"municipality":"Vancouver","administrative_area":"BC","administrative_area_name":"British Columbia","country":"CA","country_name":"Canada","postal_code":"V7B 0A4","attributes":{}},"location":{"latitude":49.193889,"longitude":-123.184444,"elevation":14.0,"attributes":{}},"time_zone_offset":-7.0,"attributes":{"product_region":"DOM","marketing_municipality":"Vancouver","billing_municipality":"Richmond"}},"time":{"actual":"2018-04-15T18:51:02Z","estimated":"2018-04-15T18:49:00Z","scheduled":"2018-04-15T18:15:00Z","computed":"2018-04-15T18:51:02Z","attributes":{}},"attributes":{}},"arrival":{"airport":{"id":18391,"icao":"ZSPD","iata":"PVG","name":"Pudong","mailing_address":{"municipality":"Shanghai","administrative_area":"SG","administrative_area_name":"Shanghai","country":"CN","country_name":"China","attributes":{}},"location":{"latitude":31.143378,"longitude":121.805214,"elevation":13.0,"attributes":{}},"time_zone_offset":8.0,"attributes":{"product_region":"INT","marketing_municipality":"Shanghai","billing_municipality":"Shanghai","geolocation_update_time":"1521643956277"}},"time":{"estimated":"2018-04-16T08:08:16Z","scheduled":"2018-04-16T07:34:16Z","computed":"2018-04-16T08:08:16Z","attributes":{}},"attributes":{}}}]

  • 服务器地址10.246.118.179:80,
  • 网页地址10.241.151.31:80,
    好的看来好像是局域网,这个还有待考证。
    除此之外,在链接过程中,也依然有不断在更新状态来检测你是否还有足够的上网时间,资本主义时时刻刻都在做马化腾爸爸提醒你该充钱了。该反馈地址如下:
    1
    http://airborne.gogoinflight.com/abp/ws/absServices/statusTray?

同样贴出一段时间的数据:

1
2
3
4
5
{"Response":{"status":200,"flightInfo":{"logo":null,"airlineName":null,"airlineCode":"ACA","airlineCodeIata":null,"tailNumber":"CFIUV","flightNumberInfo":"ACA25","flightNumberAlpha":null,"flightNumberNumeric":null,"departureAirportCode":"CYVR","destinationAirportCode":"ZSPD","departureAirportCodeIata":"YVR","destinationAirportCodeIata":"PVG","departureAirportLatitude":49.18,"destinationAirportLatitude":31.14,"departureAirportLongitude":-123.18,"destinationAirportLongitude":121.79,"origin":null,"destination":null,"departureCity":null,"destinationCity":null,"expectedArrival":"2018-04-16T08:08:16.000Z","abpVersion":"7.0.7b6","acpuVersion":"10.7.1","videoService":false,"latitude":64.0709,"longitude":165.9763,"altitude":32861.97,"localTime":null,"utcTime":"2018-04-15T23:59:11.388Z","hspeed":571.4565,"vspeed":0.18181819},"gogoFacts":"Aircell (Gogo's parent company) holds 15 patents on their innovations in airborne telecommunications.","serviceInfo":{"service":"Inactive","remaining":0,"quality":null,"alerts":[]}}}

{"Response":{"status":200,"flightInfo":{"logo":null,"airlineName":null,"airlineCode":"ACA","airlineCodeIata":null,"tailNumber":"CFIUV","flightNumberInfo":"ACA25","flightNumberAlpha":null,"flightNumberNumeric":null,"departureAirportCode":"CYVR","destinationAirportCode":"ZSPD","departureAirportCodeIata":"YVR","destinationAirportCodeIata":"PVG","departureAirportLatitude":49.18,"destinationAirportLatitude":31.14,"departureAirportLongitude":-123.18,"destinationAirportLongitude":121.79,"origin":null,"destination":null,"departureCity":null,"destinationCity":null,"expectedArrival":"2018-04-16T08:08:16.000Z","abpVersion":"7.0.7b6","acpuVersion":"10.7.1","videoService":false,"latitude":64.1598,"longitude":166.5751,"altitude":32867.793,"localTime":null,"utcTime":"2018-04-15T23:57:11.227Z","hspeed":575.34,"vspeed":-0.72727275},"gogoFacts":"Denison, TX, where Aircell began, is also the birthplace of Dwight D. Eisenhower, the 34th President of the United States.","serviceInfo":{"service":"Inactive","remaining":0,"quality":null,"alerts":[]}}}

{"Response":{"status":200,"flightInfo":{"logo":null,"airlineName":null,"airlineCode":"ACA","airlineCodeIata":null,"tailNumber":"CFIUV","flightNumberInfo":"ACA25","flightNumberAlpha":null,"flightNumberNumeric":null,"departureAirportCode":"CYVR","destinationAirportCode":"ZSPD","departureAirportCodeIata":"YVR","destinationAirportCodeIata":"PVG","departureAirportLatitude":49.18,"destinationAirportLatitude":31.14,"departureAirportLongitude":-123.18,"destinationAirportLongitude":121.79,"origin":null,"destination":null,"departureCity":null,"destinationCity":null,"expectedArrival":"2018-04-16T08:08:16.000Z","abpVersion":"7.0.7b6","acpuVersion":"10.7.1","videoService":false,"latitude":64.738,"longitude":174.2186,"altitude":33854.832,"localTime":null,"utcTime":"2018-04-15T23:32:59.299Z","hspeed":590.0112,"vspeed":-0.54545456},"gogoFacts":"Denison, TX, where Aircell began, is also the birthplace of Dwight D. Eisenhower, the 34th President of the United States.","serviceInfo":{"service":"Inactive","remaining":0,"quality":null,"alerts":[]}}}

可以看出,该回馈信息每隔一段时间进行请求,得到飞行经纬度、海拔高度、速度,还有随机更新的gogoFacts,既然如此,那不如写段脚本把这些数据收集下来,看看有没有其他好玩的东西。
下面是在变化的数据内容,所以每次访问的时候只用保存该字段就行,然后保存为csv字段方便后续处理。

  • “latitude”:64.738
  • “longitude”:174.2186
  • “altitude”:33854.832
  • “localTime”:null,
  • “utcTime”:”2018-04-15T23:32:59.299Z”
  • “hspeed”:590.0112,”vspeed”:-0.54545456}
  • “gogoFacts”:”Denison, TX, where Aircell began, is also the birthplace of Dwight D. Eisenhower, the 34th President of the United States.”
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    import requests
    import os
    import time
    import json

    def query():
    url = "http://airborne.gogoinflight.com/abp/ws/absServices/statusTray?"
    res = requests.get(url)
    if res.status_code == 200:
    data = json.loads(res.content)
    else:
    data = None
    lat = data["Response"]["flightInfo"]["latitude"]
    lon = data["Response"]["flightInfo"]["longitude"]
    altitude = data["Response"]["flightInfo"]["altitude"]
    utcTime = data["Response"]["flightInfo"]["utcTime"]
    hspeed = data["Response"]["flightInfo"]["hspeed"]
    vspeed = data["Response"]["flightInfo"]["vspeed"]
    out_text = str(utcTime)+ "," + str(lat) + "," + str(lon) + "," + str(altitude) + "," + str(hspeed) + "," + str(vspeed)
    saveText(out_text)
    print(out_text)

以上为爬取的函数。

数据处理分析结果。

未完待续

HEXO Filter Create Flowchart

This file is to test the flowchart plugin in hexo from github of bubkoo.

Config

site’s _config.yml:

1
2
3
4
flowchart:
# raphael: # optional, the source url of raphael.js
# flowchart: # optional, the source url of flowchart.js
options: # options used for `drawSVG`

Draw

st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

Flowchart is following.