WEB开发之路——基础部分

WEB开发之路

受BBC的《BBC: Brain Story》和《BBC: The Brain - A Secret History》的影响,我一直有志于探究人类大脑,2015年的暑假,到华南理工大学的国家重点实验室-生物医学工程实验室,实习了一个月的时间,学习大脑图像处理—Matlab语言来处理大脑的灰质和白质的图像,核心知识在计算机方面,只有掌握计算机这门工具,才能更好的分析大脑。因此,在我的坚决要求之下,2016年的暑假,家人给我联系了一家软件公司实习,从最有活力的WEB开发入手。

我基本上是一个软件开发“小白”,还要留出半天时间学习英语,每天分配到开发的时间为半天,2个月的假期,实际学习时间为1个月。如何将我带入软件开发的圣殿,公司安排了经验丰富的工程来给我安排合理的计划,并给予指导。正好公司也在培训新员工,我便混迹其中。WEB开发从前端开发入手,包括页面设计、制作和开发,采用案例式教学:每次学习完一个知识点,都要提交代码,并写出总结。

参照公司的整个Web开发学习计划,是五个阶段,每个阶段一个月时间,我只完成了第一个阶段:WEB开发基础知识的学习,分为五个步骤,也就是五个知识点。

第一步:学习使用Axure软件,仿真实现vogue首页案例。使用Axure软件提供的组件,来实现感应式菜单、旋转木马特效、anchor和form四个部分。掌握了这些功能,就能够完成高保真原型开发。同时还要理解组件、页面构成、消息和事件概念,为后续的开发预备知识。

这一步完成比较顺利,大概十天时间掌握大部分内容,技术难点需要指导完成。20160708完成并上传到个人博客。

第二步:学习HTML和CSS知识,仿真实现163首页案例。采用Webstorm工具开发,掌握常用标签、CSS属性和选择器。HTML参照菜鸟教程学习基础部分,计划两天完成,结果限于本人记忆力不佳,化了四天时间。CSS也是参照菜鸟教程学习基础部分,实际花了三天时间,初步理解了两部分知识。在仿真163网站的时候,刚开始难以理解如何使用,不知道如何下手,进展缓慢。经过导师的帮助,经过三天时间,将CSS文件从HTML文件中分离出来,并实现2个DIV块。但旋转木马等没有实现。

这一步没有第一步顺利,还算是完成了,时间定格在20160731。后面开发还会用到这些知识,逐步提高吧。这次没有达到导师的要求,但我自己还比较兴奋,实现了人生第一个主页。

第三步:学习JavaScript基础知识,实现成绩计算和打分案例。掌握JavaScript语言的语法、数据类型、语句、函数和内置函数的使用。参照《JavaScript入门经典》学习,网上查找协助理解,基本掌握JS语法,由于家庭聚会,耽误了几天的学习。没有实现开发案例。后面继续学习。

第四步:学习DOM/BOM开发,实现竞赛题案例。掌握DOM和BOM的基础结构和增删改查四个API的操作。参照《DOM编程艺术》学习,不足部分网上查找补漏。界面设计、数据搜集和开发100道竞赛题。

这阶段的学习,个人最满意,开发很顺手,实现效果不错,认真的态度获得导师的认可。完成于20160816,总结再次上传个人博客。

第五步:学习Ajax开发,完成获取数据部分功能案例。掌握XHR异步/同步、HTTP命令和数据格式。参照《Ajax权威指南》学习,较快掌握。开发案例的时候,普通网站取数,如“163.com”汉字能正常显示,“电影天堂”网站获得的汉字都是3F3F之类的数据,遇到字符集不兼容的问题,一直没有找到合适的解决方案。期间在导师用phantom或者node都能获取。得到都是3F3F之类的数据。之后采用二进制读写,不让浏览器解析汉字才解决问题,我一直认为是“电影天堂”网站反爬虫技术在作祟。

这个阶段学习掌握和HTTP的命令,比HTML更进一步理解了WEB。遇到字符集问题,学会了攻关的一般方法。20160827开学,代码还没有完成,总结也没有提交。还要抽出时间来完成,实现阶段成果。

