Jekyll2019-06-21T00:59:56+00:00https://wordlesssoda.github.io/atom.xml个人网络学习记录与实践2019-03-28T00:00:00+00:002019-03-28T00:00:00+00:00https://wordlesssoda.github.io/article/Sum_work<nav class="toc"> </nav> <hr /> <h3 id="作品-阶段性汇总">作品 阶段性汇总</h3> <ul> <li> <p>基于<a href="https://jekyllrb.com/">Jekyll</a> + <a href="https://mmistakes.github.io/skinny-bones-jekyll/">Skinny Bones</a> 完成的 <strong><a href="https://wordlesssoda.github.io/">个人网页博客</a></strong></p> </li> <li>运用<a href="https://www.tableau.com/zh-cn">Tableau</a>完成的 <a href="https://wordlesssoda.github.io/infovis/">信息可视化作品集</a> <ul> <li>基于国家数据网数据制作的城镇居民消费数据分析报告 <strong><a href="https://wordlesssoda.github.io/infovis/term_project.html">小组合作的信息可视化作品</a></strong>，其中个人负责Data3部分</li> <li>基于高德地图数据制作的对中国四大家电销售商在市场分布情况分析 <strong><a href="https://wordlesssoda.github.io/infovis/final_work/">个人信息可视化作品</a></strong></li> </ul> </li> <li>基于运用 AI与 API 的需求所编写的 菜谱小程序产品文档 以及 运用 <a href="https://www.axure.com/">Axure</a> 设计的产品原型 <ul> <li><strong><a href="https://github.com/WordlessSoda/API_ML_AI">菜谱小程序产品文档</a></strong></li> <li><strong><a href="https://wordlesssoda.github.io/API_ML_AI_Prototype/">菜谱小程序产品原型</a></strong></li> </ul> </li> <li>小组合作完成 <strong>Polaris</strong> APP的前端与后端产品文档和原型 <ul> <li><strong><a href="https://gitee.com/Ye-Wen-Min/APP_CMS/wikis">项目Gitee Wiki</a></strong></li> <li><strong><a href="https://github.com/Ye-Wen-Min/APP_CMS/blob/master/README.md">项目MRD</a></strong>，即项目市场需求文档</li> <li><strong><a href="http://sylviatang.gitee.io/app_team/">前端PRD</a></strong>，即项目前端产品文档含产品原型</li> <li><strong><a href="https://ye-wen-min.github.io/APP_CMS/">后端PRD</a></strong>，即项目后端产品文档含产品原型 <ul> <li>其中个人负责部分： <ul> <li>负责前端的“丢星星”模块，包括原型设计、动态交互效果与逻辑说明，并应用全局变量实现输入文本动态变更。</li> <li>负责前端的“消息”模块，包括原型设计、动态交互效果与逻辑说明。</li> <li>完善前端的“星站”模块的逻辑说明，并制作其中头部轮播图，并协助完成其中“星铺”的中继器部分。</li> </ul> </li> </ul> </li> </ul> </li> </ul> <hr /> <h4 id="附">附：</h4> <blockquote> <ul> <li><a href="https://github.com/WordlessSoda?tab=repositories">个人Github仓库</a></li> </ul> </blockquote>

2018-10-06T00:00:00+00:002018-10-06T00:00:00+00:00https://wordlesssoda.github.io/article/SPL_GAP<nav class="toc"> </nav> <hr /> <h3 id="spl">SPL</h3> <p>  可穿戴设备是指延续性地穿戴在个人用户身体上，并且具有数据收集、处理、交互的等能力的便携式电子设备。近年来随着物联网技术的发展与应用，可穿戴设备依托着物联网，在通信、运动、娱乐和医疗健康的等领域均有有所发展。越来越多的科技公司如谷歌、苹果、华为等在可穿戴设备消费市场中研发与设计新的产品功能，而在人机交互界面设计上仍然存在不少问题。现有研究也是在已有的图形操作界面基础上，提出多感官人机交互界面的视觉设计原则，在“以人为本”的前提下实现理想的人机交互</p> <h3 id="gap">GAP</h3> <p>  然而目前并没有针对平静技术设计原则指导可穿戴设备的用户交互界面设计的研究，遵循平静技术设计原则，可穿戴设备应该尽可能减少它所需要的注意力，提供必要的信息的同时为用户创造平静生活，让设备学会与用户交流，而不是完全占据用户的视觉注意力。可穿戴设备应该拥有的是它的核心功能，而不是一味为了创新，添加复杂的不必要的功能，同时还要保证它在出问题时仍然能够使用，而功能越是简单的产品往往越不容易出问题。</p>

