整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5前端学习之路-从菜鸟到入门到入坑

HTML5前端学习之路-从菜鸟到入门到入坑

知不觉,在千锋武汉HTML5培训学习已经三个月了。最近这段时间,我一直在学习原生js的相关知识,而这周,正好是第二阶段第二个月的考试周。为了过关,在这里进行知识点的回顾和总结。



首先,js的概念是:JavaScript 是一门跨平台、面向对象的动态的弱类型的轻量级解释型语言,是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。应用于 HTML 文档能够在网站上提供动态的交互能力,他不同于Java。

其次,js由三部分构成:BOM、DOM、ECMAScript核心。注意,script标签要放在body上面,需要在其中加上Window.onload。

最后,我们在最近这两周做了来到千锋武汉HTML5培训之后的第一个项目,在这次做项目中,暴露出很多不足,我总结在下面:

这次做项目,遇到很多以前没见过的bug,也通过和同学交流学习,了解到很多以前不知道的小技巧,这些是资料上学不来的,可以说是受益匪浅。在这里,我总结一些自己遇到的bug,解决的附上解决办法,没解决的,希望有看到的大佬可以帮忙解决。

1、一个很容易产生的bug,许多程序猿编写html和css时,都会遇到浮动和定位引起的高度塌陷的问题,我们都知道解决高度塌陷的方法,但是有时写的high了,会不看效果,一直编写,最后打开页面一看,一团乱麻,不仅不好找错误,而且看着乱七八糟,容易产生厌烦心理。这时候,就需要一个方便解决高度塌陷的办法。

解决方法:用我们以前学过的BFC的知识,在每个功能结构下面加一个div,class设置成clear,css样式就写成以前学习的万能清除法,这样就有效避免高度塌陷。

2、轮播图bug。这次项目中,主页的轮播和以前做过的不太一样,小图是三张一起运动,而每张鼠标时,有一个给其他可视兄弟元素添加遮罩的事件,这个用jquery可能很好写,但是我大部分用原生写的,再用jquery就会遇到很多问题,比如下面的span滑块设置了进度条功能,但是不生效,也不报错。

3、购物车总计有问题,点击减少购买数量按钮时,会出现input框中的数字为1,但是总计的价格依然可以减少。



在千锋武汉HTML5培训的三个月让我明白了,自己仍然是井底之蛙,前端的知识博大精深,我不懂的还有很多,希望能通过这次考试,让我可以继续学习新的知识,为自己的将来做准备,争取高薪!

TML5从入门到精通,兄弟连京修随堂笔记(二)HTML的框架结构,每日都有新内容,订阅走一波

HTML5的form标签

问:网站怎样与用户进行交互? 答案:使用HTML表单(form).

表单是可以把浏览者输入的数据传送到服务器端的程序(比如ASP,PHP)的HTML元素,服务器端程序可以处理表单传过来的数据,从而进行一些动作.比如,bbs,blog的登陆系统,购物车系统等.

form 标签 -- 代表HTML表单

form标签是成对出现的,以<form>开始,以</form>结束

常用属性.

action -- 浏览者输入的数据被传送到的地方,如一个PHP页面(dofm.php)

method -- 数据传送的方法

get -- 此方式传递数据量少,但是传递的信息显示在网址上。

post --此方式传送信息多,而且不会把传递信息显示在网址上

enctype -- 表示将数据发送到服务器时浏览器使用的编码类型

application/x-www-form-urlencoded -- 窗体数据被编码为名称/值对.这是标准的编码格式.默认的。

multipart/form-data -- 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分.

text/plain -- 以纯文本形式进行编码,其中不含任何控件或格式字符

HTML5 input标签

input 标签 -- 代表HTML表单的单行输入域

input标签是单独出现的,<input />

属性.

type -- 代表一个输入域的显示方式(分为输入型,选择型,点击型)

name – 此表单项名称

value -- 输入域的值

size -- 输入域的长度

maxlength -- 输入域最多可以输入文字的长度

checked -- 如果是选择型的输入域,代表已经被选择,值为checked

readonly -- 输入域可以选择,但是无法修改 ,值为readonly

disabled -- 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用。如:disabled="disabled"

accesskey -- 表单的快捷键访问方式,如值为h即按Alt+h快捷键。

tabindex -- 输入域的"tab"键遍历顺序

src -- 当使用图片来表示按钮时,代表图片的位置(URI)

alt -- 用来替换提交按钮的图片(当在input的src属性定义的图片无法显示时)提示信息。

type属性 -- 代表HTML表单,单行输入域(框)的表现方式

type属性取值:

text -- 文字输入域(输入型)

password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)

file -- 可以输入一个文件路径(输入型)

checkbox -- 复选框.可以选择零个或多个(选择型)

radio -- 单选框.只可以选择一个而且必须选择一个(选择型)

hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器

button -- 按钮(点击型)

image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src属性)(点击型)

submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性来显示按钮上的文字(点击型)

reset -- 重置按钮,可以把表单中的信息清空(点击型)

select 标签 -- 选择列表标签

select标签是成对出现的,以<select>开始,以</select>结束

此标签中的每对option标签代表一个选择项

属性:

name – 表单项名称

size -- 选择域的高度

multiple -- 可以有多个选择

disabled -- 以灰色显示,在表单中不起任何作用

tabindex -- 使用"tab"键的遍历顺序

许我们经常会碰到这么一副画面:很多产品经理在梳理好了产品架构的脑图之后,都会火急火燎打开原型设计工具Axure,开始进行原型设计工作去了。三下五除二就基本将产品线框图给画完了,然后就屁颠屁颠地跑去和研发工程师过需求,讨论的时候会发现:不是这里有个小问题,就是那里有个逻辑没想明白,整理整理返工,结果下一次又发现有一个流程没有考虑清楚,这样来回反复几次才能将一个产品需求和原型界面给讨论清楚。

其实,这样的场景出现的频率还比较高。想想自己第一次去和公司开发沟通的时候,也是碰到了这样的情况,被开发喷这里逻辑不对,那里漏了一种分支情况的思考,当时那个囧啊,真想找个地缝钻进去。后来才知道,在设计原型之前,其实还少了一个关键的步骤,那就是确定产品的业务流程,梳理产品的流程图。

什么是流程图

从字面来理解,流程图=流程+图。流程,是指特定主体为了满足特定需求而进行的有特定逻辑关系的一系列操作过程;而图呢,就是将这些流程进行显性化和书面化的一种表达。

流程图有时也称作输入-输出图,某种程度上来说,流程图是一种沟通性质的图形化语言。一般会使用一些标准符号代表某些类型的动作,如判断用菱形框表示,具体的操作行为、活动用方框表示,开始和结束用圆角矩形框表示。

但比这些符号规定更重要的,是必须清楚地描述产品业务流程的顺序及使用逻辑。从产品经理的角度来理解,流程图其实就是一个用户使用产品的过程,基本的三要素是“从哪进—做什么—从哪走”。比如用户打开一个电商APP,会有这样一个使用产品的过程:

「搜索商品」→「查看商品详情页」→「加入购物车」→「生成订单」→「开始支付」,以及支付之后的「确认收货」

用户从电商商城的首页进入,通过搜索来找到自己想要购买的商品,了解后将其加入购物车,购买了自己想要的商品,支付结束后便离开APP,待收到商品后又回到APP进行确认收货。

可以看出,只要产品用户在使用我们产品的过程中有其自身的目标和任务,产品流程就会存在。产品经理要做的,就是通过一系列步骤完成任务和流程的梳理,最终目的是帮助用户,完成核心任务。

而且制作产品流程图不仅可以帮助产品经理梳理、完善用户操作使用流程,还能有效降低团队成员间的沟通成本。在实际的工作中,产品经理需要向很多人(尤其是开发人员)描述产品需求和原型界面,借助可视化的流程图,沟通的效率会提高很多,毕竟一份步骤清晰的流程图要比一大段文字直观易懂得多。

常见的流程图分类有两种,一种是业务流程图(Transaction Flow), 一种是页面流程图(Page Flow)。

对于产品经理来说,用的比较多的自然是业务流程图,页面流程图一般是设计师那边使用比较频繁。在工作中,我们经常能够看到两种业务流程图,一种是单纯的用户操作行为流程图,这种流程图往往只涉及一种用户角色,不需要进行跨部门或者跨功能完成某项任务,如下图所示:

另一种则很好区分,俗称为“泳道图”,在样子上也挺像游泳池里的泳道,可以有横向的泳道,也会有纵向的泳道。泳道图在某些文档里会被称为“以活动为单位的流程图”,浮在泳道中的都是一个个活动。泳道图是处理多角色、多系统、多模块的复杂需求的最好方法,它的本质就是希望可以通过角色、系统、模块的划分将复杂的功能梳理切割清晰,因此多模块之间的关联尽可能单一,实际中也很少存在多联系线条的情况,因此如果泳道之间多条关联,最好自己反思下是不是之前的功能模块架构切割的不太合理,导致绘制出来的图不够简洁。

如何确定产品流程

