Web开发从零单排之一:在新浪云平台SAE上开发一个html5电子喜帖

需求描述:

本人大婚将至,女朋友说“现在都流行在微信上发电子请帖了,你不是技(cheng)术(xu)宅(yuan)嘛,不会连这个都搞不定吧”

本人嘴上说这等小事何足挂齿,但心里还是七上八下的,虽然自认为几年开发经验在工作上还算得心应手,但也因为工作项目局限,对Web开发特别是前端和建站技术接触不多

于是打开搜索引擎和女朋友一起看看现在市面上的服务,基本上都是给出一套模板,自己填上内容和照片后,生成电子请帖,而形式有网页也有单张图片的

收费也不贵,都在百元左右。但收费是小,面子是大啊,作为一个软件开发人士不能被外行女朋友看扁吧,“修空调你不行花钱找人来,这个也要花钱让别人来做?”

这婚后地位还不得一落千丈

按照女朋友的需求,做到微信分享和移动端pc端兼顾,本人快速决定最终产物应该是一个html5网站

接下来分析:轻量级快速开发部署,基本上要用LAMP的思路,但自己找一台linux服务器用来部署有点浪费资源,于是决定在网上找一些免费空间

免费好用的个人空间,寻觅无果,倒是接触到几家互联网巨头都在推自己的云平台

阿里云和腾讯云平台起步都是企业应用级别的,而且价格不菲,对于本人的需求来说过于heavy了

百度的云平台似乎比较适合个人开发,但也是起步就收费,不过价格可以选择非常轻量级的套餐,可以接受,但后来实际应用时发现目前版本的BAE不支持在线编辑代码,

对于本人这样需要在单位和家里利用碎片事件来开发学习的来说,十分不便

最终选择了SinaAppEngine,简单介绍一下吧

1. 微博账号直接登录

2. 资费是根据流量消耗云豆,1元=100云豆

3. 开通SAE后就会赠送云豆,另外上传照片可以进行实名认证,认证通过后赠送2000云豆+1000每月,基本上自娱自乐的应用可以做到免费了

4. 支持三种服务端语言,php,python,java,本着从零单排学习新知识的心态,本人选择php创建项目

5. 可以在线编辑代码,适合简单碎片化的改动

6. 版本管理支持SVN,但不支持Git,BAE可以支持Git

在SAE上创建了自己的WEB应用,LAMP的L和A基本上就是托管到新浪了

WEB前端设计,自然是无从下手,另外审美也比不上前端大牛,于是本人直接在网上找了一套HTML5网站模板,

然后根据自身需求,对页面模块进行简单的调整删减,修改时用记事本打开html文件,根据你的聪明才智,参考w3school上的教程,

基本上做一些简单的模块调整,文字修改,相册图片源的替换是很简单的

再加上背景音乐:

<audio src="天下无双.mp3" autoplay="autoplay"></audio>

然后就可以将网站上传到SAE上了,包括调整后的index.html页面文件,js文件夹,照片资源image文件夹,fonts文件夹和css文件夹

保持相对路径不变上传完成后,即可浏览index.html页面看到效果了,分享给其他人的话,地址为:版本号+应用名+sinaapp.com,示例:http://1.MyAppName.sinaapp.com/

这样一个基本的html5电子喜帖网站就可以发送给别人了,转发微信的时候建议先复制地址发给自己,在微信中打开地址后,通过微信的转发按钮转发给别人,可以有比较好看的链接形式

至于网站够不够炫,新人够不够靓,要看每个人具体情况啦

转发后随着访问人数增加,产生流量后SAE就会开始计费,周围亲戚朋友的访问量,每天PV100左右的话,可能也在每天1分钱左右,实名认证情况下SAE赠送的肯定够用了

PS:本人其实也是为了尝试WEB开发技术而借用电子喜帖这个契机来推动自己的,相关学习都还很稚嫩,需要前辈们多多指点

放上目前成果,抛砖引玉:http://520.lovewithlmj.sinaapp.com/

下一篇准备写一下在电子喜帖里增加留言板功能,统计访问数及来访IP等功能,LAMP里的M和P下篇登场

时间: 09-03

Web开发从零单排之一:在新浪云平台SAE上开发一个html5电子喜帖的相关文章

PHP+新浪微博开放平台+新浪云平台(SAE)开发微博应用基础