2018-01-07T00:00:00+00:002018-01-07T00:00:00+00:00https://wordlesssoda.github.io/posts_infovis/fina_work_post<p>期末信息可视化作业的制作记录</p> <nav class="toc"> <ul id="markdown-toc"> <li><a href="#期末信息可视化笔记" id="markdown-toc-期末信息可视化笔记">期末信息可视化笔记</a> <ul> <li><a href="#主要步骤" id="markdown-toc-主要步骤">主要步骤</a></li> </ul> </li> </ul> </nav> <hr /> <h1 id="期末信息可视化笔记">期末信息可视化笔记</h1> <p>利用高德地图的搜索服务API，用Python抓取数据，在Tableau筛选数据后进行信息可视化的作品。</p> <ul> <li>关键词:<code class="highlighter-rouge">天猫</code>，<code class="highlighter-rouge">京东</code>，<code class="highlighter-rouge">国美</code>，<code class="highlighter-rouge">苏宁</code></li> <li>数据量：3k+</li> <li>作品链接 ：<a href="/infovis/final_work/">期末信息可视化作品</a></li> </ul> <h2 id="主要步骤">主要步骤</h2> <ol> <li>在高德地图开放平台，申请<code class="highlighter-rouge">key</code>。</li> <li>使用高德地图搜索服务API，在Python中编写代码，抓取所需要的<code class="highlighter-rouge">keywords</code>，并导出csv/tsv文档。</li> <li>对数据进行筛选，可用Python,也可用Tableau筛选数据，因为数据中存在大量垃圾信息，如：我所选取的数据中的<code class="highlighter-rouge">type</code>存在风景名胜，公共设施，通行设施等等无关的信息，均需要使用筛选器筛选掉。</li> <li>从国家数据抓取关于地区的数据。</li> <li>使用Tableau，将高德地图数据与地区数据连接，因为与地理位置有关，我首先选择制作地图，并添加的筛选器可以为每个地区，每个关键词制作不同的视图。</li> <li>对天猫，京东，国美和苏宁在各个省份地区的数量进行排序比较，还将其主要类型分别进行对比分析。</li> <li>最后将图表进行一些修改，完成期末信息可视化作品，并分享至网页。</li> </ol>

期末信息可视化作业的制作记录