讲完了基础的东西,接下来我们来梳理下,该如何确定产品的流程。

首先我们要设计的是产品的核心功能流程,也就是用户的核心使用路径。拿微博进行举例,微博用户的核心操作路径是这样的:

  • 路径一:登录微博——查看微博动态--转发、点赞、评论微博
  • 路径二:登录微博--发表自己的微博--查看私信,回复微博评论

这是微博用户最常有的两种操作行为,所以你会发现:所谓产品的核心功能流程,就是一个产品对用户产生的价值,用户要感知到这个价值需要完成的最简操作步骤。微博这个产品对用户来说,最大的价值无非就是两个方面,一个是可以碎片化地浏览资讯,一个是可以碎片化地发表自己的动态信息。用户要感知到这两个价值,就必然要做出上述的一系列操作流程和步骤。

所以,在确定产品的主干流程的时候,需要先弄清楚产品的价值到底体现在哪里,用户要完成对这个产品价值的感知,需要付出哪些行为。通过这样一个简单的分析,我们就能得出产品的主流程了。

当然,这里输出的产品主流程,只是一个产品的整体使用流程,具体到某一个功能如何进行操作使用,就需要花费更多的精力去进行细化分解。

那对于某个功能的产品操作流程梳理,我们又具体怎么来做呢?

我建议可以从下面3步着手。

1. 业务调研

如果你是在梳理一个简单的功能操作流程,或者已经比较通用成熟的产品流程,那么只需要好好研究几款产品,就可以知道常规的流程是什么样的,典型如产品的注册登录流程;但如果是梳理一个全新的业务功能流程,尤其是设计企业内部支撑系统的时候,就需要对相关业务进行系统的调研了。

其实调研的过程,倒是和我们小时候写记叙文有点相似,无非就是要解决who,what,why,how,以及where的问题:谁,在什么情况下,做了什么事情,这个事情需要什么前置条件,又输出了什么,这个事情在哪里完成的?基本上只要我们深入到业务环境里去,和业务相关人员好好沟通交流,搞明白这几个问题也不是什么难事。然后把调研结果做一个完整记录,我们的调研就可以算是圆满完成了。

举个例子:假设你老板派你去调研一个商业地产开发商的业务流程,调研的目标是为了给他们提供商铺和业主管理系统。

那么在调研中:

  1. 首先可以要求精通业务流程的人给你系统讲解一遍
  2. 调研具体操作的人,来验证他给你讲解的是否全面和是否存在偏差
  3. 实地观察和记录,可以花点时间走遍整个业务流程,了解各个细节

这里提供的三种方式可以相互结合使用。第一种方法可以让你首先建立一个全局观,了解业务的整体运行逻辑,但对于业务细节问题则不能那么深入。第二种方法比较依赖于问题的质量以及问问题的场景,这就要求我们在提问之前就做好充分的准备工作,有很多结论的不正确其实是因为问错了人或者问问题的方法不对。第三种方法的存在,就是为了在观察中再进行验证。

2. 梳理与呈现

做好了调研工作后,我们就该立即对调研结果进行整理。

首先,明确你要梳理的业务流程的范围,具体是包含哪几个功能模块,涉及到哪些用户角色,这个时候可以先使用一些关键节点,弄一份该业务流程的主干流程图出来;

接下来,就是对上面这个粗的流程图进行分解,好比去拆解一个金字塔,层层分解下去,直到不能分解为止;

最后,就是用流程图将其给画出来,通常来说,会有三种结构的流程图出现——顺序结构、选择结构、循环结构。

3. 评审与确认

一份流程图能否通过评审,关键是看其能否真正反映现实中的业务,评审主要是让业务部门和开发部门参与,如果都觉得没有问题,那么恭喜你,你的流程算是过关了。这里稍微要强调的是,好的流程图具备怎样的一些特征,大致归纳起来如下:

  • 清晰易懂:整个流程图结构清晰,让浏览流程图的人一眼便能看懂主体流程是怎样的,这也体现了为什么要使用标准化的流程图图示语言来进行描绘的用处了;
  • 简单明了:流程图存在的本身意义,就是为了将复杂的东西简单化。如果流程图上面密密麻麻地堆了一堆,可想而知是怎样的一种阅读体验;
  • 完整准确:这就要求产品经理能够考虑到各种情况和逻辑判断,梳理流程图的过程,其实也是一个查漏补缺的过程,评审的意义也在于此,找出有错误的地方,大家一起来完善流程图;

上面说的这三个步骤方法,比较偏向于做后台业务功能的流程梳理和调研,其实对于to c 类的产品来说,方法都是通用的,只不过调研业务部门换成了调研用户,只有更了解用户的操作行为、习惯、心理预期才能做出更好的流程设计。