至此,完成【web1.0】的基础学习。整个内容都是在围绕浏览器展开,HTML、CSS、JavaScript函数、DOM和AJAX都是浏览器来解析。后续将转到JavaScript为中心的学习。据了解,之后的四个阶段包括的内容如下,第二个阶段:JS前端开发框架学习,包括Bootstrap/JQuery/Handlebars/Angular等内容。第三个阶段:JS后端学习,包括Node/Express/Sockit.io/MongoDB。第四个阶段:单页面应用,将后端功能迁移到前端。以及开发全流程学习,包括:开发、构建、测试、发布和维护。第五个阶段:HTML5和CSS3开发。

时间: 2024-11-03 03:47:01

WEB开发之路——基础部分的相关文章

Java Web开发环境搭建基础[Windows篇]

1. 准备软件: JDK:(jdk-6u10-rc2-bin-b32-windows-i586-p-12_sep_2008.exe) Tomcat:(apache-tomcat-7.0.54-windows-x86.zip) Eclipse:(eclipse-java-helios-SR1-win32.zip) MySQL:(mysql-5.5.20-win32.msi) MySQL JDBC:(mysql-connector-java-5.1.31.zip) Navicat for MySQL

Web开发技术——XML基础

什么是XML XML和HTML的区别 XML 被设计用来传输和存储数据. HTML 被设计用来显示数据. XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML 轻量级数据交换格式 XML的用途 XML 把数据从 HTML 分离 XML 简化数据共享 XML 简化数据传输 XML 简化平台的变更 XML 使您的数据更有用 XML 用于创建新的 Internet 语言 XHTML - 最新的 HTML 版本 WSDL - 用于描述

Web开发技术——Javascript基础

什么是JavaScript JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行. Javascript主要用来修改HTML和CSS,使网页产生动态的效果 如何使用Javascript HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 <body> 和 <head> 部

Flask web开发之路二

今天创建第一个flask项目,主app文件代码如下: # 从flask这个框架导入Flask这个类 from flask import Flask #初始化一个Flask对象 # Flasks() # 需要传递一个参数__name__ # 1. 方便flask框架去寻找资源 # 2. 方便flask插件比如Flask-Sqlalchemy出现错误的时候,好去寻找问题所在的位置 app = Flask(__name__) # @app.route是一个装饰器 # @开头,并且在函数的的上面,说明是

Flask web开发之路三

今天写一个URL传参.反转URL.页面跳转和重定向 URL传参 主app文件代码: from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello World!' @app.route('/article/<id>') def article(id): return '您请求的参数是: %s' %id if __name__ == '__main__': app.run

Flask web开发之路六

今天写SQLAlchemy数据库 首先介绍ORM的概念: ORM,Object类,Relationship:关系,Mapping:映射,也就是模型关系映射 flask-sqlalchemy是一套ORM框架 ORM的好处:可以让我们操作数据库跟操作对象一样,非常方便,因为一个表就抽象成一个类,一条数据就抽象成该类的一个对象 ### Flask-SQLAlchemy的使用:1. 初始化和设置数据库配置信息: * 使用flask_sqlalchemy中的SQLAlchemy进行初始化: ``` fro

Flask web开发之路九

首先介绍循环引用的问题: 当一个模块需要引用另一个模块的类,而另一个模块又需要引用这个模块的类时,就出现了循环引用,而没法导入类,这时候可以切断其中一条引用路径,增加一个模块 项目结构: models_sep.py代码: from flask import Flask from models import Article from exts import db import config app = Flask(__name__) app.config.from_object(config) d

Flask web开发之路十四

今天开始Flask的实战,创建一个项目,实现包括用户登录.注册.注销.发表博客.评论以及检索等功能 首先给出项目结构: 1.config.py文件: 存放各种配置信息 import os # dialect+driver://username:[email protected]:port/database DIALECT = 'mysql' DRIVER = 'pymysql' USERNAME = '用户名' PASSWORD = '密码' HOST = '域名' PORT = '端口号' D

Java Web开发笔记(2016-5-6 11:13、2016-5-10 11:13、2016-5-12 14:58)

http://localhost:8080/EquipmentSys/equipment/findEquipStateByEquipmentNumber.html?DEVEICEID=04:e6:76:df:f0:94 返回 1,1 设备状态(1运营,2维护,3锁定),是否更新的开关IsUpdate={1,0}(游戏APK更新条件:IsUpdate=1而且版本号不一样) /** * 接口 * @param request * @return * @throws UnsupportedEncodi