2018-01-04T00:00:00+00:002018-01-04T00:00:00+00:00https://wordlesssoda.github.io/infovis/final_work<p>基于高德地图数据的期末信息可视化作品</p> <nav class="toc"> <ul id="markdown-toc"> <li><a href="#对中国四大家电销售商市场分布情况的数据比较分析" id="markdown-toc-对中国四大家电销售商市场分布情况的数据比较分析">对中国四大家电销售商市场分布情况的数据比较分析</a> <ul> <li><a href="#利用高德地图api的搜索服务用python抓取数据在tableau筛选数据后进行信息可视化的作品" id="markdown-toc-利用高德地图api的搜索服务用python抓取数据在tableau筛选数据后进行信息可视化的作品">利用高德地图API的搜索服务，用python抓取数据，在Tableau筛选数据后进行信息可视化的作品。</a></li> <li><a href="#信息可视化作品展示如下" id="markdown-toc-信息可视化作品展示如下">信息可视化作品展示如下</a></li> </ul> </li> </ul> </nav> <hr /> <h1 id="对中国四大家电销售商市场分布情况的数据比较分析">对中国四大家电销售商市场分布情况的数据比较分析</h1> <h2 id="利用高德地图api的搜索服务用python抓取数据在tableau筛选数据后进行信息可视化的作品">利用高德地图API的搜索服务，用python抓取数据，在Tableau筛选数据后进行信息可视化的作品。</h2> <ul> <li>关键词:<code class="highlighter-rouge">天猫</code>，<code class="highlighter-rouge">京东</code>，<code class="highlighter-rouge">国美</code>，<code class="highlighter-rouge">苏宁</code></li> <li>数据量：3k+</li> </ul> <blockquote> <h4 id="在筛选器中勾选可选择多个不同的视图">在筛选器中勾选可选择多个不同的视图。</h4> <ul> <li>若在网页内显示不正常请点击此 <a href="https://public.tableau.com/views/_18149/sheet4?:embed=y&amp;:display_count=yes&amp;publish=yes">Tablea public</a></li> </ul> </blockquote> <h2 id="信息可视化作品展示如下">信息可视化作品展示如下</h2> <div class="tableauPlaceholder" id="viz1515301916563" style="position: relative"> <noscript><a href="#"><img alt="数据分析 " src="https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;_1&#47;_18149&#47;sheet4&#47;1_rss.png" style="border: none" /></a> </noscript> <object class="tableauViz" style="display:none;"> <param name="host_url" value="https%3A%2F%2Fpublic.tableau.com%2F" /> <param name="embed_code_version" value="3" /> <param name="site_root" value="" /> <param name="name" value="_18149&#47;sheet4" /> <param name="tabs" value="no" /> <param name="toolbar" value="yes" /> <param name="static_image" value="https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;_1&#47;_18149&#47;sheet4&#47;1.png" /> <param name="animate_transition" value="yes" /> <param name="display_static_image" value="yes" /> <param name="display_spinner" value="yes" /> <param name="display_overlay" value="yes" /> <param name="display_count" value="yes" /> <param name="filter" value="publish=yes" /> </object> </div> <script type="text/javascript"> var divElement = document.getElementById('viz1515301916563'); var vizElement = divElement.getElementsByTagName('object')[0]; vizElement.style.width='1000px';vizElement.style.height='827px'; var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement); </script>

基于高德地图数据的期末信息可视化作品

2018-01-04T00:00:00+00:002018-01-04T00:00:00+00:00https://wordlesssoda.github.io/posts_infovis/tableau<p>Tableau使用的基础知识与操作应用</p> <nav class="toc"> <ul id="markdown-toc"> <li><a href="#连接到数据" id="markdown-toc-连接到数据">连接到数据</a></li> <li><a href="#tableau-工作区" id="markdown-toc-tableau-工作区">Tableau 工作区</a></li> <li><a href="#保存数据源和工作簿" id="markdown-toc-保存数据源和工作簿">保存数据源和工作簿</a></li> </ul> </nav> <hr /> <p>信息可视化简单来说就是，把数据信息资源通过图形图像等视觉上的形式呈现出来，使普通人也能够直观的理解和分析数据。其中Tableau是优秀的信息可视化工具之一，以下是关于学习使用Tableau的基础知识。</p> <h2 id="连接到数据">连接到数据</h2> <p>在使用 Tableau 前要先准备好数据，在 Tableau 开始页面左侧的连接中选择你所需要连接的数据源。</p> <h3 id="数据源">数据源</h3> <p>数据源指的是将要处理的数据来源，可以连接来自本地的Excel、文本文件、Access等，也可以连接来自服务器的数据。其中数据源可以包含一个或多个你想要分析的数据连接。</p> <h3 id="清理数据">清理数据</h3> <p>在连接导入数据后，数据并不一定可以直接使用，可能需要进行数据清理。Tableau会自动识别每个字段的属性，包括有：数字，字符串，日期，时间和地理角色。</p> <ul> <li>对于那些 Tableau 无法自动分析的数据，可以使用数据解释器清理数据。</li> <li>数据源筛选器也是个不错的清理数据工具，在页面右上角找到筛选器的 <strong>“添加”</strong> 按钮，在弹出的编辑框里选择要进行筛选的字段。</li> <li>选择多个字段可以创建数据透视表，将原始字段替换成新字段。 而清理后的数据可以导出成新的数据表格。</li> </ul> <h2 id="tableau-工作区">Tableau 工作区</h2> <h3 id="工作表">工作表</h3> <p>Tableua中的工作表与Microsoft Excel十分相似，将字段拖放到 <strong>“列”</strong>，<strong>“行”</strong> 就可以生成视图，通过选择多个字段，在 <strong>智能显示</strong> 中可以选择生成不同的视图。通过创建不同的工作表以及视图从不同的方面分析数据。</p> <h3 id="仪表板">仪表板</h3> <p>仪表板是多个视图的组合，对工作表进行不同的编排以便于演示，也可以通过添加和修改筛选器来增加仪表板的互动功能。</p> <h3 id="故事板">故事板</h3> <p>故事板相当于PPT，通过写故事的方式展示你所想要表达的主题，添加工作表，仪表板来丰富你的故事，增加故事点以形成完整的故事线。</p> <h2 id="保存数据源和工作簿">保存数据源和工作簿</h2> <p>可以将已经完成的工作簿和数据源保存到 Tableau Public 上，获取分享链接与web的嵌入代码，在网页上分享展示自己的信息可视化作品。</p>