流程图的绘制工具

制作流程图的工具有很多种,比如,Visio、Axure、Smartdraw、Omnigraffle(Mac)等等,产品经理只需要选择一款适合自己的工具即可。

这里介绍几个常用工具。

1. Visio

Visio是微软推出的一款流程图制作工具,也是目前产品经理最常用的一款流程图工具。通过Visio可以方便、快速地把业务流程、系统实现流程画出来。它本身有很多的组件库,可以很方便的完成各类流程图、结构图和网络图的制作。Visio的另一个特色功能在于它有非常丰富的自带模板。

2. Omnigraffle(Mac)

OmniGraffle是由The Omni Group制作的一款绘图软件,其只能于运行在苹果电脑和iPad平台之上。个人感觉在很多方面,OmniGraffle都类似于微软的Visio,不过绘制出来的任何图表不知为何总会觉得很美,有Mac电脑的产品经理可以下载软件试试。

3. ProcessOn(支持在线协作)

ProcessOn 是一款网页版的在线作图工具,用户只需要有一个浏览器即可制作思维导图、流程图、UML图、界面原型设计、组织结构图等等。这款工具上手非常容易,而且免费,更重要的是省去了安装、授权等各种付费软件的烦恼。作为一款用 HTML5 开发的在线网页版作图工具,ProcessOn一个很大的特色就是可以做到无延迟协作,方便两个或多个人同时对一个文件协作编辑和沟通,对创业团队或者企业办公小组来说,是一款简单易用的工具。

其它常见的图——时序图、状态图

有时候光有流程图,还不能够准确完整地表达清楚业务逻辑和产品需求,这个时候就需要借助时序图和状态图来完成相关的补充说明了。

流程图、时序图、状态图都可统称为UML图,那什么是UML呢?先来看看百科是怎么解释的:

Unified Modeling Language (UML)又称统一建模语言或标准建模语言,是始于1997年一个OMG标准,它是一个支持模型化和软件系统开发的图形化语言,为软件开发的所有阶段提供模型化和可视化支持,包括由需求分析到规格,到构造和配置。 面向对象的分析与设计(OOA&D,OOAD)方法的发展在80年代末至90年代中出现了一个高潮,UML是这个高潮的产物。它不仅统一了Booch、Rumbaugh和Jacobson的表示方法,而且对其作了进一步的发展,并最终统一为大众所接受的标准建模语言。

是不是看不太懂?看不懂才是正常的表现,因为这是面向对象软件的标准化建模语言,简单地说就是一种有特殊用途的语言。

大家有空可以参考《UML基础、案例与应用》详细了解下。

这里就给大家介绍两种常见的图,一种叫时序图,一种叫状态图。介绍这两种图之前,我们先说下什么是对象,什么是类的定义吗?类就是一类事物的总称,那对象呢?对象就是这类事物中的个体,比如手机类,苹果手机就是手机类的一个对象。

1. 时序图

时序图显示对象之间的动态合作关系,它强调的是对象之间消息发送的顺序,同时显示对象之间的交互。时序图的一个用途是用来表示用例中的行为顺序。当执行一个用例行为的时候,时序图中的每条消息对应了一个类操作或引起状态转换的触发事件,如下图所示是一个ATM 用户成功登陆的时序图:

在 UML 中,时序图表示为一个二维的关系图,其中,纵轴是时间轴,时间延竖线向下延伸。横轴代表在协作中各个独立的对象。当对象存在时,生命线用一条虚线表示,消息用从一个对象的生命线到另一个对象的生命线的箭头表示,箭头以时间的顺序在图中上下排列。

2. 状态图

所谓状态图,就是用来描述一个对象的可能状态以及各个状态之间的转换关系的一种图。

上图就是典型的状态图,一本图书经过不同的触发行为或满足一定的条件,就变成了不同的状态,我们在产品设计的过程中,也会经常碰到这样的情况需要用状态图去表示。

熟悉了这么多种流程图,算是为后面的原型设计打下了坚实的基础,下一篇我们来讲具体如何做产品的原型设计。

作者:壹百度(微信公众号:倒退集),在线教育企业服务领域产品经理,创业公司Team Leader。常常自诩是文艺青年和极客青年的结合体,在宅与不宅之间可以自由切换,曾主导多款重量级产品的产品策划和设计工作。

本文由 @壹百度 原创发布于人人都是产品经理。未经许可,禁止转载。


上一篇:HTTP协议
下一篇:Flink SQL TVF之滑动窗口