iphone web开发前端最基础框架

四月 10th, 2011 § 0 comments § permalink

突然用了框架这个概念,感觉自己很高级的样子。。。

其实我的这个算不上成型的框架。。因为代码量太小(安慰下:有代码就算框架啊。。)平时大家无论在用什么语言写程序的时候,为了更敏捷地开发,到了一定阶段运用框架是很必要的,大至javaEE的3大框架Struts Hibernate Spring(一点也没看过。。不过在某些领域是行业标准啊啊啊) RoR, .Net等,小至前端开发的一些css js开发框架。说到框架,可以说的太多,其实自己也不是很明白,后续补上吧。。

 

回到正题。说下我的这个小东西。

话说上学期给前辈做过很简单的基于iphone显示的网页,因为是在iphone这种特殊的移动终端上显示,所以必须考虑很多发生大的变动的因素,譬如网页的大小,布局,事件反应等等,css和js都是有所区别于正常pc上的浏览器的。

做了几个静态的iphone网页之后,今天把代码翻了下,删减掉每次的特殊的部分,留下的共用的html和css(js暂时没有写,它和pc浏览器的区别在于事件捕捉增加和一些在移动终端无效的属性的去除,以后再说吧~)总结下来,就是我所谓的框架了(脸皮挺厚。。)

下面都拿出来和大家分享(怎么好意思拿出来。。。)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<title>webapp</title>
<link rel="StyleSheet" href="style.css" type="text/css" media="screen" id="orient_css">

</head>

<body  onorientationchange="orient();"><!--js  感应控制-->

<div id="wrap">

</div>

</body>
</html>
//css
body
{
	margin-top:-0px;
	margin-left:-0px;
	text-decoration:none;
}

#wrap
{
	overflow:auto;
	width:320px;
	height:480px;
	background-color:#98989c;
}

@media only screen and (orientation:landscape)//对横竖屏转换的监控
{

body
{
	margin-top:-0px;
	margin-left:-0px;
	text-decoration:none;
}

#wrap
{
	overflow:auto;
	width:480px;
	height:320px;
	background-color:#98989c;
}

}

大致是这样,横竖屏转换是个关键点,开始头部的声明部分也很关键~

再提供一些参数:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
device-width:视图宽度与设备同宽。
<link rel="apple-touch-icon" href="/yourIcon.png"/>
指定在iPhone主屏上所显示的图标为yourIcon.png
<link rel="apple-touch-startup-image" href="/startupImage.png">
指定web应用启动时的显示图片。
<meta name="apple-mobile-web-app-capable" content="yes">
指定显示特征为web应用,不显示浏览器的特征。
01	// navigator.standalone
03	if ("standalone" in navigator){
04	 if (navigator.standalone){
05	 alert("Started from homescreen");
06	 }else{
07	 alert("Started in browser");
08	 }
09	}else{
10	 alert("Not supporting standalone property");
11	}
在script中用window.navigator.standalone属性判断是否是Web应用程序(是否是以homescreen方式启动的)。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
指定iphone的状态条(status bar)的显示为透明,透明状漂浮在web应用视图的上面。也可以是default或black值。

如:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
或者
<meta name="apple-mobile-web-app-status-bar-style" content="default" />

但是确实有很多东西没有考虑,我准备如果可能的话会放在Git上版控呵呵。。积少成多呀~~

还有,如果想对iphone web开发深入下去的话,推荐国内唯一较好的译本《iphone开发实战》,里面讲述的是web开发和传统SDK开发基于iphone内嵌Safari的应用,主题都是web,很明确,难能可贵啊~什么高级WebKit开发,Canvas的HTML5开发,用开源控件库开发等等等等~

还有一个不错的开发总结,中文的能找到的不多,就先推荐下~

这里!!!!!!!!!!!! 还有这里~~~~~~~~~

 

好了,大言不惭地把很傻的东西拿出来,也许是安慰自己多一点吧,这个所谓的框架真的只是最最最最最最最基本的设置了。。。哈哈   然后呢,靠大家自己添加了~~

:)

(框架?下一篇吧 嘿嘿~)

当天的落魄总结

八月 14th, 2010 § 0 comments § permalink

今天一天可以说是围绕着昨天的问题展开的,不可谓一事无成,但都是小事吧。

昨晚上豆瓣的时候,无意间又瞟到了被抓取显示的自己的博文,但很可惜格式丧失的问题还在(本来就没解决的。。。),不禁觉得不能放着不管了,于是乎准备着手处理它。

第一想到的自然是搜索。一阵google 百度,毫无收获,键入的“抓取博文 格式丧失”几个关键字,看来很少甚至没怎么被提到过。。。心中很是纳闷啊,这下该怎么办呢?是关键字问题?我于是想了些近似的关键字拿去搜,依然颗粒无收。当时确实很失落的。

随后我想到求助于前辈。豆瓣上的相关人士还是很多的,我就给几个做web开发或者准程序员们发了豆邮,当然了,我还发给了豆瓣的帮助中心以及豆瓣老大–阿北。发完之后,新生希望了。于是辗转人人,竟偶遇alswl前辈。自然,我不会放过这个询问的好机会的。