Tableau使用的基础知识与操作应用

2017-12-14T00:00:00+00:002017-12-14T00:00:00+00:00https://wordlesssoda.github.io/rwd/translation<p>WSG4_12 小组翻译作业</p> <nav class="toc"> </nav> <hr /> <p>p.329</p> <h3 id="了解图像文件格式-understanding-image-file-formats">了解图像文件格式 UNDERSTANDING IMAGE FILE FORMATS</h3> <blockquote> <ul class="task-list"> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" /><code class="highlighter-rouge">G,陈伟珊</code> 主要的Web文件格式为GIF图像（英文发音为“jiff”）， JPEG (英文发音为“jaypeg”), and PNG(英文发音为“ping”) 文件。所有三种常见的Web图形格式都是所谓的位图图形，由一个由数千个微小的彩色正方形图片元素或像素组成的棋盘格组成。位图文件是手机和数码相机所熟悉的文件类型，很容易创建，编辑，调整大小，和优化的Web使用Adobe的PS图象处理软件或元素等广泛使用的工具，Corel的油漆店专业画家，或其他图片编辑程序。</li> </ul> </blockquote> <blockquote> <ul class="task-list"> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" /><code class="highlighter-rouge">G,陈伟珊</code> 为了有效地通过Internet传输，几乎所有的web图形都被压缩了 保持文件大小越小越好。大多数网站都使用GIF和JPEG图像。在这些文件类型之间进行选择在很大程度上取决于评估：</li> </ul> </blockquote> <blockquote> <ul class="task-list"> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" /><code class="highlighter-rouge">G,李虹霓</code> 图像的性质(是形象的平滑色调过渡或硬边和线条图形图像摄影集)</li> <li class="task-list-item">各种文件压缩对图像质量的影响</li> <li class="task-list-item">压缩技术产生最小文件，其效率 看起来不错</li> </ul> </blockquote> <h4 id="gif">GIF</h4> <blockquote> <ul class="task-list"> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" /><code class="highlighter-rouge">G,许嘉淳</code> 图 11.5 图标字体中的基于矢量的图形，如字体“真棒”，可以扩展到任何分辨率，是一个伟大的解决方案，提供了大量的图标图形只有一个HTTP请求。</li> </ul> </blockquote> <blockquote> <ul class="task-list"> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" /><code class="highlighter-rouge">G,许嘉淳</code> CompuServe信息服务推广了图形交换格式 (GIF)在20世纪80年代，作为一种通过数据网络传输图像有效的手段。 上世纪90年代初，万维网最初的设计者们采用了GIF。它的效率和广泛的熟悉程度。很多图片都是GIF格式， 而且几乎所有支持图形的浏览器都可以显示GIF文件。GIF文件 包含一个“无损”压缩方案，以保证文件大小为最小而无损质量。然而，GIF文件是8位图形，因此可以容纳只有256的颜色。</li> </ul> </blockquote> <blockquote> <ul class="task-list"> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" /><code class="highlighter-rouge">G,黄家丽</code> 图11.6 Lempel Zev Welch（LZW）GIF文件格式的图像压缩技术，在压缩简单的领域的颜色和硬边图形图形特别有效（右侧）。照片图像（左侧）在JPEG或PNG文件格式中看起来要好得多。</li> </ul> </blockquote> <blockquote> <ul class="task-list"> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" /><code class="highlighter-rouge">G,黄家丽</code>gif文件格式使用了一种相对基本的文件压缩形式(Lempel Zev Welch，或LZW)，它在不丢失数据或扭曲图像的情况下消除了数据存储中的低效率问题。在有大面积均匀色的图像上，lzw压缩方案在压缩图像上是最好的，如徽标和图表。在压缩多种颜色和复杂的纹理的“摄影的”图片时，效果要差很多。</li> </ul> </blockquote> <blockquote> <ul class="task-list"> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" /><code class="highlighter-rouge">G,叶琛</code> 你可以利用LZW压缩的特性来提高其效率，从而减少你的GIF图像的大小。 这种策略是把你的GIF图像中的颜色数量减少到最小，并去掉不需要表示的图像的颜色。 一个GIF图像不能超过256种颜色，但可以少一些。 在LZW压缩下，具有较少颜色的图像将更有效地压缩。 例如，在Photoshop中创建GIF图形时，不要使用256色自动保存每个文件。 一个简单的GIF图像在8、16或32种颜色下看起来还不错，文件大小的节省也很可观。 为了在GIF图像中获得最大的效率，请使用最少的颜色数量，以获得最佳效果。</li> </ul> </blockquote> <blockquote> <ul class="task-list"> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" /><code class="highlighter-rouge">G,叶琛</code> 传统的（逐行扫描的）GIF图像一次从上到下下载一行像素，然后浏览器在屏幕上逐行显示图像。 在隔行扫描的GIF文件中，图像数据被存储在一种格式中，这允许支持此功能的浏览器在下载文件时，在屏幕上构建一个全尺寸GIF图片的低分辨率版本。 有些人发现隔行扫描的“模糊到清晰”的动画效果具有视觉吸引力，但是隔行扫描最重要的好处是当图片下载到浏览器中时，可以让用户预览整个图片。</li> </ul> </blockquote> <blockquote> <ul class="task-list"> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" /><code class="highlighter-rouge">G,蔡俊钦</code> 图 11.7 透明的背景GIF图形仅可以处理256的颜色，但是透明的GIF仍然被坚持使用因为它们在和透明的PNG-24图形比较时，显得非常小。不幸的是，在GIF图形中只有唯一一个颜色可以被指定透明，这往往导致可见的颜色边缘当GIF与其他背景颜色对比时。</li> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" /><code class="highlighter-rouge">G,蔡俊钦</code> 对较大的GIF图形来说，交错是最好的。例如像素为200X100或更大的插图。交错是个糟糕的选择对小的GIF图形来说，例如导航条、按钮和图标。如果你保持传统的GIF格式（非交错），这些小图形会更快地加载到屏幕上。一般来说，交错不会显著影响平均GIF的文件的大小。</li> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" /><code class="highlighter-rouge">G,李虹霓</code> GIF格式允许你从颜色板查找选择透明的颜色来表现gif。你可以使用像Photoshop这样的图像编辑软件来选择一个颜色单一的调色板，让gif图形变得透明。通常的颜色 选择透明度是图中的背景色。不幸的是，透明的属性不是选择性的;如果你使一个颜色透明，在图形中的每个像素中，颜色也会变得透明，这可能会导致意想不到的结果。</li> </ul> </blockquote>

