18337149582 / fengshunlei@51xueweb.cn 第7讲:移动开发 冯顺磊 18337149582 / fengshunlei@51xueweb.cn 2017.12.

Slides:



Advertisements
Similar presentations
●公司簡介. ●公司組織 行銷 企劃部 行銷 企劃部 研發 設計部 研發 設計部 視覺 設計部 視覺 設計部 媒體 製作部 媒體 製作部 行動 裝置部 行動 裝置部 執行長 總經理 管理部 本公司組織人力配置除董事長、執行長、總經理外,共 有六大部門,分別為研發部 6 人、管理部 4 人、視覺設計部.
Advertisements

教师成绩录入步骤 1. 登录教务系统 2. 进入教师成绩管理界面 3. 选择相应的教学班,点击 “ 课程成绩录 入 ” 进入成绩录入界面 4. 点击 “ 设置 ” 按钮设置 “ 成绩分项 ” 5. 录入成绩, “ 保存成绩 ” 按钮可以保存成 绩但不提交(提交后不能再修改成绩) 6. “ 提交成绩 ”
7.2 图示化记忆 记忆的概述 图示化记忆 联想记忆法 奇特联想记忆法 用手记忆.
醫學美學之我見ー肉毒桿菌 班級:應日三乙 姓名:蔡雅卉 學號: 497E0076. 前言 現在的人,已經把 整型看做是微不足 道的事情了。即使 只是戴牙套、局部 雷射、割雙眼皮、 打美白針、肉毒桿 菌等等,都可以在 身體上做不同的改 變,而讓自己更滿 意自己的外表。
第 15 章 Mobile PHP 與 Ajax 15-1 Mobile PHP 15-2 Ajax 的基礎 15-2 Ajax 的基礎 15-3 jQuery 的 Ajax 方法 15-3 jQuery 的 Ajax 方法 15-4 應用實例:關鍵字建議清單 15-4 應用實例:關鍵字建議清單.
移动端网页开发 分享:杨顺心 WEB 前端开发工程师 2014 年. 目录 HTML5 现状 移动端 CSS3 移动端 javascript 调式移动端.
跨平台移动开发框架比较 How many mobile platforms android 拥有最多的 developer. 开发语言-大众脸- java 开发成本最低,不用单独买一台电脑. 开发者账号-免费 发布应用很快-当天提交,当天就能发布 iOS 贵族平台-至少把自己包装的很高大上.
三餐美食 经销商 三餐美食产品经销必读 2 三餐美食经销商 1 前言 三餐美食经销商是三餐美食餐饮系统重要的合作伙伴,同时也是三餐美食发展道路上最坚定不移的 支持者。为了让所有的经销商伙伴能够通过销售三餐美食产品快速致富,三餐美食总部根据三餐美食产 品开发和市场情况,为经销商伙伴们编撰了《经销商必读》,希望该手册能够让大家对三餐美食有更深.
“后PC”时代 移动电子商务创新型人才培养 2016年4月28日 中国.重庆 北京博导前程信息技术股份有限公司 杨东飞.
環境游離輻射 ( 六 ) 輻射與核能發電. 媽!這是我上班的 地方-核電廠。 地方好寬闊喔! 聽說日本原子彈爆炸死好幾 萬人,阿榮啊!你在這裡上 班,安全嗎?
《小狗包弟 》之 从阅读到写作 学校:和风中学 年级:高一 参赛者:彭龙英. 预习检测一 思考:同学们读完作者与包弟 的故事后,说一说作者所表达的情 感是什么?
Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.
Web app和html5给前端带来的变化 —— 我们的html5游戏平台之旅.
虹膜识别健康养老服务智能系统项目.
移动互联网用户行为研究 Mobile is changing lives 移动互联网改变生活.
探究活动课:互联网+历史素材阅读与研讨 古代中国的选官制度 黄天庆  探究活动课:互联网+历史素材阅读与研讨 古代中国的选官制度 黄天庆 
職校、五專群科簡介.
課程地圖 (104年入學-日間部) 校通識核心 專業課程 必修與選修 與管理模組 網路技術 App設計與應用模組 學院通識核心 學院專業核心
網站「開外掛」 優化營業人員的戰鬥力 介紹 Web365行動展售網站系統的10大特色
C实习《移动电子商务基础》课程教学包 04-移动电子商务营销.
星云集团.
培训内容:ExMobi二次开发培训 新浪微博: 移动应用开发中间件ExMobi 微信服务号: ExMobi 门户注册地址: 开发支撑电话:
江苏省工程造价管理协会 工作报告 2015年4月21日 扬州.
101年8月份 嘉義市道路交通安全聯席會報 酒駕行為與肇事現況分析 主講人:內政部警政署交通組科長張夢麟 1.
高校邦在线学习平台 学生学习手册 北京高校邦科技有限公司.
正确的移动适配 飞鹰正义 百度站长平台 飞鹰正义微信 百度站长社区超级版主
行動終端應用軟體創作專題競賽 題目:商品後端管理APP
速收简历 速收简历移动APP项目 速收简历团队.
未来协同项目计划书.
尔雅慕课学生操作手册说明.
尔雅慕课学生操作手册说明.
上海宏弈源软件科技有限公司 — 12年专注益智软件研发 和配套产品服务 上海宏弈源软件科技有限公司.
比特云 后台操作手册.
A級無障礙網頁製作 主講人:劉威良 臺南大學資訊教育所
103學年度第1階段 志願選填試探後輔導作為 成效檢討與精進建議
活动主题:佛山智造 中国骄傲 随着互联网、云计算、大数据以及移动互联网的快速发展,技术不仅仅是一种工具,正加速重构着品牌的新格局。
荷福威士顿机器人科技有限公司 上海荷福集团
第一部分 系统概述 第二部分 技术背景 目录 第三部分 维修流程描述 成功案例 第四部分. 第一部分 系统概述 第二部分 技术背景 目录 第三部分 维修流程描述 成功案例 第四部分.
四川省卫生监督移动 执法终端介绍 发言人:陈成身 四川省卫生执法监督总队.
獎補助經預計支用報告 105年.
尔雅慕课学生操作手册说明 尔雅客服中心.
Selenium 一个用于Web应用程序测试的工具 Robin Ren
职团客户促销活动 2018年04月.
尔雅慕课学生操作手册说明 尔雅客服中心.
尔雅慕课学生操作手册说明.
绿豆芽科技 让科技融入生活. 绿豆芽科技 让科技融入生活 让天下没有非互联网的公司 传统行业公司 新型科技公司 绿豆芽科技 产品研发 供应链 渠道 物联网硬件 云计算平台 APP应用 传统优势 竞争力 用户体验 团队由数十名硕士生及博士生组成,有着在德州仪器、中兴等知名企业的工作经历,项目经验丰富。团队成员获得过:电子设计竞赛国家一等奖、“Intel杯”嵌入式邀请赛冠军、“微软创新杯”
作者:different(D姐),前端工程师 博客: 新浪微博:inline_block
場次A - 19 串流導覽 – 以蓮池潭為例 指導:張晉源 院長 學生:陳承劭 學生:吳佩誼.
移动知网 同方知网(北京)技术有限公司.
UI设计标准、移动开发规范、移动管理规范、集成标准规范
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
华东理工大学 关于新校园卡功能启用的相关说明 2018年09月07日.
福智 學員平台 2018/6/9 幹部月會 羅東教室.
尔雅慕课学生操作手册说明 尔雅客服中心.
职团客户促销活动 2018年01月.
职团客户促销活动 2018年03月.
年所得12万以上自行纳税申报 信息管理科 张沛.
基于App Inventor的物联网工程导论课程实验设计
武汉纺织大学传媒学院 cm.wtu.edu.cn
金中移动抄表系统培训手册 广西金中软件有限公司 2015年8月7日.
102學年度下學期 班親會 五年仁班 楊曉逸老師.
第二階段「校園徒步區建置」 執行成果報告.
喜雨亭記 國二甲 S 陳姿婷.
尔雅慕课学生操作手册说明 尔雅客服中心.
FrontPage 2000.
学 生 端 操 作 指 南
為民服務白皮書 台灣電力公司彰化區營業處  彰化區營業處 為民服務白皮書 誠信 關懷 服務 成長 1.
实验课程学习手册.
云控APP说明书 适用于云控平台配置.
云控APP说明书 适用于云控平台配置.
Presentation transcript:

18337149582 / fengshunlei@51xueweb.cn 第7讲:移动开发 冯顺磊 18337149582 / fengshunlei@51xueweb.cn 2017.12

本讲主要内容 移动Web开发包含哪些内容? 如何做移动Web开发? 一个移动网页的案例

1.移动Web开发包含哪些内容? 可以按照表现方式的不同将移动Web分为移动网页和移动APP两种。

1.移动Web开发包含哪些内容? 移动网页:在移动端表现良好的网页。 移动端的网页开发与PC端的网页开发有着什么样的区别?

1.移动Web开发包含哪些内容? 移动端的浏览器兼容性问题少之又少。 移动端有着各种各样的手势操作。 移动端存在着不同手机的适配问题。

1.移动Web开发包含哪些内容? 移动APP 先了解下三种移动端的APP Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java或者是新的Kotlin,iOS系统用的是object-C或者是新的Swift。 Hybrid App 混合型app手机应用程序 也有另外的一个名字叫做【套壳开发】,混合使用原生的程序和html5页面开发的手机应用。 Web App 基于Web的app手机应用程序 完全使用html5页面加前端JS框架开发的手机应用。

1.移动Web开发包含哪些内容? Web APP apple-mobile-web-app-capable

2.如何做移动Web开发? layout viewport visual viewport ideal viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。 在这个里边有三个层次的viewport layout viewport visual viewport ideal viewport <meta name=“viewport”>设置的是layout viewport https://www.cnblogs.com/exhuasted/p/5838090.html

