万本电子书0元读

万本电子书0元读

顶部广告

HTML5移动开发电子书

通过使用HTML5和CSS3,你可以为所有移动平台和非移动平台发出相当出色的网站和应用。借助于这本彰显实用性的图书,你不但可以发出能在iOS、Android、BlackBerry和Windows Phone上良好运行的Web应用,而且还能提供绝佳的用户体验。 本书带有大量代码示例,讲解了使用HTML5特性(包括新的Web表单、SVG、Canvas、localStorage和相关API)的实践,提供了CSS3的大量细节,还涵盖了针对大型屏幕和小型屏幕设计应用的相关知识。

售       价:¥

纸质售价:¥44.50购买纸书

272人正在读 | 2人评论 6.2

作       者:美 埃斯特尔 韦尔Estelle Weyl

出  版  社:人民邮电出版社

出版时间:2016-12-01

字       数:40.7万

所属分类: 科技 > 计算机/网络 > 程序设计

温馨提示:数字商品不支持退换货,不提供源文件,不支持导出打印

为你推荐

  • 读书简介
  • 目录
  • 累计评论(2条)
  • 读书简介
  • 目录
  • 累计评论(2条)
《HTML5移动发》全面讲解了使用HTML5和CSS3发网站和Web应用的技术。 《HTML5移动发》总共分为14章,其内容包含移动发环境的设置,HTML5的元素、语法和语义,使用JavaScript来构建表单,探究应用于图像、音视频的HTML5媒体API以及AppCache、localStorage和其他API,CSS3选择器和语法以及更为深的特性,响应式Web设计的特性,以及针对所有平台行性能、用户体验和可靠性的设计。 《HTML5移动发》适合具有一定经验的Web前端发人员阅读。<br/>【推荐语】<br/>通过使用HTML5和CSS3,你可以为所有移动平台和非移动平台发出相当出色的网站和应用。借助于这本彰显实用性的图书,你不但可以发出能在iOS、Android、BlackBerry和Windows Phone上良好运行的Web应用,而且还能提供绝佳的用户体验。 本书带有大量代码示例,讲解了使用HTML5特性(包括新的Web表单、SVG、Canvas、localStorage和相关API)的实践,提供了CSS3的大量细节,还涵盖了针对大型屏幕和小型屏幕设计应用的相关知识。 学习HTML5的元素、语法和语义; 使用少量的JavaScript构建能提供增强可用性的表单; 探究与图形、音视频相关的HTML5多媒体API; 借助于AppCache、localStorage和其他API,使应用能够离线工作; 学习CSS3选择器和语法相关的知识; 深究CSS3特性,比如多重背景、渐变、边框图像、过渡、转场和动画; 让Web应用更可用、更具响应性和可访问性; 针对在所有平台上的性能、用户体验和可靠性行设计。<br/>【作者】<br/>Estelle Weyl是一位前端工程师,自从1999年起就发基于标准的无障碍网站。她写作的技术博客吸引了数百万的访客,并经常在世界各地发表CSS3、HTML5、JavaScript、前端性能和移动Web发相关的演讲。<br/>
目录展开

内容提要

O’Reilly Media, Inc.介绍

业界评论

关于作者

关于封面

前言

本地应用和Web应用的对比

勉励语(或者说将旧的Internet Explorer抛到脑后)

浏览器

Web应用与本地应用的对比:简史

发布SDK:第三方应用的开始

有什么新东西?新元素和API

语义分组标记

Web表单

SVG和Canvas

视频和音频

地理位置API

离线内容和存储

其他API

CSS有什么新东西

Web字体

特定于移动端的考量

为什么选择这本书?

屏幕大小

用户目标

本书内容

本书的惯例

代码示例的使用

联系方式

致谢

第1章 学习移动HTML5、CSS3和Java Script API之前的准备工作

1.1 CubeDoo:HTML5移动游戏

1.2 开发工具

1.2.1 文本编辑器

1.2.2 浏览器

1.2.3 调试工具

1.2.4 桌面式调试器

移动视口(Mobile viewport)

1.2.5 远程调试

Android调试工具

weinre

使用weinre

Adobe Edge Inspect和Ghostlab

使用Aardwolf调试JavaScript

BlackBerry 10调试器

1.3 测试工具

1.3.1 仿真器和模拟器

Android仿真器

iOS模拟器

BlackBerry模拟器

Windows Phone仿真器

Firefox OS模拟器

