热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML5移动前端webapp有什么推荐的书籍或者建议?

举个栗子:关于响应式web设计的建议或者书籍。
举个栗子:关于响应式web设计的建议或者书籍。

回复内容:

从你的问题我提取4个关键词
html5 webapp 响应式 学习他们的书籍或建议
1,html5 本身是一个大类目...
2,webapp 应该是css+html+Javascript 共同构建的~ 当然css3 和 html5 起到了很大的作用
3,响应式,这个是另外一个概念... 直接看 winter 推荐的文章,然后自己实践一下吧

总的说回答第4个关键词
我默认你已经掌握基本的css html Javascript
那么你只要了解基本的html5概念 敲一遍css3的新属性那么你完全可以直接开工了...
发现问题google就行...

如果希望系统的学习。。
我也推荐
html5触摸界面开发与设计
只看过这本,不过这本也只是一本 工具书

如果你想跳过这些东西 直接玩 webapp ~
那么 建议 直接在W3C看 jquery moble~ 不说性能与定制,但可以很快搭建一个webapp

推荐一下hbuilder 的 mui 框架~ 快速搭建ios系统级别的ui界面
再推荐一下 vuejs ... 温特菊苣给的那篇文章很全面,里面不止说了响应式设计中前端的工作,也包括了设计等其他方面,作为菜鸡我只能推荐几本书(有的我自己也还没看...):
《响应式web设计:html5和css3实战》
封面是一只瓢虫,这本其实响应式的东西讲得比较少,大半内容是关于介绍h5和css3的基础知识,全书主要是带领读者做一个小网页来写的,如果同时想了解h5和css3和响应式设计入门,这本不错~
《响应式web设计实践》
《跨终端web》
《html5触摸界面开发与设计》
(先写一点,上完课再继续答) 我谈谈对「HTML5移动前端webapp」的一些建议,书籍的话市面上肯定是没有讲「移动前端webapp」的,如果非要说有的话,基本上都是「Angular.js 指南」「React.js 指南」之类,「移动前端webapp」是一个比较大的概念,如果加上「HTML5」就更大了。讨论「HTML5移动前端webapp」就像后端狗讨论如何开发 「WEB 服务端」一样,需要针对不同的技术框架针对性讨论。我感觉如果想要掌握并且能够擅长「HTML5移动前端webapp」的开发,是需要掌握很多要点的。

首先就是移动webapp,你需要学习各种新技术,比如 CSS3、ES2015/ES6、webpack/browserify、gulp/grunt、Less/sass,然后还要掌握周边的各种辅助技术,如生成sourcemap方便调试,以及rem可以更好的适配多种不同尺寸的移动终端,此外还有很多细枝末节都需要不断的去积累。如果能够掌握以上的几个技术点,并且踩过不少移动端的坑,你就可以开始研究一个框架了,现在比较热门的当属 React.js 及 Angular.js 了,开始这些之后会有更多的周边技术等着你去研究,对于webapp,路由基本上是由前端控制吧,你应该去学习一个控制路由的库,诸如 react-router,那么OK,如果到这一步你都能掌握的话,你就可以开始做「H5移动webapp」了,性能调优方面的话也应该了解一些,移动设备上最吃内存的就是图片,需要重点优化。

