Add tutorial 1

OUTLINE.md

@@ -0,0 +1,194 @@
+# Web ABC Outline
+
+## Topic 1 从 ABC 开始认识 Web
+
+主题：
+1. 概念：与网站交互的原理（电脑、浏览、互联网、服务器）
+2. 概念：网站的地址与页面的映射
+3. 前端：页面的超文本表示
+4. 前端：简易 HTML（段落、基本布局）
+5. 前端：表单与页面交互
+6. 后端：页面的渲染原理
+7. 后端：交互信息的获取 ($_GET)
+8. 后端：PHP 简易语法
+9. 程序：语言
+10. 程序：输入、输出
+11. 程序：变量
+12. 程序：控制流
+13. 程序：字符串
+14. 运维：搭建 XAMPP
+
+### Tutorial 1-1 什么是 Web
+
+- 目标：
+  1. 知道互联网是什么
+  2. 知道网站是什么
+  3. 理解网站通过浏览器访问
+  4. 知道不同的网站地址对应着不同页面
+  5. 知道网页的交互等同于浏览器与服务器交互
+- 内容：
+  1. 网站的概念
+  2. 地址 (URL) 的概念
+  3. 浏览器的概念
+  4. 互联网的概念
+  5. 服务器的概念
+
+### Tutorial 1-2 让一切运转起来
+
+- 目标：
+  1. 知道网页的编码方式（不涉及 UTF-8）
+  2. 知道请求与响应的概念
+  3. 知道服务器响应 Web 网页的原理
+  4. 知道 HTML
+  5. 知道 <br> 标签
+  6. 知道 localhost
+- 内容：
+  1. 搭建 XAMPP
+  2. 建立 HTML 文件与浏览
+  3. 发生了什么（请求与响应）
+  4. 服务器返回了什么（源代码）
+  5. HTML 与富文本
+- 实验：
+  1. 输入一个无效地址，出来什么页面？
+  2. 不输入 /index.html，出来什么页面？
+  3. 去掉 <br> 会发生什么？加入空格会发生什么？
+
+### Tutorial 1-3 让页面活起来
+
+- 目标
+  1. 理解服务器调用后端程序的原理
+  2. 认识编程语言
+  3. 知道 Query String
+  4. 知道常见的后端语言
+  5. 理解 HTML 的嵌套语法
+  6. 知道 form, input, button 标签
+  7. 理解表单的概念
+  8. 知道 GET 的概念
+- 内容：
+  1. HTML 的嵌套语法
+  2. form 的实现
+  3. 发生了什么（通过地址栏讲解表单）
+  4. 让页面活起来（编写 PHP 代码，后端程序的工作原理）
+  5. 关于后端语言（列表、比较）
+- 实验：
+  1. 把 method="get" 改成 "post"，发生了什么？怎样才能让 PHP 正常工作？
+  2. 把 type="text" 去掉，发生了什么？改成 "radio", "checkbox", "password", 发生了什么？
+  3. 修改 name="xxx"，看看地址栏的变化。
+  4. 如何传递多个参数给服务器？
+
+### Tutorial 1-4 让页面漂亮起来
+
+- 目标
+  1. 理解 HTML 的标题 <h1>-<h6> 和段落 <p> 元素
+  2. 通过 align="left/right/center" 设置样式
+  3. 了解 <br> 与 <p> 的区别
+  4. 知道闭合标签和自闭合标签
+  5. 了解 <a> 标签的作用
+  6. 知道相对路径（不详细解释）
+- 内容：
+  1. 尝试新的布局方式：标题和段落
+  2. 为文字添加样式（居中）
+  3. 回顾所有标签（闭合、自闭合）
+  4. 在页面间跳转（锚标签、相对路径）
+- 实验：
+  1. 尝试在 <br> 中插入内容 (<br>xxx</br>)，发生了什么？
+  2. 如果在 <a> 的链接中写上了 ".."，会发生什么？
+  3. 如何让 <a> 也能够居中？
+
+### Tutorial 1-5 让页面联系起来
+
+- 目标：
+  1. 理解 PHP 渲染页面的原理
+  2. 理解 PHP 的 <?php 标记
+  3. 理解 PHP 的变量作用域
+  4. 理解程序的控制流
+  5. 理解程序的条件控制语句
+  6. 理解字符串与字符串连接符
+  7. 理解 $_GET 的概念与多参数的获取方法
+  8. 理解网页间的逻辑，区分静态网页与动态程序
+- 内容：
+  1. 程序是如何执行的（控制流）
+  2. 程序的基本控制流（顺序、条件）
+  3. 渲染是什么（<?php 语法）
+  4. 再谈 GET（多参数）
+  5. 让页面联系起来（页面逻辑）
+- 实验：
+  1. 感受一段 `<?php if (xxx) { ?> xxx <? } ?>` 的代码，会出现怎样的渲染结果？
+  2. 感受 `if (xxx) { $a = 1; } echo $a;`，为什么能够正确输出结果？
+  3. 在表单中尝试输入 `<strong>xxx`，发生了什么？如何输出正确的结果？查阅资料以获得答案。
+
+### Tutorial 1-6 示例：活动报名
+
+- 目标
+  1. 复习概念
+  2. 理解前端、后端的角色
+  3. 实现较复杂的页面逻辑
+  4. 知道错误处理
+  5. 知道如何读写文件
+- 内容：
+  1. 让我们回顾以下（复习前后端流程）
+  2. 实现一个报名网站（逻辑整理）
+    - 有多个活动
+    - 每个活动的报名信息相同
+    - 报名信息需要检查
+    - 需要有页面显示已报名的信息
+  3. 在哪里保存数据（读写文件）
+  4. 前端页面的实现
+  5. 后端逻辑的实现
+  6. 还有哪些没顾及的地方？
+    - 表单的数据没了？（session 管理）
+    - 错误处理
+    - 更好的数据管理
+    - 浏览器端的交互 (JavaScript)
+
+### Reference 通过 XAMPP 搭建本地网站
+
+- 内容
+  1. XAMPP 的介绍
+  2. XAMPP 的下载
+  3. XAMPP 的安装
+  4. XAMPP 的目录结构（简易版）
+  5. XAMPP 的常见问题
+
+## Topic 2 向良好的体验迈进
+
+主题
+1. 前端：样式
+2. 前端：布局（表格式、css 式）
+3. 前端：组件设计
+3. 前端：客户端交互（JavaScript）
+4. 前端：表单交互 (Ajax)
+5. 前端：页面效果 (DOM, jQuery)
+6. 后端：表单的提交与接收 (GET, POST)
+7. 后端：高级控制流（循环、函数）
+8. 后端：数组、关联数组
+9. 后端：JSON (轻量的数据格式)
+10. 后端：Session
+11. 程序：正则表达式
+12. 程序：过程式风格
+
+## Topic 3 构建复杂的交互应用
+
+主题：
+1. 前端：样式框架（Bootstrap)
+2. 前端：SPA (Angular.js/Vue.js)
+3. 前端：响应式 (仅介绍)
+4. 后端：数据库 (MySQL)
+5. 后端：SQL
+6. 后端：简单业务逻辑
+6. 后端：路由
+7. 运维：服务器环境的搭建
+8. 架构：前后端分离
+9. 后端：HTTP / REST（仅介绍）
+10. 平台：Node.js
+
+## Topic 4 建立高效的开发体系
+
+主题：
+1. 前端：资源管理
+2. 前端：模块化
+3. 后端：模板、模板引擎
+4. 后端：MVC、框架
+5. 程序：面向对象编程
+7. 运维：Vagrant / Docker
+8. Both：依赖管理

