小全栈初阶编程马拉松

@CreatShare 互联网实验室

@西邮通院科协的大家

@刚没有@到的银

@ ThoughtWorks 学习方法

@ freeCodeCamp 开发者社区

2017-04-08

通院科协与学习小组

活动介绍

活动故事

以我的角度，先讲讲这场活动背后的故事

Long Long Ago

在这个信息爆炸的时代，重要的不是掌握多少知识，而是认识多少掌握知识的人，并以他们作为奋斗的榜样。

CreatShare 互联网实验室

活动故事

还是不够生动？

~看看前年的宣传短片~

ThoughtWorks 暑期特训营

活动故事

为什么要讲这些？

回归到这场活动~

你会需要用到

CreatShare

互联网实验室

ThoughtWorks

西安邮电大学联合创新实验室

* 前端

* 后端

* 产品运营

* 写作

* 分享

* 社区活动

freeCodeCamp 西安

敏捷石墨白板结对

增删改查技术干货

小全栈初阶编程马拉松@活动流程

Creat(e) & Share

Thought & Works

创造和分享

思考与行动

小小游戏好心情

https://www.typing.com/student/test

一切编程，都离不开暴击键盘

第一名の组

有奖励

奖励揭晓

直播一下@暴击键盘

1868

商业“骗局”

Dvorak

左手 57%->47%

212 word/min

科学“迷信”

8 小时

一定要 Hold 住

打字坐姿

正式开始之前~

感谢大家的参与，这次，我学到了很多

@书本之外的东西

* 有机会和实验室学弟、社团部长们合作

* 终于汇总了我两年学到的所有知识

- 编程、社交、写作、运营 -> 全栈

* 面向全校大学生做(wan)直(zhuang)播(bi)的勇气

* 正式成型出书的主意：小全栈学习谱

* 最终打造成一个有趣的 ID 体系

还产生了个项目灵感

* 多人协作同时编辑的在线 PPT~

Web 前端！

前端入门

前端训练

视频观影

项目选择

前端实践

HTML + CSS 历史及语法简介

@计科，大一，马跃伟，CreatShare 互联网实验室

http://slides.com/huabuxiu/deck

从真实世界到前端

理想世界模型

教室门号

花花树树

宿舍走廊

食堂窗口

大前端

不约而同的，一起开启了“大前端之旅”

我的小结

<!-- HTML 标签是由尖括号包围的关键词，比如 <html>，用来描述网页 -->
<html>
    <head>
        <title>这是我的第一个页面。</title>
    </head>
    <!-- Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们 -->
    <body>
        <h1>这是我的第一个大标题。</h1>
        <!-- HTML 标签通常是成对出现的，比如 <b> 和 </b> -->
        <p>这是我的第一个段落。</p>
        <br/>
        <hr/>
        <h2>我比大标题小那么一丢丢</h2>
        <p><a>这是我的第一个链接</a></p>
        <p>别跑，我的头像好帅气</p>
        <!-- 即将插入一个图像，虽然源码的耦合度不同 -->
        <p><img src="https://avatars1.githubusercontent.com/u/19285461?v=3&s=460" width="230" height="230"/></p>
    </body>
</html>

忽视我的高耦合~

HTML

* 标题：<h1></h1><h2></h2>

* 段落：<p></p>

* 元素：块级元素、行内元素

* 属性：class、id、style、title

* 链接：<a></a>

* 图像：<img />

* 表格：<table></table>

* 表单：<form></form>

* 背景：background

* 视频：<video></video>

* 画布：<canvas></canvas>

超文本标记语言

CSS

* 标签选择器：p {}

* 派生选择器：li strong {}

* id 选择器：#center {}

* 类选择器：.center {}

* 属性选择器 [title] {}

* 相对定位

* 绝对定位

* CSS3 动画

层叠样式表

万维网、互联网和因特网

ARPAnet -> Internet