没了,暂时就想这么多,后续可以再补充 基础知识
1、
HTML + CSS 这部分建议在线教程 上学习,边学边练.
之后可以模仿一些网站做些页面。在实践中积累了一些经验后,可以系统的读一两本书,推荐《Head First HTML 与 CSS
中文版》,这本书讲的太细了,我没能拿出耐心细读。你可以根据情况斟酌。
2、Javascript 要学的内容实在很多,如果没有其他编程语言的基础的话,学起来可能要费些力,建议看《Javascript语言精粹》,JS是一门很混乱的语言,这本书能够帮助你区分哪些是语言的精华,哪些是糟
粕,对于语言精华,应该深入学习。糟粕部分能看懂别人写的代码就行,自己就不用尝试了。
有了以上基础,就可以进行一般的静态网页设计,不过对于复杂的页面还需要进一步学习。
1、CSS。必看《精通CSS》,看完这本书你应该对:盒子模型,流动,Block,inline,层叠,样式优先级,等概念非常了解了。作为练习可以看下《CSS艺门之匠》这本书,它对标题,背景,圆角,导航条,table,表单等主题都有详细的介绍。
2、Javascript。上面提到内容还不足以让你胜任JS编程。在有了基础之后,进一步学习内容包括:
a) 框架。
推荐jQuery,简单易用,上手jQuery即可完成一些简单的项目。学习方法也很简单,照着产品文档做
几个页面就行了,不用面面俱到,以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性,让你能更专注与Web开发学习的精髓部分。补充: 可以使用
Codecademy 学习 Javascript,jQuery,用户体验真的很好(感谢 TonyOuyang )。
b) Javascript 语言范式
。这个名字可能并不恰当,只是我找不到可以描述“面向对象”,“函数式”这个两个概念的概念。Javascript不完全是一个面向对象的语言,它的很多
设计理念都有函数编程语言的影子,甚至说如果你不用面向对象,完全可以把它理解成一门函数式编程语言。
Javascript的很多语言特性,都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论,对封装,继承,多态等概念要
理解,维基百科,百度百科会是你的帮手,另外推荐《Object Oriented
Javascript》,应该有中文版。对与函数式编程我了解的也不系统,不好多说,可以自己百度一下。
c) Javascript 语言内部机制。必须弄清如下概念:JS
中变量的作用域,变量传递方式,函数的定义环境与执行环境,闭包,函数的四种调用方式(一般函数,对象的方法,apply,call),以及四种调用方式
下,‘this’指向的是谁。这部分内容你会在《Javascript语言精粹》中详细了解。另外,你必须理解 json。
d) dom编程,这个Web前端工程师的核心技能之一。必读《Dom编程艺术》,另外《高性能 Javascript》这本书中关于dom编程的部分讲的也很好。
e) Ajax编程,这是另一核心技术。Ajax建议在网上查些资料,了解这个概念的来龙去脉,百度百科,维基百科上的内容就足够了。真正编程是很容易的,如今几乎所有框架都对Ajax有良好的封装,编程并不复杂。
f) 了解浏览器差异性。这部分包括CSS和js两部分,浏览器差异内容很多,建议在实践中多多积累。另外对于浏览器的渲染模式,DOCTYPE等内容应该系统学习。
3、HTML5和CSS3 。HTML5规范已经于2014年10月28日发布了,移动端HTML5和CSS3已经得到了非常广泛的使用,必知必会呀。

再进一阶 · 代码层面:
有了以上知识,对于大多数小型网站,你应该已经可以写出能够工作的代码了。但要想成为更专业的前端,你还需继续努力。更高的要求大概还有四方面:1)易维护,2)可测试,3)高性能,4)低流量(移动端)。
1)易维护。对于页面你该理解‘样式’,‘数据’,‘行为’三者分离,对应的当然就是CSS,HTML,js。对于js代码,你最好了解设计模式,重构,MVC等内容。
2)可测性。
3)高性能。必读《高性能Javascript》
4)低流量。移动端关注比较多。
5)对于想要学习前端的同学,尤其是自学的伙伴,自学并非永久的,假如没有定力的还是找个培训机构吧。
再进一阶 · 工程层面:
前端项目同样面临软件生命周期的各个环节,首先是代码管理,你必须学会使用Svn和Git。其次是代码的构建,如今前端代码构建已经不是简单的压缩一下了,需要进行依赖管理、模块合并、各种编译,比需要学会使用Grunt、Gulp等前端构建工具。

对于前端开发,基本内容就这些了,可以根据自己的兴趣爱好选择性学习以下内容。
1、交互设计。大公司依然有专业人士搞这些,不过不懂交互的前端一定不是好前端。