PROJECT.md

@@ -0,0 +1,82 @@
+# Web ABC Funny Ver.
+
+## Lab 1 生命始于折腾：个人博客
+
+主题
+1. 概念：折腾与学习兴趣的关系
+2. 概念：Web 开发的知识体系结构
+3. 概念：Web 开发的前沿技术
+4. 指南：Web 学习的入口点
+5. 指南：如何搭建网站
+6. 实例：如何搭建利用 Jekyll 个人博客（非概念性学习）
+7. 运维：命令行
+8. 概念：环境配置
+9. 工具：Git
+10. 工具：Markdown
+
+## Lab 2 从浏览器开始改变：电商比价扩展
+
+主题
+1. 概念：浏览器工作的原理
+2. 概念：请求与响应
+3. 概念：前端的透明性
+4. 概念：页面的基本结构
+5. 前端：HTML 基础（页面元素）
+6. 前端：样式基础
+7. 前端：布局基础
+8. 前端：DOM 基础 (jQuery)
+9. 前端：通过 Ajax 与后端通信
+10. 前端：CSS 选择器基础
+11. 实例：购物比价扩展
+12. 工具：View Source
+13. 工具：开发者模式 - 审查元素
+14. 工具：开发者模式 - 网络
+15. 应用：浏览器扩展的工作原理
+16. 指南：从模仿中学习编程
+
+## Lab 3 让数据变得惊艳：豆瓣导演排行
+
+TODO: 感觉这个 Lab 比上一个难好多额
+
+主题：
+1. 概念：HTTP 协议
+2. 概念：请求与响应的结构
+3. 概念：页面的跳转与关联
+4. 概念：爬虫的基本原理和步骤
+5. 概念：用户代理 (User Agent)
+6. 概念：Cookie 与 Session
+7. 概念：防抓取的基本原理
+8. 概念：类库与依赖 (pip)
+9. 概念：JSON
+10. 概念：文本处理、正则表达式
+11. 前端：D3.js
+12. 后端：脚本语言的概念 (Python)
+13. 概念：面向对象编程 (OOP)
+14. 工具：Fiddler
+15. 工具：Postman
+16. 概念：文件与 I/O
+17. 概念：大数据的处理流程 (数据清洗、数据过滤、……)
+18. 实例：豆瓣导演排行榜
+
+## Lab 4 让页面飞起来：实时弹幕墙
+
+TODO: 前端是不是太难了额，还有是突然转 Node.js，不过似乎 WebSocket 这里没什么靠谱的？
+
+主题：
+1. 概念：网页交互的原理
+2. 概念：实时通信的实现 (Poll / Broadcast)
+3. 概念：任务队列 (Queue)
+4. 概念：Web App / 桌面应用程序
+4. 概念：后端程序的工作原理
+5. 前端：单页应用程序 (SPA)
+6. 前端：CSS 动画
+7. 前端：异步编程
+8. 前端：Electron 的工作原理
+9. 前端：响应式设计
+10. 前端：Vue.js
+10. 工具：Node.js 
+11. 后端：Express.js
+12. 后端：路由
+13. 后端：模板、模板引擎
+14. 后端：MVC
+15. 实例：实时弹幕墙

README.md

@@ -1 +1,9 @@
-# web-abc
+# Web ABC
+
+Learn Web development from ABC.
+
+This is a tutorial designed for Web development learning from basic concepts at ease. Efforts are made into the integration of all the elementary concepts and skills of Web developing, both in front end and back end. We hope that the Web ABC tutorial can be a quick and useful guide before you get in touch with intermediate and advanced themes in Web developing.
+
+从 ABC 开始学 Web 开发！
+
+这是一个从基本概念出发的旨在轻松学习 Web 开发的教程。我们努力尝试将 Web 开发中前端与后端的基本概念与技术融合在一起，以一种全新的方式呈现出来。希望这份教程能够在你进阶和深入了解其他高级主题前成为一份有益的快速指南。