手机网页入门过程的总结

时间：2023-05-25 18:33:02 | 来源：网站运营

时间：2023-05-25 18:33:02 来源：网站运营

手机网页入门过程的总结：第一次做手机网页的全过程的总结



制作背景：本人是设计者专业程序也是从这个网站开始入门的，这个网站是单纯是一个毕业设计不喜勿喷。

写作目的：希望和我一样的小伙伴少走点弯路，其次是自己做个总结（听说这是一个里程碑因为我想去玩玩ios了 嘻~）

在完成之前有人说我给自己挖了很大一个坑，因为几乎是很难在2个多月完成所有工作的，况且我是零基础的艺术类小白，也有人说这样一个应用包含了策划、文案、设计、程序好几个部门的工作一个人是做不完的。确实，我没能够做完但至少做的差不多。（数据库部分，没能在毕业前做完是一个很大的遗憾）

由于我是程序小白所以在学着入门时 确实绕了不少弯，说不准现在还在哪个弯道上，不过就我的学习过程而言，书是很很重要的，在你选择用什么软件之前一定要先选好相应的书。或是在网上找到一篇完整的文章，一定要完整。关于书我的建议是一定要新，14年之前的就不考虑了。然后在阅读方面不用全读看个概况就好，然后有问题的时候翻书，翻到下一个步骤的关键词就好去百度谷歌必应了。重要的是关键词。那是你进入下一个level的KEY。


————（我是一条可爱的分割线）————



前期准备

要做这样一个设计，前期准备很重要但不是所谓的线框图，不是流程图，不需要准备少项所谓的专业技能。唯一要做的是考虑你准备做一款什么样的软件在有什么功能几个功能之间有些什么逻辑关系这就够了。其他的都可以边做边学。（当然最好你是个学设计这样你至少有一定图形图像的基础知识比如PS,AI还有什么是矢量，像素什么的）

• 配置本地环境：
  

个人不太用DW其实txt文档就可以写程序了，不过我还是推荐Sublime Text切手动档写代码的时候十分方便。然后是浏览器Chrome+Firefox都准备起来，很多时候一些基本错误我都是用chrome的超能力来排错，然后用firefox看实际效果。

如果有数据库需要的话 XAMPP+MYSQL+phpmyadmin还不错，当然如果暂时用不到什么数据库就可以不考虑了。（就是用户数据什么的，如果占很少一部分就用JS或其他办法解决吧）


最后是GIT，这个是一个关于习惯的问题.git可以记录你的所有的改动，有必要的时候用git提交一下以后有问题可回过头来找对比不同时间段的文件。git会让你的桌面项目文档变得整洁有序。

• 配置远程环境

远程环境的配置看你个人具体的需求吧，因为我们学校要布展所以我弄了一个阿里云服务器（大学期间9.9一个月）灰常实惠，服务器的配置LAMP. linux+apache+mysql+php、书上推荐的是mariaDB（非Oracle）但是我用的是mysql（Oracle）其实是差不多的。具体的配置其实找到一篇完整的文章就照着做就很快完成了。之后就可以用FTP了（我用的是CuteFTP 9)书籍推荐

1. 《PHP和Mysql Web 开发从新手到高手》[澳]Kevin Yank,里面包含了在不同环境下配置本地环境，还有Mysql，php的基本知识。
   
2. 《Ubuntu Server 最佳方案》第二版 冷罡华，这边书是关于远程环境的配置，也就是配置服务器的所需要的大部分知识。

进入状态

进入状态之前我建议稍微看点CSS html js 的书籍简单的就好，比如 Jon Duckett的两把刷子HTML&CSS 和 Javascript&jquery。这两本好在图多，案例多，结构清晰 。然后是多看看别人的UI作品 pinterest，花瓣，behance 等等（据说在微博搜索也会有不错的发现）。看作品很重要，因为真的很重要，没事多看看拯救你的审美水平。不然你就会和我一个下场。嘻嘻先看看我的吧。

这还是改了好多次的成果。

了解完以上内容后就要开始挖矿或者也可以叫捡垃圾去了。

“www.htmleaf.com” jq之家里面有很多CSS JQ JS 动画的范例拿下来然后改改就是好东西。

然后是懒人图库Font Awesome什么的不是所有东西都要自己做也不是所有东西都是捡到都可以直接用的。提前学学js/jq/css就是这个用处改起来能更得心应手

制作部分

在设计方面，我只是初略的话了下草图（那种线框图定义位置就好了），然后就用Html开始基本的布局了，然后把各种捡到的垃圾往上怼然后在删再改。时间多的话可以自己亲手撸几个CSS动画。在我的印象里移动端对CSS的支持高于JQ动画 前者更流畅，有精力手动做动画也可以涨点动画的基本知识，了解动画12原则基本上就能上天了，剩下的就是铺代码了代码很简单就是很繁琐这是我的体验。

程序方面：滑动，响应，刷新这几个是做在做这个毕业设计时候的三个大头我试过很多插件。如果你在处理这些问题时遇到问题，可以试试我的解决方案。

1. 滑动我用是iscroll5 使用中有很多不愉快但是还是解决了我的大部分需求。具体你可以去github fork我的项目看看呗。
2. 响应： fastclick如果你的用户是苹果手机那这个可能是挺重要的一个插件，按钮、链接点击会有默认响应时间在PC上算是一个人性的设定但是在移动端就是噩梦了。安卓处理方法比较简单百度一下就有了好像就是在头部加条代码。
3. 刷新：因为是web应用所以我的导航栏不能跟着页面刷新。所以我用了点AJAX。用JQ在页面跳转的时候引入AJAX就好了。实际操作起来有时候比较费心但是只要有耐心就不是问题，呵呵。（之前介绍的 Javascript&jquery 里面有AJAX的桥段可以去看看）

然后是几个常用的库 jquery-2.2.1.js（这个是必须的吧），jquery.mobile-1.4.5.js（这个就比较难用了改起来很麻烦），bootstrap.js（我的天，我竟然用了这种插件）fastclick.min.js（这个之前提到了）iscroll.js（对没错，滑动全靠他）

我的那个服务器已经已经停了。因为我已经毕业了。（续不起费）

所谓的弯路

弯路1 是域名，我买域名后来发现没卵用，来回备案花了不少时间。不过在阿里备案的过程还是比较顺利的唯一的小tip就是 往回寄核验单的时候要找一家靠谱的快递公司。

弯路2 phonegap 这虽然是个好东西 “一次开发到处使用”对没错你的web可以被转成应用商店的APP我学会了如何使用但是没派上用处，如果你时间只有2，3个月还是不要走这条路。

弯路3 数据库方面的知识，我学了没用上，如果你效率够高我想这应该不是弯路，数据库对你的webapp在体验上会有很大的提高。

弯路4 视频教程 视频教程的适用范围在设计方面学PS AI 是捷径，但是程序还是百度、论坛什么的靠谱。什么极X学院 别去了 除非你找不到下一个level的入口。

然后附上我的项目文档

GitHub - JonLeeds/uuger.cn: 毕业设计

有问题找我知无不言，嘻嘻。我准备入ios大坑要同行的也请告知。

以下是两本之前推荐的书的网页部分

Learn HTML & CSS

Learn JavaScript & jQuery