2、后端。
应该说前段工程师必须至少了解一门后端语言,不过如果爱好也可深入学习,入手难度比较低的应该是PHP了。这部分由可分为基于页面,基于框架两种。
大型项目都是基于框架开发的,建议至少了解一个MVC框架,比如PHP的Ci、Yii、Yaf
等,好还框架的设计思想都大同小异。如今NodeJs在大公司已经得到普遍的使用,推荐大家使用在Node上使用Express框架做一些后端服务的开
发。
3、Android和IOS开发。
时至今日,前端的工作领域已经非常广泛,native的界面开发本质上也是前端开发,个大公司都面临着Native环境和web环境页面同时维护的问题,如果能够在技术上得到统一,将会有巨大的价值。对于学有余力的同学,应该了解Native开发的基本流程,至少了解到界面构建的技术。 books
Javascript Mobile Application Development
Mobile Javascript Application Development - O'Reilly Media
Mobile First Design with HTML5 and CSS3
Responsive Web Design by Example
Sencha Touch 2 Mobile Javascript Framework
Mobile HTML5 - O'Reilly Media
Responsive Web Design by Example
HTML5 and CSS3 Responsive Web Design Cookbook
Responsive Web Design with HTML5 and CSS3

rwd
Media Queries
Responsive Design Knowledge Hub

关注spec.
Standards for Web Applications on Mobile: current state and roadmap 《HTML5 触摸界面设计》这本书讲的很不错 www.w3school.com.cn/

熟悉与HTML的关系和区别,熟练掌握CSS3(响应式布局)、绘图API以及相关JsAPI的使用

第一章: HTML5概述

1

HTML的发展,HTML5的诞生,HTML5和HTML的关系和区别

2

HTML5的目标、HTML5与之前HTML语法的改变、新增的元素和废除的元素、全局属性

第二章: HTML5基础

1

新增文档结构元素(Article、section、nav、aside、header、footer、address)

2

表单改良(input改良以及output元素的新增)、验证、自定义错误信息

3

文件API(FileList对象和File对象、FileReader接口)、和拖放API(自定义拖放图标)

阶段性项目: 复习具体知识点,和HTML4文档结构做对比,熟练使用表单和文件新功能

第三章: CSS3

1

CSS3的概念以及对比CSS2区别、新增的后代选择器、新增伪类选择器(before、after…)

选择器相关

2

文本阴影(text-shadow)、文本自动换行(word-break)、自定义字体(@font-face)

文本相关

3

圆角(border-radius)、图片边框(border-image)、盒阴影(box-shadow)、两端对齐

盒子相关

4

变形处理(transform)、动画(transitions)、帧定义(key-frames)、旋转(rotate)

动画相关

5

视角(perspective)、变形类型(transform-style)、圆点(transform-origin)、3D旋转

3D相关

6

响应式布局概念以及语法(@media)、web网页和mobile网页的区别、样式继承

响应式布局

阶段性项目: 课堂案例举一反三,作业完成,2D(网易邮箱首页动态图壁报)和3D动画(模拟3D城市)

第四章: HTML5高级之绘制图形

1

Canvas标签基础知识、绘制矩形、绘制圆形、使用路径、图像裁剪、保存为文件、简单动画

2

Svg体系的基础知识、和canvas标签的功能对比、和canvas的区别、绘制动画

阶段性项目: canvas实现银河系旋转、svg实现萌Q宝宝,时钟

第五章: HTML5高级之多媒体

1

多媒体的概念、audio音频元素、音频元素JavascriptAPI、音频回调事件、audioContext

2

Video视频元素、视频元素JavascriptAPI、视频回调事件

阶段性项目: 潭州音乐播放器(音乐播放、歌词同步、曲谱图、MV同步)

终篇: HTML5企业级实战技术

1

本地存储web storage、本地数据库基础概念和sql基础

本地存储

2

缓存概念、本地缓存和浏览器网页缓存的区别、本地缓存applicationCache

本地缓存

3

通信基础知识、跨文档消息传输的概念、webSocket通讯

通信

4

定位基础知识以及原理、通过GeolocationAPI获得地理位置信息、结合google(高德)地图定位

GPS及定位

5

PhoneGap实现各种传感器、光度传感器、方向传感器、重力感应等

传感器