Opera Mobile仿真器

Opera Mini模拟器

1.3.2 在线工具

1.3.3 手机

浏览器实验室(browser labs)

iOS

Android

Windows

BlackBerry

Nokia

Kindle

WebOS

1.3.4 自动化测试

第2章 升级至HTML5

2.1 HTML5语法

2.1.1 元素

2.1.2 属性

2.1.3 全局属性和国际化属性

id

class

title

style

lang

dir

2.1.4 成为HTML5核心的HTML 4属性

tabindex

accesskey

2.1.5 HTML5新内容:全局可访问性和交互性属性

hidden

contenteditable

contextmenu

draggable

dropzone

spellcheck

ARIA无障碍属性

data-自定义数据属性

Itemid、itemprop、itemref和itemtype

2.2 HTML元素/属性的语法

2.2.1 自闭合元素

2.2.2 最佳实践

标记使用小写

所有属性都用引号括起来

闭合所有元素

嵌套所有元素

为所有非布尔型属性提供值

针对任务使用语义上最合适的正确元素

2.2.3 要素

文档类型声明

<html>元素

<head>元素

<title>元素

<body>元素

2.2.4 存在于<head>中的元素

2.2.5 <meta>:添加元数据

<meta charset="UTF-8" >

描述meta标记

关键字meta标记

<meta http-equiv="…">

2.2.6 移动meta标记

视口meta标记

width=<num>|device-width

height=<num>|device-height

user-scalable=no|yes

initial-scale=<float>

maximum-scale=<float>

minimum-scale=<float>

2.2.7 移动厂商特有的值

apple-mobile-web-app-capable

apple-mobile-web-app-status-bar-style

format-detection

2.2.8 网页的<base>

2.2.9 <link>不仅用于样式

添加样式表<link>

<link>标记的属性

media属性

rel属性

<style>

添加<script>到网页

用户关闭JavaScript时——<noscript>

元素之<body>

第3章 HTML5中的新元素

3.1 HTML5中的分节元素

3.1.1 <section>

3.1.2 <article>

3.1.3 <section>或<article>

3.1.4 <nav>

3.1.5 <aside>

3.1.6 <header>

3.1.7 <footer>

3.1.8 CubeeDoo的页头和页尾

3.1.9 不陌生也不常用:<adderss>

3.1.10 内容分组:其他新的HTML5元素

3.1.11 <main>

3.1.12 <figure>和<figcaption>

3.1.13 <hr>

3.1.14 <li>和<ol>的属性被改变

3.2 HTML5中新的文本级语义化元素

3.2.1 <mark>

3.2.2 <time>

3.2.3 <rp>、<rt>和<ruby>

3.2.4 <bdi>

3.2.5 <wbr>

3.3 改变了的文本级别语义元素

3.3.1 <a>

移动特有的链接操作

3.3.2 HTML 4中文本级元素的改变

3.3.3 未改变的元素

3.4 嵌入式元素

3.4.1 嵌入式元素的改变

<iframe>

<img>

<object>

<param>

<area>

<embed>

3.5 交互式元素

3.5.1 <details>和<summary>

3.5.2 <menu>和<menuitem>

<menuitem>

3.5.3 所有的XHTML都在HTML5里面了,除了……

3.6 总结

第4章 HTML5 Web表单

4.1 <input>的属性(以及其他表单元素)

4.1.1 type属性

4.1.2 required属性

4.1.3 最小和最大值:min和max属性

4.1.4 step属性

4.1.5 placeholder属性

4.1.6 pattern属性

4.1.7 readonly属性

4.1.8 disabled属性

4.1.9 maxlength属性

4.1.10 size属性

4.1.11 form属性

4.1.12 autocomplete属性

4.1.13 autofocus属性

4.2 <input>类型和属性

4.2.1 重新介绍你认为已经了解的input类型

4.2.2 文本框:<input type=“text”>

4.2.3 密码栏:<input type=“password”>

4.2.4 复选框:<input type=“checkbox”>

4.2.5 单选按钮:<input type=“radio”>

4.2.6 提交按钮:<input type=“submit”>

4.2.7 重置按钮:<input type=“reset”>

4.2.8 选择文件按钮:<input type=“file”>

4.2.9 隐藏:<input type=“hidden”>

4.2.10 图片:<input type=“image”>

4.2.11 按钮:<input type=“button”>

4.2.12 设计输入类型的样式

4.3 <input>类型新增的值