2.如何做移动Web开发? Viewport 的设置? 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下: width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。 height:和 width 相对应,指定高度。 initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。 maximum-scale:允许用户缩放到的最大比例。 minimum-scale:允许用户缩放到的最小比例。 user-scalable:用户是否可以手动缩放。

2.如何做移动Web开发 理解px、em、rem三种前端常用尺寸 px:将显示器分成非常细小的方格,每个方格就是一像素。 rem:继承根元素的字体大小,即为HTML的字体大小,为CSS3新增的属性。 http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml

2.如何做移动Web开发 理解@media{} 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

2.如何做移动Web开发 移动前端的布局 基于rem实现的布局

2.如何做移动Web开发 移动前端的布局 基于@media{}的布局 https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

2.如何做移动Web开发 手势

2.如何做移动Web开发 移动端的手势基于JS的Touch事件实现 TouchEvent 代表当触摸行为在平面上变化的时候发生的事件. touchstart : 触摸开始(手指放在触摸屏上) touchmove : 拖动(手指在触摸屏上移动) touchend : 触摸结束(手指从触摸屏上移开) touchenter :移动的手指进入一个dom元素。 Touch 代表用户手指与触摸平面间的一个接触点. TouchList 代表一系列的Touch; 一般在用户多个手指同时接触触控平面时使用这个接口. DocumentTouch 包含了一些创建 Touch对象与TouchList对象的便捷方法.

2.如何做移动Web开发 Hammer.js 官网:http://hammerjs.github.io/. Swiper 中文网:http://www.swiper.com.cn/

3.一个移动网页的案例

Thanks.