阶段性项目: 每个都有对应的项目案例可以实现

综合项目(新浪微博手机响应式布局网站 潭州微商城开发 等企业响应式手机网站)

推荐个博客吧,前端学习者应该知道的比较多首页 » 张鑫旭,希望对你有帮助
推荐阅读
  • Spark中使用map或flatMap将DataSet[A]转换为DataSet[B]时Schema变为Binary的问题及解决方案
    本文探讨了在使用Spark的map或flatMap算子将一个数据集转换为另一个数据集时,遇到的Schema变为Binary的问题,并提供了详细的解决方案。 ... [详细]
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
  • 深入浅出解析HTTP协议的核心功能与应用
    前言——协议是指预先设定的通信规则,确保双方能够按照既定标准进行有效沟通,从而实现准确的信息交换。例如,驯兽师通过拍手使动物坐下,这实际上是一种预设的协议。本文将详细探讨HTTP协议的核心功能及其广泛应用,解析其在现代网络通信中的重要作用。 ... [详细]
  • 第一次写这玩意,不知道什么时候能写完,今天项目比较近,期望年底能看完吧。先定个小目标20201228完成第1章Spring介绍第2章入门第3章在Spring中引入IoC和DI第4章 ... [详细]
  • Mantis Bug Tracker:高效缺陷管理与跟踪系统
    缺陷管理平台Mantis,也做MantisBT,全称MantisBugTracker。Mantis是一个基于PHP技术的轻量级的开源缺陷跟踪系统,以Web操作的形式提供项目管理及缺 ... [详细]
  • svnstat查看当前目录下svn状态svnremovexxxxsvnaddxx ... [详细]
  • 自动验证时页面显示问题的解决方法
    在使用自动验证功能时,页面未能正确显示错误信息。通过使用 `dump($info->getError())` 可以帮助诊断和解决问题。 ... [详细]
  • importpymysql#一、直接连接mysql数据库'''coonpymysql.connect(host'192.168.*.*',u ... [详细]
  • 本文介绍了如何使用 CMD 批处理脚本进行文件操作,包括将指定目录下的 PHP 文件重命名为 HTML 文件,并将这些文件复制到另一个目录。 ... [详细]
  • 本文详细介绍了DMA控制器如何通过映射表处理来自外设的请求,包括映射表的设计和实现方法。 ... [详细]
  • 在使用Eclipse进行调试时,如果遇到未解析的断点(unresolved breakpoint)并显示“未加载符号表,请使用‘file’命令加载目标文件以进行调试”的错误提示,这通常是因为调试器未能正确加载符号表。解决此问题的方法是通过GDB的`file`命令手动加载目标文件,以便调试器能够识别和解析断点。具体操作为在GDB命令行中输入 `(gdb) file `。这一步骤确保了调试环境能够正确访问和解析程序中的符号信息,从而实现有效的调试。 ... [详细]
  • Jenkins学习精华:自动化构建与持续集成入门指南
    本文综合了网络资源及同事分享的PPT内容,详细介绍了Jenkins在自动化构建与持续集成中的应用。首先涵盖了Jenkins的安装与配置流程,接着阐述了如何根据项目需求设定自动化编译任务,包括确定开发环境、选择合适的编译工具以及实现代码的自动更新等关键步骤。特别强调了在SVN环境中通过命令行实现代码自动拉取的最佳实践。 ... [详细]
  • LDAP服务器配置与管理
    本文介绍如何通过安装和配置SSSD服务来统一管理用户账户信息,并实现其他系统的登录调用。通过图形化交互界面配置LDAP服务器,确保用户账户信息的集中管理和安全访问。 ... [详细]
  • 本文详细介绍了Java代码分层的基本概念和常见分层模式,特别是MVC模式。同时探讨了不同项目需求下的分层策略,帮助读者更好地理解和应用Java分层思想。 ... [详细]
  • [c++基础]STL
    cppfig15_10.cppincludeincludeusingnamespacestd;templatevoidprintVector(constvector&integer ... [详细]
author-avatar
每天洗脸的小媳妇_853
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有