产品经理从零到一技术进阶：不懂代码也能愉快地与开发相处

产品经理从零到一技术进阶：不懂代码也能愉快地与开发相处 产品经理从零到一技术进阶：不懂代码也能愉快地与开发相处 原文链接： http://mp.weixin.qq.com/s?__biz=MjAzNzMzNTkyMQ==&mid=205836688&idx=1&sn=e7f7131702c907cc22cf2f5e8474595d&scene=2#rd 原创 2015-04-14 馨苑 36氪 36氪 36氪 微信号 wow36kr 功能介绍 36氪(36Kr.com)是中国领先的科技新媒体，我们报道最新的互联网科技新闻以及最有潜力的互联网创业企业。 36氪微信号：wow36kr 这是 NEXT 「产品经理从零到一技术进阶：不懂代码也能愉快地与开发相处」线下活动的笔记。主讲者张元一，产品原型工具墨刀的创始人，见证了 Web 开发从 99 年 HTML4.0 到去年 12 月 HTML5 最终定稿这之间整个 Web 开发变迁史的 15 年「码龄」全栈工程师。 NEXT 本次活动收到了近 1000 多个报名，大家对周日线上和线下的互动学习反馈也不错。因此我们将笔记分享出来，希望让更多产品人、创业者够快速了解基本技术知识，更好地把握产品周期与项目进度。当然，你也可以观看网聚直播提供的视频回放：http://wangju.tv/live/3k562amaskvzg 。 概览 以下这张图就是元一分享的干货内容，它基本涵盖了一个初级码农需要知道的所有基础入门知识。但这张图的目的并非用来吓人，这其中的所有技术名词，将以最通俗易懂的方式串联起来—— 即我们上网时的慢动作解析：打开一个网页或 App，这背后都运用了那些技术来让这个网页和 App 的内容呈现在浏览器和手机上；驱动这些动作背后的技术名词都是什么，各自有着怎样的优缺点，彼此间是如何协作和运转的，以及怎样合理地评估技术能力和开发难度。当然，元一也推荐了丰富的学习资料。 这中间涉及的技术知识，前端包括 HTML，CSS，JavaScript，jQuery 以及 Bootstrap ；后端包括 HTTP 服务器，后端编程语言，数据库以及 Cookie 和 Session；移动开发分为原生，混合式，HTML5，以及不同的移动端技术选择在功能和开发成本上的比较。 什么是前端？什么是后端？二者是如何配合运转的？ 前后端的划分，可以简单地理解为凡是运行在用户设备上的技术都可以称为前端技术（ 比如 HTML / CSS / JS，甚至移动设备的 Obj-C / Swift ）；而后端的作用就是负责将这些东西封装在 HTTP 的数据包中然后通过网络传送到前端。当然除了这些前端文件，后端还有一个更重要的职能，即保存和提供用户数据，比如移动端常见的 JSON 就是目前最流行的在后端和前端之间传输的一个文件格式。 前端与后端是如何配合的？如上图，以 Web 端为例，在浏览器输入一个网址后，浏览器向服务器发送了一个 HTTP 请求；服务器通过一个 HTTP 响应，把显示这个网页所需要的资源传回给了浏览器。而需要在浏览器中执行的技术，HTML / CSS / Javascript 等就叫做前端；需要在服务器端执行的、通常我们看不到技术就叫做后端。

…
READ MORE

jQuery学习笔记3——写的状态板简单实例

jQuery学习笔记3——写的状态板简单实例 http://jsfiddle.net & jQuery.com & tutorial: http://w3school.com.cn/ , http://www.codecademy.com/ Congratulations! You used jQuery events to build a status update tool. You can type messages and post status updates A counter keeps track of the number of characters left The Post button is only enabled when there is a message that is 140 characters or less Great work! Next let’s learn more about how to use jQuery to create animated transitions. HTML: 1. <!doctype html> 2. <html> 3. <head> 4. <link href="http://s3.

…
READ MORE

jQuery学习笔记2——温故+知新

jQuery学习笔记2——温故+知新 开始之前：http://docs.jquery.com/ 是jQuery文档的网站， https://jsfiddle.net/是js的在线验证工具。 如果你没有html,CSS,js,jQuery基础，请学习它们先。 Introduction Web pages made withHTML andCSS display static content. They don’t respond to user actions like clicking a mouse or typing a key. JavaScript andjQuery are used to make web pages interactive. JavaScript is a programming language used to create web pages that change in response to user actions. jQuery is a collection of prewritten JavaScript code that lets us easily create interactive effects on our site. 1. 介绍一个实际的例子，可以在https://jsfiddle.net/上得到验证。 这个例子是侧面菜单的点击滑入效果： 1. <html> 2. <head> 3. <link href="//maxcdn.

…
READ MORE

jQuery学习笔记1

jQuery学习笔记1 开始之前：http://docs.jquery.com/ 是jQuery文档的网站， https://jsfiddle.net/是js的在线验证工具。 1.首先复习一下html, css, js三个文件的协同作用 html负责内容elements和骨架tags,div css负责格式样式大小、颜色等 js负责动作效果，操作html JQuery是一个面向javascript的工具库，基于DOM-Document Object Model文档对象模型，通过使用jQuery可以方便实现效果。 1.1-html包含css与JavaScript的基本骨架代码 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title></title> 5. <link rel="stylesheet" type="text/css" href="stylesheet.css"/> 6. <script type="text/javascript" src="script.js"></script> 7. </head> 8. <body> 9. <div id="red" ></div> 10. </body> 11. </html> 2.好，让我们开始接触jQuery Getting Started Next, we’ll need to start up our jQuery magic using the $(document).ready(); syntax you’ve seen. It works like this: 1. $() says, "hey, jQuery things are about to happen!"是把()内的东东转化成jQuery的object,从而有后面的.ready这个method 2. Putting document between the parentheses tells us that we're about to work our magic on the HTML document itself.