4.3.1 电子邮件:<input type=“email”>

4.3.2 URL:<input type=“url”>

4.3.3 电话:<input type=“tel”>

4.3.4 数字:<input type=“number”>

4.3.5 滑动条:<input type=“range”>

4.3.6 搜索栏:<input type=“search”>

4.3.7 拾色器:<input type=“color”>

4.4 日期和时间输入类型

4.4.1 日期选择器:<input type=“date”>

4.4.2 UTC日期和时间:<input type=“datetime”>

4.4.3 本地日期和时间:<input type=“datetime- local”>

4.4.4 月份:<input type=“month”>

4.4.5 时间:<input type=“time”>

4.4.6 周历:<input type=“week”>

4.5 表单验证

elment.validity.valueMissing

element.validity.typeMismatch

element.validity.patternMismatch

element.validity.tooLong

element.validity.rangeUnderflow

element.validity.rangeOverflow

element.validity.stepMismatch

element.validity.valid

element.validity.customError

4.5.1 使用CSS轻松改善UI

控制验证气泡

设计样式以增强可用性

4.6 新的表单元素

4.6.1 <datalist>元素及list属性

<datalist>的优雅降级

4.6.2 <output>元素

CubeeDoo

4.6.3 <meter>

4.6.4 <progress>

4.6.5 <keygen>

4.7 其他表单元素

4.7.1 <form>元素

4.7.2 <fieldset>和<legend>

4.7.3 <select>、<option>和<optgroup>

4.7.4 <textarea>

4.7.5 <button>

4.7.6 <label>元素

4.8 小结

第5章 SVG、Canvas、Audio和Video

5.1 HTML5媒体API

5.1.1 SVG

5.1.2 在文档中引入SVG

5.1.3 “小丑汽车”技术:用于响应式前景图像的SVG

5.1.4 学习SVG

5.1.5 CubeeDoo SVG

5.1.6 Canvas

第一个<canvas>

<canvas>代码示例

5.1.7 Canvas与SVG

WebGL

5.2 Audio/Video

5.2.1 媒体类型

5.2.2 把<video>添加到网站

5.2.3 <video>和<audio>的属性

src

autoplay

loop

controls

preload

poster

width

height

<track>元素

subtitles

captions

descriptions

chapters

metadata

5.2.4 视频、音频和JavaScript

CubeeDoo

5.2.5 为视频设计样式

响应式视频大小

关于<video>的实现你需要了解的几件事

第6章 其他HTML5 API

6.1 离线Web应用

6.1.1 我是否已经连接上网

6.1.2 应用缓存

缓存清单(cache manifest)文件

更新缓存

6.1.3 本地(Local)和会话(Session)存储

与cookie进行比较

使用本地存储来提高移动性能

CubeeDoo

storeValue

alterValue

pauseGame

playGame

reset

node.classList.add(class)

node.classList.remove(class)

node.classList.toggle(class)

node.classList.contains(class)

6.1.4 SQL/Database存储

Web SQL方法

CubeeDoo分数排行榜代码

IndexedDB

6.2 增强的用户体验

6.2.1 地理位置服务

6.2.2 Web Worker

6.2.3 微数据

微数据与微格式

微数据API

6.2.4 跨文档消息

CORS:跨域资源共享(Cross-Origin Resource Sharing)

安全性

6.3 无障碍富Internet应用(ARIA)

6.3.1 可访问性

6.4 小结

第7章 升级到CSS3

7.1 CSS:定义和语法

7.1.1 CSS语法

7.1.2 使用外部样式表:重温<link>

media属性

all

braille

embossed

handheld

print

projection

screen

speech

tty

tv

7.1.3 媒体查询

window.matchMedia

7.1.4 CSS最佳实践

1.最大限度地减少HTTP请求

2.使用外部样式表

3.使用CSS reset或normalizer来规范浏览器

4.使用最弱的特定性以便重写

5.不使用内联样式或!important修饰符

7.2 CSS选择器

7.2.1 最基本的选择器

类型选择器

类选择器

ID选择器

7.3 更多的CSS3选择器

7.3.1 常规选择器

通配选择器:*

类型选择器:E

类选择器:class

ID选择器:#id

7.3.2 使用选择器

7.3.3 关系选择器:基于代码顺序的规则

后代组合器:E F

p strong {}

#myParent a{}

.copyright .urgent {}

li strong {}

父子组合器:E > F

div > p {}

p > strong {}