WSG4_12 小组翻译作业

2017-12-01T00:00:00+00:002017-12-01T00:00:00+00:00https://wordlesssoda.github.io/rwd/Markdown%E8%AF%AD%E6%B3%95<p>基本的Markdown语法知识与应用</p> <nav class="toc"> <ul id="markdown-toc"> <li><a href="#标题" id="markdown-toc-标题">标题</a></li> <li><a href="#h1-标题" id="markdown-toc-h1-标题">h1 标题</a> <ul> <li><a href="#h2-标题" id="markdown-toc-h2-标题">h2 标题</a></li> <li><a href="#列表" id="markdown-toc-列表">列表</a></li> <li><a href="#引用" id="markdown-toc-引用">引用</a></li> <li><a href="#图片与链接" id="markdown-toc-图片与链接">图片与链接</a></li> <li><a href="#文本样式" id="markdown-toc-文本样式">文本样式</a></li> <li><a href="#水平线" id="markdown-toc-水平线">水平线</a></li> <li><a href="#代码" id="markdown-toc-代码">代码</a></li> </ul> </li> </ul> </nav> <hr /> <h2 id="标题">标题</h2> <h1 id="h1-标题">h1 标题</h1> <h2 id="h2-标题">h2 标题</h2> <h3 id="h3-标题">h3 标题</h3> <h4 id="h4-标题">h4 标题</h4> <h5 id="h5-标题">h5 标题</h5> <h6 id="h6-标题">h6 标题</h6> <h2 id="列表">列表</h2> <h4 id="无序列表">无序列表</h4> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <h4 id="有序列表">有序列表</h4> <ol> <li>1</li> <li>2</li> <li>3</li> </ol> <h2 id="引用">引用</h2> <blockquote> <p>这里是引用</p> </blockquote> <h2 id="图片与链接">图片与链接</h2> <p>图片为：<code class="highlighter-rouge">![]()</code></p> <ul> <li>示范 <img src="/images/markdown.png" alt="markdown" /></li> </ul> <p>链接为：<code class="highlighter-rouge">[]()</code></p> <ul> <li>示范 <a href="https://cn.bing.com/">bing</a></li> </ul> <h2 id="文本样式">文本样式</h2> <ul> <li> <p><strong>这是粗体文字</strong></p> </li> <li> <p><strong>这是粗体文字</strong></p> </li> <li> <p><em>这是斜体文字</em></p> </li> <li> <p><em>这是斜体文字</em></p> </li> <li> <p><del>删除线</del></p> </li> </ul> <h2 id="水平线">水平线</h2> <hr /> <hr /> <hr /> <h2 id="代码">代码</h2> <p>Inline <code class="highlighter-rouge">code</code></p> <p>Indented code</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Some comments line 1 of code line 2 of code line 3 of code </code></pre></div></div> <p>Block code “fences”</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Sample text here... </code></pre></div></div> <p>Syntax highlighting</p> <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">foo</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">bar</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">bar</span><span class="o">++</span><span class="p">;</span> <span class="p">};</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">foo</span><span class="p">(</span><span class="mi">5</span><span class="p">));</span> </code></pre></div></div> <blockquote> <p>部分参考自 简书 <a href="https://www.jianshu.com/p/1e402922ee32/">Markdown——入门指南</a></p> </blockquote>