1.新浪微博开放平台(http://open.weibo.com/wiki/index.php/Quickstart)        开放的是什么:开放平台开放给开发者的是每一个用户的用户关系,开发者不在向传统应用那样面对单个开发者而是面对用户身后的整个好友圈.每一个API都是围绕好友与好友之间的交流来提供相关的功能,如发送微博,查看好友资料等等.        为什么要使用开放平台?开放平台可以加快应用的推广.每个用户可以影响到周围的好友,一旦应用真的优秀,用户可以方便的推荐给好友,好友又可以

使用新浪云(SAE)实现基于mySql和微信公众平台的关键字请求响应服务

本例是作者初次尝试微信公众平台开发之作,实现传统的关键字请求响应功能.即:用户发关键字,公众号通过关键字进行检索, 在mysql数据库中读取与关键字相关的信息,并返回给用户.本例在微信订阅号(开发者模式)上实现,目的是学习微信公众平台开发.验证SAE的功能,并研究SAE+微信公众平台的实用性及应用场景.因仅是进行技术学习的示例子,所以忽略公众号在非开发者模式下可以简单实现该功能的事实. 感谢方倍公作室的教程,让我一开始就站上一个高度:微信公众平台开发入门教程 应用比较简单,直接上代码了: <?p

新浪云应用SAE配置

1.创建应用,我选的是php5.6托管代码git,后来就后悔了,因为以前没用过git,而官方教程多是svn为例来讲解的,害我折腾了半天. 2.下载安装msysgit.下载地址:http://msysgit.github.com/,安装参考:http://jingyan.baidu.com/article/e52e36154233ef40c70c5153.html 3.部署代码,参考http://www.ido321.com/225.html,http://www.sinacloud.com/do

MiinCMP1.0 SAE 新浪云版发布, 开源企业网站系统

MiinCMP是一款开源企业网站系统,除可运行于256M左右100元的国内IDC外,JUULUU聚龙软件团队近期开发了面向新浪云的版本,该版本可将网站免费布署到新浪云SAE上.MiinCMP采用java开发,兼容jetty,tomcat等servlet容器.   MiinCMP1.0 新浪云SAE版安装包 http://pan.baidu.com/s/1kT1EbUR 百度云下载   MiinCMP1.0 新浪云SAE版源码包 http://pan.baidu.com/s/1kT9f9mZ  百

MiinCMP1.0 SAE 新浪云版公布, 开源企业站点系统

MiinCMP是一款开源企业站点系统,除可执行于256M左右100元的国内IDC外,JUULUU聚龙软件团队最近开发了面向新浪云的版本号,该版本号可将站点免费布署到新浪云SAE上.MiinCMP採用java开发,兼容jetty,tomcat等servlet容器.   MiinCMP1.0 新浪云SAE版安装包 http://pan.baidu.com/s/1kT1EbUR 百度云下载   MiinCMP1.0 新浪云SAE版源代码包 http://pan.baidu.com/s/1kT9f9mZ

BotVS配置管理—使用新浪云搭建托管者

1. 创建SAE应用 登录新浪云平台,点击创建新应用 2. SAE环境部署 在新应用中选择自定义 相应选项如下 开发语言:自定义 运行环境:云容器 语言版本:自定义 部署方式:手工部署 操作系统:系统 centos 版本7 环境配置:基础 应用信息:填写二级域名及应用名称 3. 确认环境信息 查看信息及价格 4. 创建成功 创建成功后,跳转到容器管理点击 SSH客户端登录,登录地址为 ssh -p 60022 [email protected] 5. 创建ssh-keygen Windows上需

ThinkPHP - 2 - SAE(新浪云)部署

ThinkPHP3.2核心内置了对SAE平台的支持(采用了应用模式的方式),具有自己的独创特性,能够最大程度的使用ThinkPHP的标准特性,让开发人员感受不到SAE和普通环境的差别.甚至可以不学习任何SAE知识,只要会ThinkPHP开发,就能将你的程序运行在SAE上. SAE版ThinkPHP具有以下特性: 横跨性:能让同样的代码既能在SAE环境下运行,也能在普通环境下运行.解决了使用SAE不能在本地调试代码的问题. 平滑性:我们还是按照以前一样使用ThinkPHP,但是您已经不知不觉的使用

Android中实现java与PHP服务器(基于新浪云免费云平台)http通信详解

Android中实现java与PHP服务器(基于新浪云免费云平台)http通信详解 (本文转自: http://blog.csdn.net/yinhaide/article/details/44756989) 前言:现在很多APP都需要云的功能,也就是通过网络与服务器交换数据.有的采用tcp/ip协议,但是你必须拥有一个固定ip的服务器,可以购买阿里云服务器之类的,就是贵了点.如果只是个人的小应用的的话可以采用新浪云平台这种免费的服务器,采用的协议是http协议,具体实现方式如下: 方式一.在线

Unity3D游戏开发从零单排(五) - 导入CS模型到Unity3D

游戏动画基础 Animation组件 Animation组件是对于老的动画系统来说的. 老的动画形同对应的动画就是clip,每个运动都是一段单独的动画,使用Play()或CrossFade(),直接播放动画 或淡入淡出播放动画. animation.Play("name"); animation.CrossFade("name"); 下面的是它的几个属性 Animation:默认的动画片段: Aniamtions:包含的动画片段: Play Automaticall