相邻兄弟组合器:E+F

p:first-of-type + p {}

常规兄弟组合器:E~F

7.3.4 属性选择器

CubeeDoo

7.3.5 伪类

-webkit-tap-highlight-color

-webkit/moz/ms-user-select

-webkit-touch-callout

7.3.6 状态伪类

7.3.7 结构上的伪类

7.3.8 nth类型的公式

偶数和奇数

单个元素

:nth-of-type与:nth-child

数字表达式

练习

7.3.9 更多的伪类

:target

:lang(en)

:not(s)或否定伪类

p:not(.copyright)

:not(a)

p a:not(:visited)

li:not(:last-of-type)

现实世界中的示例

7.3.10 伪元素

::before和::after

理解双冒号符号

7.4 其他选择器:Shadow DOM

7.4.1 特定性胜过层叠:理解CSS的特定性

7.5 小结

第8章 CSS3值的扩展选项

8.1 CSS颜色值

8.1.1 十六进制值

8.1.2 rgb()句法

8.1.3 使用RGBA添加透明度功能

8.1.4 色调、饱和度和亮度:HSL()

8.1.5 CMYK

8.1.6 颜色名

8.1.7 当前色

8.1.8 浏览器颜色的值

activeBorder

activeCaption

appWorkspace

background

buttonFace

buttonHighlight

buttonShadow

buttonText

captionText

grayText

highlight

highlightText

inactiveBorder

inactiveCaption

inactiveCaptionText

infoBackground

infoText

match

menu

menuText

scrollbar

threeDDarkShadow

threeDFace

threeDHighlight

threeDLightShadow

threeDShadow

windowFrame

windowText

我应该使用哪种颜色句法?

8.2 CSS的度量单位

8.2.1 CSS的长度值

dpi、dpc和dppx

CubeeDoo

8.2.2 角度、时间和频率

8.2.3 CSS的角度度量

度数(Degrees)

梯度(Grads)

弧度(Rads)

转(Turns)

8.2.4 时间(Times)

8.2.5 频率(Frequencies)

CubeeDoo

8.3 避免TRouBLe:属性的简写和值的声明

8.4 小结

第9章 CSS3:模块、模型和图像

9.1 CSS盒模型属性

9.1.1 border

9.1.2 border-style

9.1.3 border-color

使用CSS创建一个三角形

9.1.4 border-width

9.1.5 CSS盒模型

内容

内边距

边框

外边距

9.1.6 box-sizing

外边距

9.2 学习CSS3

9.2.1 border-radius

CubeeDoo中用于iPhone原生样式按钮的border-radius

9.3 CSS渐变

9.3.1 渐变类型:线性渐变或径向渐变

9.3.2 径向渐变

9.3.3 线性渐变

渐变角度和方向

渐变色

9.3.4 background-size

DPI和background-size

9.3.5 条纹渐变

9.3.6 重复线性渐变

CubeeDoo中的渐变

多重背景图像

水晶按钮和hard stop

9.3.7 用于渐变的工具

9.4 阴影

9.4.1 文本阴影

9.4.2 用宽度、溢出和文本溢出来设置文本

text-overflow属性

white-space属性

9.4.3 盒子阴影

9.4.4 整合后的结果:CubeeDoo

第10章 CSS3:变换、渐变和动画

10.1 CSS渐变

10.1.1 transition-property属性

10.1.2 transition-duration属性

10.1.3 transition-timing-function属性

ease或cubic-bezier(0.25, 0.1, 0.25, 1.0)

linear或cubic-bezier(0.0, 0.0, 1.0, 1.0)

ease-in或cubic-bezier(0.42, 0, 1.0, 1.0)

ease-out或cubic-bezier(0, 0, 0.58, 1.0)

ease-in-out或cubic-bezier(0.42, 0, 0.58, 1.0)

cubic-bezier(p1,p2,p3,p4)

10.1.4 transition-delay属性

10.1.5 简写的transition属性

10.1.6 多种渐变

10.2 CSS3变换

10.2.1 transform-origin属性

10.2.2 transform属性

1.translate()

2.translateX()

3.translateY()

4.scale()

5.scaleX()

6.scaleY()

7.rotate()

8.rotateX()

9.rotateY()

10.skew()

11.skewX()

12.skewY()

10.2.3 多种变换

matrix()

10.2.4 渐变变换

10.2.5 3D变换函数

1.translate3d()

2.translateZ()

3.scale3d()