…
READ MORE

Javascript学习笔记2

Javascript学习笔记2 before we get started, let’s review the way we Create a Class: 开始之前，我们先复习一下Class的建立方式： function Person(name,age) { this.name = name; this.age = age; } // Let's make bob again, using our constructor var bob = new Person("Bob Smith", 30);* 1 * 2 * 3 * 4 * 5 * 6 * 7 1.注入method into Class Prototype to Rescue – 实际是注入method into Class，要注意对比独立于Class之外的function也能实现类似的。不过原理不同。 比如： function Dog (breed) { this.breed = breed; }; var bark = function(){ //这种就是独立于class之外的，与后面object就无关了。 console.log("Woof"); }; // here we make buddy and teach him how to bark var buddy = new Dog("golden Retriever"); //Dog.

…
READ MORE

Linux驱动程序安装步骤(包括PC上及开发板上)

Linux驱动程序安装步骤(包括PC上及开发板上) 来源：http://blog.csdn.net/hwmt2012/article/details/13016213 分类： LINUX 一.PC机上Ubuntu9.10系统下 驱动程序源码及Makefile如下： #——源程序——# #include <linux/module.h> #include <linux/init.h> static int __init hello_init()//“__init”使hello_init()函数放到初始化代码段里 { printk(“Hello, driver!\n”); return 0; } static int __exit hello_exit() { printk(“Goodbye, driver!\n”); return 0; } module_init(hello_init); module_exit(hello_exit); #——Makefile——# KVERS = $(shell uname -r) Kernel modules obj-m += hello.o Specify flags for the module compilation. #EXTRA_CFLAGS=-g -O0 build: kernel_modules kernel_modules: make -C /lib/modules/$(KVERS)/build M=$(CURDIR) modules clean: make -C /lib/modules/$(KVERS)/build M=$(CURDIR) clean 2.驱动程序编译、安装及结果显示： a.在第一个终端里 root@book-desktop:~# make //生成hello.ko b.在第二个终端里 root@book-desktop:~# tail -f /var/log/messages //查看日志文件内容，-f选项使之不断刷新显示 c.在第一个终端里 root@book-desktop:~# insmod .

…
READ MORE

JavaScript在线集成开发环境IDEs和在线学习工具

JavaScript在线集成开发环境IDEs和在线学习工具 来源： http://en.wikipedia.org/wiki/Online_JavaScript_IDE 所以要多用wikipedia啊。。。。 在线集成开发环境： cloud9 codenvy koding.com pastebin 在线学习工具： codecademy.com www.w3school.com.cn jisuanke.com jikexueyuan.com 在线调试工具： http://jsfiddle.net/ 参考：http://www.ruanyifeng.com/blog/2012/02/6_online_playgrounds_for_web_developing.html Online JavaScript IDE From Wikipedia, the free encyclopedia An online JavaScript IDE (or browser based JavaScript IDE, JavaScript live coding environment, web playground, JavaScript sandbox) is an integrated development environment (IDE) that is hosted in a browser, with an aim to ease JavaScript, HTML, and CSS based web development. Generally, they allow users to edit JavaScript code in the browser, and see the results of executing the code.

…
READ MORE

Javascript 学习笔记1

Javascript 学习笔记1 所有有“注意”的地方都是曾犯过的错误，要Ctrl+F搜索出来反复强化。 了解几个固有功能： 1. myString.substring(1,2); //extract substring 2. confirm("Do you want to continue?"); //ask user for confirm 3. prompt("What's your age?"); //ask user for type in 4. console.log("Hello worldd!"); //Print out the content 5. var myVariable; //declare a variable 6. declare a function: //声明一个函数： var myFunktion = function(input_num){ var val = input_num/3; console.log(val); }; // use myFunktion: myFunktion(6); //又如：======== var greeting = function(name){ console.log("Great to see you," + " my dear " + name); }; greeting("sonictl"); =========================== 7. 声明一个空数组： var hits = []; 8.

…
READ MORE

Linux配置和管理msyql命令

配置和管理msyql： 1. 修改mysql最大连接数：cp support-files/my-mediuf，vim my.cnf，增加或修改max_connections=1024 关于my.cnf：mysql按照下列顺序搜索my.cnf:/etc,mysql安装目录，安装目录下的data。/etc下的是全局设置。 2. 启动mysql：/usr/local/mysql/bin/mysqld_safe –user=mysql & 查看mysql版本：mysqladmin -u root -p version 注：网上安装或者二进制安装的可以直接使用如下命令启动和停止mysql: /etc/init.d/mysql start|stop|restart 3. 停止mysql：mysqladmin -uroot -ppassw0rd shutdown 注意，u,p后没有空格 4. 设置mysql自启动：把启动命令加入/etc/rc.local文件中 5. 允许root远程登陆： 1）本机登陆mysql：mysql -u root -p （-p一定要有）；改变数据库：use mysql; 2）从所有主机：grant all privileges on . to root@"%" identified by "passw0rd" with grant option; 3）从指定主机：grant all privileges on . to root@"192.168.11.205" identified by "passw0rd" with grant option; flush privileges; 4) 进mysql库查看host为%的数据是否添加：use mysql; select * from user; 6. 创建数据库，创建user： 1) 建库：create database test1; 2) 建用户，赋权：grant all privileges on test1.

…
READ MORE