Inhaltsverzeichnis
回复内容:
Heim Web-Frontend H5-Tutorial HTML5移动前端webapp有什么推荐的书籍或者建议?

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

Jun 07, 2016 am 08:44 AM
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实现各种传感器、光度传感器、方向传感器、重力感应等

传感器

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

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

推荐个博客吧,前端学习者应该知道的比较多首页 » 张鑫旭,希望对你有帮助
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So verwenden Sie Python + Flask, um Echtzeitaktualisierungen und die Anzeige von Protokollen auf Webseiten zu realisieren So verwenden Sie Python + Flask, um Echtzeitaktualisierungen und die Anzeige von Protokollen auf Webseiten zu realisieren May 17, 2023 am 11:07 AM

1. Protokollausgabe in eine Datei mithilfe des Moduls: Die Protokollierung kann ein Protokoll auf benutzerdefinierter Ebene generieren und das Protokoll auf einem angegebenen Pfad ausgeben: debug (Debug-Protokoll) = 5) {clearTimeout (Zeit) // Wenn alle Ergebnisse erhalten wurden, 10 Aufeinanderfolgende Zeiten sind leer Protokolllöschung geplante Aufgabe}return}if(data.log_type==2){//Wenn ein neues Protokoll abgerufen wird for(i=0;i

So verwenden Sie den Nginx-Webserver-Caddy So verwenden Sie den Nginx-Webserver-Caddy May 30, 2023 pm 12:19 PM

Einführung in Caddy Caddy ist ein leistungsstarker und hoch skalierbarer Webserver, der derzeit über 38.000 Sterne auf Github hat. Caddy ist in der Go-Sprache geschrieben und kann für statisches Ressourcen-Hosting und Reverse-Proxy verwendet werden. Caddy verfügt über die folgenden Hauptfunktionen: Im Vergleich zur komplexen Konfiguration von Nginx ist die ursprüngliche Caddyfile-Konfiguration sehr einfach. Sie kann die Konfiguration über die bereitgestellte AdminAPI dynamisch ändern. Sie unterstützt standardmäßig die automatisierte HTTPS-Konfiguration und kann automatisch HTTPS-Zertifikate beantragen und konfigurieren Sie sie; es kann auf Zehntausende von Websites erweitert werden, ohne dass zusätzliche Abhängigkeiten in der Go-Sprache geschrieben werden müssen; die Speichersicherheit ist besser gewährleistet. Zunächst installieren wir es direkt in CentO

So implementieren Sie die Formularvalidierung für Webanwendungen mit Golang So implementieren Sie die Formularvalidierung für Webanwendungen mit Golang Jun 24, 2023 am 09:08 AM

Die Formularvalidierung ist ein sehr wichtiger Link bei der Entwicklung von Webanwendungen. Sie kann die Gültigkeit der Daten vor dem Absenden der Formulardaten überprüfen, um Sicherheitslücken und Datenfehler in der Anwendung zu vermeiden. Die Formularvalidierung für Webanwendungen kann einfach mit Golang implementiert werden. In diesem Artikel wird erläutert, wie Sie mit Golang die Formularvalidierung für Webanwendungen implementieren. 1. Grundelemente der Formularvalidierung Bevor wir uns mit der Implementierung der Formularvalidierung befassen, müssen wir die Grundelemente der Formularvalidierung kennen. Formularelemente: Formularelemente sind

Verwendung von Jetty7 für die Webserververarbeitung in der Java-API-Entwicklung Verwendung von Jetty7 für die Webserververarbeitung in der Java-API-Entwicklung Jun 18, 2023 am 10:42 AM

Verwendung von Jetty7 für die Webserververarbeitung in der JavaAPI-Entwicklung Mit der Entwicklung des Internets ist der Webserver zum Kernbestandteil der Anwendungsentwicklung geworden und steht auch im Fokus vieler Unternehmen. Um den wachsenden Geschäftsanforderungen gerecht zu werden, entscheiden sich viele Entwickler für die Verwendung von Jetty für die Webserverentwicklung, und seine Flexibilität und Skalierbarkeit sind weithin anerkannt. In diesem Artikel wird erläutert, wie Sie Jetty7 für die Webentwicklung in der JavaAPI-Entwicklung verwenden.

Echtzeitschutz vor Gesichtsblockierungsangriffen im Web (basierend auf maschinellem Lernen) Echtzeitschutz vor Gesichtsblockierungsangriffen im Web (basierend auf maschinellem Lernen) Jun 10, 2023 pm 01:03 PM

Gesichtsblockierendes Sperrfeuer bedeutet, dass eine große Anzahl von Sperrfeuern vorbeischwebt, ohne die Person im Video zu blockieren, sodass es aussieht, als würden sie hinter der Person schweben. Maschinelles Lernen erfreut sich seit mehreren Jahren großer Beliebtheit, aber viele Menschen wissen nicht, dass diese Funktionen auch in Browsern ausgeführt werden können. Dieser Artikel stellt den praktischen Optimierungsprozess in Videosperren vor diese Lösung, in der Hoffnung, einige Ideen zu öffnen. mediapipeDemo (https://google.github.io/mediapipe/) demonstriert das Implementierungsprinzip des On-Demand-Uploads mit Gesichtsblockierung. Die Hintergrundberechnung des Videoservers extrahiert den Porträtbereich im Videobildschirm und konvertiert ihn in SVG Speichern, während der Client das Video abspielt. Laden Sie SVG vom Server herunter und kombinieren Sie es mit Barrage, Portrait

So konfigurieren Sie Nginx, um sicherzustellen, dass der FRP-Server und das Web Port 80 gemeinsam nutzen So konfigurieren Sie Nginx, um sicherzustellen, dass der FRP-Server und das Web Port 80 gemeinsam nutzen Jun 03, 2023 am 08:19 AM

Zunächst werden Sie Zweifel haben: Was ist FRP? Einfach ausgedrückt ist frp ein Intranet-Penetrationstool. Nach der Konfiguration des Clients können Sie über den Server auf das Intranet zugreifen. Jetzt hat mein Server Nginx als Website verwendet und es gibt nur einen Port 80. Was soll ich also tun, wenn der FRP-Server auch Port 80 verwenden möchte? Nach der Abfrage kann dies durch die Verwendung des Reverse-Proxys von Nginx erreicht werden. Hinzufügen: frps ist der Server, frpc ist der Client. Schritt 1: Ändern Sie die Konfigurationsdatei nginx.conf auf dem Server und fügen Sie die folgenden Parameter zu http{} in nginx.conf hinzu: server{listen80

Was sind Webstandards? Was sind Webstandards? Oct 18, 2023 pm 05:24 PM

Webstandards sind eine Reihe von Spezifikationen und Richtlinien, die vom W3C und anderen verwandten Organisationen entwickelt wurden. Sie umfassen die Standardisierung von HTML, CSS, JavaScript, DOM, Web-Zugänglichkeit und Leistungsoptimierung , Wartbarkeit und Leistung. Das Ziel von Webstandards besteht darin, die konsistente Anzeige und Interaktion von Webinhalten auf verschiedenen Plattformen, Browsern und Geräten zu ermöglichen und so ein besseres Benutzererlebnis und eine bessere Entwicklungseffizienz zu gewährleisten.

So aktivieren Sie den administrativen Zugriff über die Cockpit-Web-Benutzeroberfläche So aktivieren Sie den administrativen Zugriff über die Cockpit-Web-Benutzeroberfläche Mar 20, 2024 pm 06:56 PM

Cockpit ist eine webbasierte grafische Oberfläche für Linux-Server. Es soll vor allem neuen/erfahrenen Benutzern die Verwaltung von Linux-Servern erleichtern. In diesem Artikel besprechen wir die Cockpit-Zugriffsmodi und wie Sie den Administratorzugriff von CockpitWebUI auf das Cockpit umstellen. Inhaltsthemen: Cockpit-Eingabemodi Ermitteln des aktuellen Cockpit-Zugriffsmodus Aktivieren des Verwaltungszugriffs für das Cockpit über CockpitWebUI Deaktivieren des Verwaltungszugriffs für das Cockpit über CockpitWebUI Fazit Cockpit-Eingabemodi Das Cockpit verfügt über zwei Zugriffsmodi: Eingeschränkter Zugriff: Dies ist die Standardeinstellung für den Cockpit-Zugriffsmodus. In diesem Zugriffsmodus können Sie vom Cockpit aus nicht auf den Webbenutzer zugreifen

See all articles