2017 年 04 月 04 日，美国计算机协会（Association for Computing Machinery, 简称ACM）宣布，万维网发明者蒂姆·伯纳斯-李(Tim Berners-Lee）获得 2016 年 ACM “图灵奖”。ACM 在官网给出蒂姆·伯纳斯-李的获奖理由是，其发明了万维网（World Wide Web），世界第一个网页浏览器，以及发明了允许网页扩展的基本协议和算法。

好巧的，有一个新闻

定位自己，高级新手

高级新手是有能力以学习者为中心进行自主学习的人，常常具备学会一个知识点并能够教会他人的能力。

高级新手会对自己的学习内容、学习时间做出选择，和老师分享权力。老师的作用更多的体现在”辅导“而不是”讲授“。

高级新手间会有更多的相互测试，更多的知识反馈。

JavaScript 历史及语法简介

@网络，大一，杨达江，CreatShare 互联网实验室

https://ppt.baomitu.com/d/e3804f96#/

全栈工程师@Phodal の sherlock 全栈技能树

JavaScript

从“属于网络的语言”到“属于全平台的语言”

* JavaScript = ECMAScript + DOM + BOM

* 面向对象编程

* DOM 操作

* JS 库

* Node.js 环境搭建

* JS 之物联网、VR/AR

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

JavaScript DOM 操作

当网页被加载时，浏览器会创建页面的文档对象模型。HTML DOM 模型被构造为对象的树。

通过 id 找到 HTML 元素：
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

var x=document.getElementById("intro");
var y=x.getElementsByTagName("p");
document.getElementById("p2").style.color="blue";

ChromeDevTool

谷歌浏览器开发工具

实战之：获取专业培养计划

var v1 = document.getElementsByTagName("table")[2];
var nameArr = [];
var classCount = v1.childNodes[1].childElementCount - 1;
for (var i = 0; i < classCount; i++) {
    var name = v1.childNodes[1].childNodes[i+1].childNodes[2].innerHTML;
    var nature = v1.childNodes[1].childNodes[i+1].childNodes[6].innerHTML;
    if (nature === "选修课") {
        name += "(选)"
    }
    nameArr.push(name);
}
console.log(nameArr.join("，"));

西邮教务管理系统 http://222.24.62.120/

15 级软件工程专业结果：计算机导论与程序设计基础，高等数学BI，线性代数A，形势与政策1，思想道德修养与法律基础，大学体育Ⅰ。。。。。。

前端训练

freeCodeCamp 西安的彩蛋

* HTML

* CSS

* JavaScript

(如何做的快的话)

* BootStrap

* JQuery

不到一小时就能了解以上知识点

到底，什么是 freeCodeCamp？

Github 全球最大开源仓库·点赞量第一

目前已经发展成为一个 40万＋开发者的社区，通过游戏化的项目实战，来吸引大家学习编程，并在社区内给予实时的帮助，同时，为 NPO 组织提供技术支持。

2017.5.4 Quincy Larson 北京分享

中国首届 “开发者关系” 大会

届时还有 justjavac 等国内外大咖做演讲

中国的大部分程序员

缺少社区精神

极客文化的心之所在

但好在有......为我们指引方向

知乎

FCC 中国

SegmentFault

黑客马拉松

CSDN

博客园

FCC 学习方法

1. 读：MDN 开发者手册

2. 搜：StackOverflow

3. 提问：FCC 聊天室

FCC 做题及答疑

Learn to Code and Help Nonprofits

www.freecodecamp.cn

VIDEO!

Why Our Kids Must Learn To Code?

hush...turn off the light

终于遇见你，小组项目选择

* 博客发布 + 情景(可选)

* 留言板块 + 情景(可选)

* 发朋友圈 + 情景(可选)

商量一下，选一个吧

* 纳新报名 + 实验室(组织者团队已选)

前端实践

听了那么多，该实践了吧~

~分组加入石墨、Trello 团队~

彩蛋爆炸！《小全栈学习谱》

icorvoh.github.io/Little-FSD

中场休息，吃个饭吧！

好累呀

TED 编织我的梦！

你的童年~在哪里~

Web 后端！

从软件工程思考到的全栈工程师

网络原理

后端入门

后端实践

后端训练

项目上线

从软件工程专业思考到的全栈工程师

* 编程通吃者

* 技术布道者

* 终生学习者

全栈工程师之我的所见

软件工程师之我的所见

* 懂产品

* 懂技术

* 懂架构

* 懂设计

全栈工程师的必备素养

一般是指 Web 为核心技能的工程师

全局性思维

现代的Web前端，你需要用到模块化开发、多屏兼容、MVC，各种复杂的交互与优化，甚至你需要用到 Node.js 来协助前端的开发。所以说一个现代化的项目，是一个非常复杂的构成，我们需要一个人来掌控全局，他不需要是各种技术的资深专家，但他需要熟悉到各种技术。对于一个团队特别是互联网企业来说，有一个全局性思维的人非常非常重要。

沟通方法

项目越大，沟通成本越高，做过项目管理的都知道，项目中的人力是1+1<2的，人越多效率越低。因为沟通是需要成本的，不同技术的人各说各话，前端和后端是一定会掐架的。每个人都会为自己的利益而战，毫不为已的人是不存在的。

而全栈工程师的沟通成本几乎为零，因为各种技术都懂，胸有成竹，自己就全做了。即使是在团队协作中，与不同技术人员的沟通也会容易得多，让一个后端和一个前端去沟通，那完全是鸡同鸭讲，更不用说设计师与后端了。但如果有一个人懂产品懂设计懂前端懂后端，那沟通的结果显然不一样，因为他们讲的，彼此都能听得懂。

回看上午爬的数据

数学：高等数学线性代数离散数学概率论与数理统计数学建模

计算机科学（必修）：计算机导论与程序设计基础面向过程程序设计面向对象程序设计数据结构与算法数据库原理及应用编译原理操作系统 UML 与设计模式计算机网络计算机组成原理

计算机科学（选修）：Web 应用开发现代通信网概论专业英语微机原理与接口技术人机界面设计算法设计与分析移动应用开发 C#语言程序设计 Linux 编程技术网络编程技术软件质量保证与测试软件项目管理数据挖掘计算机系统结构分布式系统开发计算机网络规划与设计云计算技术及应用大数据应用技术

编程语言：C、C++、C#、JAVA、Python、PHP、JavaScript 等

设计与技术

头脑风暴 -> 概念图

打造全栈工程师 ID 体系

全栈工程师困境

技术发展的两个方向：纵向和横向

深度和广度

粗读和精度

时间、精力，永恒的话题

血痛的教训：处女座的完美主义

技术改变世界

技术社区联动公益行业 | 极思2016西安之我的回顾

Linux + Apache 历史及语法简介

@网络，大一，周军伍，CreatShare 互联网实验室

https://ppt.baomitu.com/d/03e2780a#/

留下思考

终端输入 ls 的时候，到底发生了什么？

eg:在输入网址后，发生了什么？

为什么要学习后端？

只为一睹 LAMP 与 MEAN 的架构之战

技术革新史

咱在《小全栈学习谱》上讲讲吧。

单页面应用 + Web APP

LAMP 与 MEAN 架构

咱继续在《小全栈学习谱》上讲讲吧。

LAMP = Linux + Apache + MySQL + PHP

MEAN = MongDB + Express + Angular + Node

PHP + MySQL 历史及语法简介

@网络，大一，罗铭，CreatShare 互联网实验室

https://ppt.baomitu.com/d/03e2780a#/

PHP 连接 MySQL

<?

$conn=mysql_connect('localhost','root','');  
//状态  
if(!$conn){  
echo "connection failed";  
exit;  
}  
  
//选择数据库  
$sql='use student';  
//conn通道进行  
$rs=mysql_query($sql,$conn);  
//设置字符集  
$sql='set names utf8';  
mysql_query($sql,$conn);  

?>

MySQL

增、删、改、查

SQL 是用于访问和处理数据库的标准的计算机语言。

网络原理 HTTP 协议

Get 请求

Post 请求

https://baidu.com

可见

隐藏

PHP 收接 GET POST 请求

<?php
header("Content-Type:text/html;charset=UTF-8");   
$a = $_GET['a'];   
$b = $_GET['b'];   
$c = $_GET['c'];   
var_dump($a);
var_dump($b);
var_dump($c);
?>

POST 请求存在于需要隐藏数据时

<form action="foo.PHP" method="GET">
First Name: <input name="first_name" type="text" />
Last Name: <input name="last_name" type="text" />
<input name="action" type="submit" value="Submit" />
</form>

PHP 发送 GET POST 请求

<?php
$url='http://www.jb51.net/';
$html = file_get_contents($url);
echo $html;
?>

<?php
$fp = fopen($url, ‘r');
stream_get_meta_data($fp);
while(!feof($fp)) {
$result .= fgets($fp, 1024);
}
echo “url body: $result”;
fclose($fp);
?>

<?php
$ch = curl_init();
$timeout = 5;
curl_setopt ($ch, CURLOPT_URL, ‘http://www.jb51.net/');
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$file_contents = curl_exec($ch);
curl_close($ch);

echo $file_contents;
?>

爬虫的开始

Postman 实战

http://amazingyufu.cn/

一同前往神奇渔夫的 HOME

user_name sex major email phone

interview_direction date learning_style

后端训练

* 安装 XAMPP 环境包访问 localhost

* 数据库搭建：本地搭建 PHPMyAdmin

* PHP 与 MySQL 的增删改查：一个简单的页面

后端实践

打通所选项目的前后端

项目上线

如果没时间没机会的话

让 @大一罗铭分享一下自己的上线经历

尽请提问~

Q.A.

感谢大家的参与，这次，我学到了很多

@书本之外的东西

* 终于汇总了我两年学到的所有知识

- 编程、社交、写作、运营 -> 全栈

* 面向全校大学生做(wan)直(zhuang)播(bi)的勇气

* 正式成型出书的主意：小全栈学习谱

* 最终打造成一个有趣的 ID 体系

还产生了个项目灵感

* 多人协作同时编辑的在线 PPT~

欢迎订阅，未来更精彩

活动反馈~

什么角度适合合影呢？

小全栈编程马拉松

By hylerrix

小全栈编程马拉松

1,003

hylerrix

Love the world！

github.com/hylerrix

小全栈初阶编程马拉松

2017-04-08

通院科协与学习小组

活动故事

CreatShare 互联网实验室

还是不够生动？

为什么要讲这些？

freeCodeCamp 西安

小全栈初阶编程马拉松@活动流程

Creat(e) & Share

Thought & Works

创造和分享

思考与行动

小小游戏 好心情

https://www.typing.com/student/test

一切编程，都离不开暴击键盘

直播一下@暴击键盘

1868

Dvorak

8 小时

正式开始之前~

感谢大家的参与，这次，我学到了很多

Web 前端！

前端入门

前端训练

视频观影

项目选择

前端实践

HTML + CSS 历史及语法简介

从真实世界到前端

大前端

我的小结

HTML

CSS

万维网、互联网和因特网

好巧的，有一个新闻

定位自己，高级新手

JavaScript 历史及语法简介

JavaScript

JavaScript DOM 操作

ChromeDevTool

实战之：获取专业培养计划

前端训练

到底，什么是 freeCodeCamp？

中国的大部分程序员

缺少社区精神

FCC 中国

FCC 学习方法

FCC 做题及答疑

www.freecodecamp.cn

VIDEO!

Why Our Kids Must Learn To Code?

终于遇见你，小组项目选择

前端实践

中场休息，吃个饭吧！

TED 编织我的梦！

Web 后端！

从软件工程思考到的全栈工程师

网络原理

后端入门

后端实践

后端训练

项目上线

从软件工程专业思考到的全栈工程师

全栈工程师的必备素养

全局性思维

沟通方法

回看上午爬的数据

设计与技术

全栈工程师困境

时间、精力，永恒的话题

技术改变世界

Linux + Apache 历史及语法简介

留下思考

终端输入 ls 的时候，到底发生了什么？

为什么要学习后端？

只为一睹 LAMP 与 MEAN 的架构之战

技术革新史

LAMP 与 MEAN 架构

PHP + MySQL 历史及语法简介

小小游戏好心情