4.scaleZ()

5.rotate3d()

6.perspective()

10.2.6 其他3D变换属性

1.再论transform-origin属性

2.perspective属性

3.transform-style属性

4.backface-visibility属性

10.2.7 综合应用

10.3 CSS3动画

animation-name

animation-duration

animation-timing-function

animation-iteration-count

animation-direction

animation-play-state

animation-delay

animation-fill-mode

10.3.1 关键帧

1.应用动画

2.弹球动画

3.制作小精灵的动画

4.CubeeDoo动画

10.3.2 渐变、动画和性能

第11章 响应性Web设计中的CSS特性

11.1 媒体查询、断点和流式布局

11.2 多栏

11.3 边框图像

11.3.1 设置边框图像

1.border-image-source

2.border-image-slice

3.border-image-width

4.border-image-outset

5.border-image-repeat

6.border-image简写属性

11.4 flexbox

11.4.1 flex属性

11.4.2 利用@supports进行特性检测

11.5 响应性媒体

11.5.1 提供图像

1.Retina®:高像素密度的显示屏

2.background-size

3.数据URI

4.精灵

5.image-set()

6.字体图标

11.5.2 CSS遮罩:创建透明的JPEG

11.5.3 客户提示

第12章 设计移动应用程序

12.1 开始前的考虑事项

简单

可理解

相关

12.2 设计考虑事项

12.2.1 工具:生产率应用程序

12.2.2 娱乐:沉浸式应用程序

1.有趣的娱乐

2.严肃的娱乐

12.2.3 实用程序

12.2.4 什么适合你

12.3 移动平台:丰富的可能性

12.3.1 小型屏幕

12.3.2 较少的内存

管理内存

12.3.3 一次一个窗口、一个应用程序

12.3.4 最小的文档

12.3.5 开发考虑事项

12.4 针对移动WebKit

12.4.1 状态栏

12.4.2 导航栏

1.导航栏的UX

2.导航栏的大小和颜色

12.4.3 开机图像

12.4.4 主屏幕图标

12.5 最少化键盘输入

12.6 保持简明

12.6.1 使之明显

12.6.2 最少化必需的输入

12.6.3 最少化文本

12.7 其他用户体验考虑事项

第13章 把移动设备和触摸作为目标

13.1 缩小尺寸

13.1.1 @viewport

13.2 触摸我

13.2.1 触摸区域

13.2.2 鼠标事件、触摸事件

1.指针事件

2.触摸事件

3.触摸事件的特性检测

13.2.3 伪单击事件

1.点按高亮色

2.消除选择对话框

3.消除图像对话框

4.消除移动镜头(panning)

5.onTouchEnd

6.触摸以进行滚动

13.3 硬件访问

13.3.1 手机移动和方向

13.3.2 设备状态

1.网络连接

2.电池

3.其他API

13.3.3 本机Web应用程序、打包的应用程序和混合应用程序

1.PhoneGap/Apache Cordova

2.Sencha Touch

3.Appcelerator Titanium

13.4 测试

第14章 移动性能

14.1 电池寿命

14.1.1 使用暗色调

14.1.2 使用JPEG

14.1.3 减少JavaScript

14.1.4 消除网络请求

14.1.5 硬件加速

避免重绘和重新排版

14.2 延时

14.2.1 减少HTTP请求的数量

1.浏览器缓存

2.组合式JavaScript文件

3.单个样式表

4.图像精灵

5.图像压缩

6.数据URI/内联图像

7.图标和字符集

8.检查网络请求

14.2.2 减小请求的尺寸

1.最小化基于文本的资源

2.压缩二进制文件

3.利用gzip压缩一切

4.减小图像尺寸

5.忽略框架

6.把Cookie减至最少

7.延迟第三方脚本

8.性能反模式

14.2.3 内存

14.2.4 优化图像

1.权衡CSS的好处

2.GPU的好处和缺点

3.视口:离开视线并不意味着离开头脑

4.最小化DOM

5.内存管理

14.3 UI响应性

14.3.1 触摸事件

14.3.2 动画

14.4 小结

附录A CSS选择器和特征值

A.1 CSS选择器级别3

A.2 CSS选择器简表

A.3 CSS选择器规范

A.4 CSS选择器级别4

累计评论(2条) 3个书友正在讨论这本书 发表评论

发表评论

发表评论,分享你的想法吧!

买过这本书的人还买过

读了这本书的人还在读

回顶部