基本的Markdown语法知识与应用

2017-10-25T00:00:00+00:002017-10-25T00:00:00+00:00https://wordlesssoda.github.io/infovis/term_project<p>基于国家数据网数据的小组期中信息可视化作品</p> <nav class="toc"> </nav> <hr /> <h3 id="概要">概要</h3> <p>选取城镇居民和各类型消费水平数据，通过tableau将数据可视化，分析其关系和得出结论。</p> <h3 id="网页链接">网页链接</h3> <p><a href="/infovis/term_project.html">小组期中信息可视化作业</a></p>

基于国家数据网数据的小组期中信息可视化作品

2017-09-14T00:00:00+00:002017-09-14T00:00:00+00:00https://wordlesssoda.github.io/rwd/RWD_Media_query<nav class="toc"> <ul id="markdown-toc"> <li><a href="#媒体查询" id="markdown-toc-媒体查询">媒体查询</a></li> </ul> </nav> <hr /> <h2 id="媒体查询">媒体查询</h2> <p>概述：媒体查询是CSS3规范的其中一个模块，CSS3媒体查询可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式。比如：可以根据视口宽度、屏幕宽高比和朝向（水平还是垂直）等，只用几行CSS代码就改变内容的显示方式。</p> <blockquote> <p><a href="http://www.w3.org/TR/css3-mediaqueries/">W3C的CSS3媒体查询模块的规范</a></p> </blockquote>

2017-09-13T00:00:00+00:002017-09-13T00:00:00+00:00https://wordlesssoda.github.io/portfolio/first_try<p>第一次尝试制作的关于Microsoft HoloLens的网页</p> <nav class="toc"> </nav> <hr /> <h3 id="概要">概要</h3> <p>Microsoft HoloLens 简要介绍页面</p> <h3 id="网页链接">网页链接</h3> <p><a href="/portfolio/first_try.html">第一次网页制作尝试</a></p>

第一次尝试制作的关于Microsoft HoloLens的网页