前辈给的提示是如果博客的格式都是由css全权决定而css是外联的话,rss输出的博客就是无格式的了,因为它无法自动读取,至少在没有其他脚本的帮助下是这样。而且这种情况是文章的段落结构连基本的html标准语义都不存在的时候艹会发生的,难道我的东东如此落魄?当时我想的是不可能吧。。。于是去看了下,一开始没看明白,css确实是外联的(现在推崇的形式),但是否全文无html标识我还没明白,和前辈到了声晚安,倦意把我拖上了床。

第二天我 起的不早。。。兴奋地开豆瓣看回信,不料只有一封回音。是key4ever前辈的,他的意思一开始是说没设定全文输出(其实上个月初我去他的博客留言他回的也是这个只是当时不知道为什么没有回复提醒我也就把这是忘记了,这次重复问,前辈的耐心我很感动啊),我调了之后,问题还是存在的,在他的提示下我看了IE中自己博客的feed输出,竟然是有格式还带图的!GoogleReader上也是可以看到格式的!我就纳闷了,Firefox中开feed源地址看到的可是一篇荒芜啊,chrome也是,九点抓到豆瓣显示的自然还是!那究竟是为什么啊~~~

前辈们可能都自己忙着呢,我决定自己想想办法。来到wp后台,从发布新文章里看可视化和HTML源码的切换,才发现,原来直接在可视化里码字,切到HTML格式连段落标识符都没有的,<p>啊<h>啊等等都没有,空空的!怎么会这样啊!后台管理器的问题?还是插件TinyMCE Advanced在作怪?这是个增加后台文章编辑功能的plugin,我心想,问题估计和他有点关系。。

于是我搜到了一篇文章WordPress 编辑器和代码高亮 。。之后的事都偏离了我要解决的问题。。。

我这才发现,自己的博客很多地方一点都不完善,仔细审视下来,大概有这么几点:1.页面宽度不够,在读产长篇文章时显得很不给力   2.没有页数导航,wp自带的单页反动极其被动,十分不方便   3.文章页面很空洞,不像很多网站有起码的相关文章   4.前辈们的博客充斥着代码且代码格式比较特别(就是代码高亮的说法吧)

“问题大致这些,先解决了这些再说”(当时确实来劲之后把老问给忘了。。。)

1     遂先调整页面吧,这个相对比较死,也最简单。犹豫用的是Firefox,有写扩展对于web开发者来说十分方便,比如这个–Firebug。只需利用它,我就知道了我的index页中的content框是哪些各项属性值又是怎么样的,之后进入后台的外观选项中的Editor中更改便可以了。这个没几分钟变调试成功了。 » Read the rest of this entry «

HTML学习笔记

五月 26th, 2010 § 0 comments § permalink

10/5/26

HTML标签

段落使用 <p> 标签进行定义。   HTML 会自动在段落前后添加一个额外的空行。

不要忘记关闭标签:我们可能注意到了,在编写段落时可以不带有 </p> 标签:

<p>This is a paragraph
<p>This is another paragraph

上面的例子在大多数浏览器中都可以工作,但是不要依赖这种做法。HTML 未来的版本不允许省略任何结束标签。通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始,并在何处结束,不论对您还是对浏览器来说,都会使代码更容易理解。

当你打算结束一行,而又不想开始一个新段落时,<br> 标签就派上用场了。无论你将它置于何处,<br> 标签都会产生一个强制的换行。

<!– This is a comment –>     —–      注释标签用于在 HTML 源码中插入注释。注释会被浏览器忽略。您可以使用注释对您的代码进行解释,这么做在以后的日子里会对您的代码编辑产生帮助。

对 HTML 元素的重新认识

  • 每个 HTML 元素都有一个元素名(比如 body、h1、p、br)
  • 开始标签是被括号包围的元素名
  • 结束标签是被括号包围的斜杠和元素名
  • 元素内容位于开始标签和结束标签之间
  • 某些 HTML 元素没有内容
  • 某些 HTML 元素没有结束标签

 

HTML 会裁掉文本中所有的空格。任何数量的空格都被按一个空格计数。另外,在 HTML 中,一个空行也被当作一个空格。

使用空的段落标记 <p> 去插入一个空行是个坏习惯。用 <br> 标签代替它!

HTML 会自动地在某些元素前后添加一个额外的空行,比如段落、标题元素前后。

使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法(但并不是唯一的办法)。

HTML会忽略你输入的文本格式,非所见即所得。

基本的 HTML 标签 » Read the rest of this entry «

从HTML开始

五月 26th, 2010 § 0 comments § permalink

我觉得这个weblog不能只是个噱头,该努力想各位前辈学习。我也要输出价值。

扯远了,踏实地开始吧。但愿以后一切都好。

Web组你要了我吧,我满怀赤诚的,哈哈。

Where Am I?

You are currently browsing entries tagged with HTML at 麥町 | 乌冬'.

top

no sidebar