必威体育下载克里斯蒂安·海尔曼

您当前正在浏览必威体育下载克里斯蒂安·海尔曼五月的博客必威体育简介档案,2009。

5月存档二千零九

演示:专业的Web开发工具

星期日,5月31日,二千零九

上周五我去了阳光南华工控机媒体给了一个棕色袋子展示.主题:工控机想聊聊图书馆的使用以及为什么悠悠可能是个不错的选择。

我提到了几乎所有的网站都被破坏的事实,最重要的原因是开发团队和用户之间的沟通不好,开发人员和客户对此都不满意。

我解释说,我们是为一个未知的环境开发的,我们拥有的开发工具还不够好(尽管每年都会变得更好)。

我对缺乏文档和移交程序感到遗憾,作为开发人员,我们倾向于反复为一个问题构建小的解决方案,而不是为更大的解决方案框架做出贡献。

我指出,我们倾向于从视觉显示转向功能性,而不是从另一个角度,这就是为什么我们生产不可访问和过于复杂的产品。

作为这些问题的解决方案,我展示了悠悠建造和维护,它的开发工具如何让您以一种可预测的方式进行构建,并且它非常好地完成了外面的每个库应该为您做的事情:使Web开发更容易,而且不那么随机。

幻灯片

专业的Web开发工具

下面是演讲的幻灯片:

音频

我还录了谈话的音频,你可以在archive.org下载记录.听音频听起来有点咆哮,但事实并非如此,我非常热衷于专业的网络开发和使互联网成为1媒体:)。

笔记

专业的Web开发工具

几乎每个网站都被破坏了。

如果你环顾网页,你会发现几乎每个网站都是以某种方式被破坏的。这从小的显示故障开始,到无法访问或不为用户工作的站点结束。

这很糟糕。

这真的很糟糕。它损害了作为媒体的网络。我们每年都会重新发明网络,因为我们似乎无法让它为我们工作。

不开心的访客。

破碎的网站会导致不愉快的访问者。真正的问题是,不快乐的游客不会向能够解决问题的人抱怨。大多数访问者要么认为他们做错了什么,要么只是试图找到另一个提供相同内容和作品的网站。这两个访客都不会回来。其他访客抱怨,但却被困在帮助台上,永远无法解决他们的问题,因为很难联系到能够解决问题的开发人员。

不开心的开发者。

由于开发人员忙于构建新的功能和其他站点,因此它无法到达开发人员那里。如果我们不经常建造新的东西,我们既不是快乐的开发商,也不是高效的雇主。修理东西不性感。

不开心的客户。

这会导致客户不满意。如果一个客户意识到某个东西在网站上不起作用,他们会花很多钱来修复它,不管问题有多严重,如果问题只出现在他们的机器上(大多数时间都是过时的)。

原因

断网的原因很多,几乎所有这些都是我们自己的错,或者是基于误解。

缺乏沟通

Web开发的最大问题可能是所涉及的不同各方之间不进行对话,也不了解彼此的任务。开发人员认为他们比设计师更了解,设计师认为,开发人员在使用他们手中的武器库方面不够有创造性,产品经理对品牌的了解超过了媒体,他们对互联网给我们的技术边界和自由视而不见。此外,我们都有自己的最后期限,要制作和编写的交付和报告占用了我们太多的时间。

开发环境

Web开发有史以来最糟糕和最不明确的环境。有数千种浏览器配置和版本,他们每个人都以不同的方式失败。缺乏良好的错误报告,服务器配置不同,连接问题…你说出它的名字。我们的开发受到了影响,修复的错误比编写代码的要多。

零星开发

作为Web开发人员,我们总是尝试构建解决当前问题的小型解决方案。我们并不是真的认为一个站点和跨站点的所有东西都应该顺利地一起工作。我们失望了很多次,以至于我们不相信这一点。

缺乏移交和文件

零碎的发展也意味着我们并没有真正记录或移交什么东西。由于下一个开发人员最有可能像我们一样倾向于构建新的东西(因为它肯定会比我们要求维护的crud要好得多),所以这一点毫无意义。

功能接口

最大的问题是,我们从界面和酷效果开始,然后一路前进到用户需要实现的目标。我们往往很快就会忘记,不是每个人都有相同的经验,或者可以从我们想要构建的出色的闪亮界面中获益。每个Web应用程序下都有一个框架,如果这个框架很弱,不管我们使它多么漂亮和有光泽,它都会被破坏。

解决

所有这些问题都有解决方案。

回到基础

首先要考虑的是在开发方面回归到基础。网络是如何工作的,达到某个目标最基本的方法是什么?

http://uk.tv.yahoo.com/yeug搜索–是一个包含多个选项的搜索框。它使用javascript在单击任何链接时更改表单的操作。

任务:定义搜索类型,输入搜索词,提交表单。

不需要JavaScript——我们只需要一个单选按钮组,在后端进行分叉。注意字段集,选项和搜索按钮构成一个逻辑句子。这对于可达性非常重要。

电视频道节目

http://uk.tv.yahoo.com/YTV列表–作为Web开发人员最难构建的界面。看起来像一个数据表,但可能有一分钟长的显示!这意味着表必须有180列,并且在每个表单元上使用colspan。

分析显示的数据,找到最简单的展示方式。
然后让它看起来像你想要的那样。

数据显示的信息更容易显示为标题和有序列表。CSS剩下的。

建立人们想要的东西,并知道如何使用。

下面是雅虎向真正的最终用户提供用户测试结果的地方-http://developer.yahoo.com/ypatterns.没有什么可以取代这一知识,而且通常来这里是非常昂贵的。在您考虑构建自己的界面来解决用户必须解决的问题之前,试一试。

永远使用技术

Flash视频播放器是迄今为止显示视频的最佳方式-http://uk.video.yahoo.com/.然而,他们没有可靠的键盘控制。通过提供按钮HTML并通过一个美国石油学会你可以让所有人都能接触到它。

追求卓越。

这是新的雅虎货币转换器.它是Web开发中一个令人惊叹的部分。它适用于所有用户(包括屏幕阅读器用户),并使货币转换变得容易。

这里我们详细解释了它是如何工作的。以及我们开发它的方法。

删除浏览器

职业发展和保持清醒的最大一步是将浏览器的随机元素从等式中去掉。你不能支持世界上所有的浏览器,你也不应该支持。

分级浏览器支持是一个框架,用于定义测试哪些浏览器并获得完整的体验。未知的浏览器只能在其中工作——没有javascript,甚至更模糊的浏览器也不能。CSS要么。

使浏览器行为正常。

库有一项工作:使浏览器工作。作为Web开发人员,支持是我们这个世界上最随机的事情,因此将所有恶意的黑客攻击和错误的浏览器行为修复到库中是很有意义的。悠悠雅虎就是为了这个目的而建立和使用的。

第一个问题是每个浏览器都有一个内部样式表HTML.所有这些都是不同的,这使得在浏览器中开发可靠的外观和感觉是不可能的。悠悠重置解决这个问题。

同样适用于排版。通过使用悠悠字体CSS您可以重置浏览器的排版以允许您将像素大小定义为百分比,从而控制并允许用户调整字体大小。

这个CSS网格允许您创建跨所有A级浏览器轻松可靠地工作的多列布局。源订单独立性是免费的,也是。

如果你懒惰,您也可以使用网格生成器,定义布局,点击“显示代码”按钮,获得一个复制+粘贴HTML文件。这个CSS将来自我们的CDN,这意味着它可以从地理位置上靠近客户的计算机交付给客户。

一次做一件事。

悠悠做我们作为开发人员希望能够做的事情:一次集中精力完成一个任务。除了“全力以赴”的图书馆,悠悠被分成几个部分,每个人都在做一件事。你可以根据你的需要混合搭配。

DOM访问。

其中一个组件是雅虎.util.dom,使您可以访问DOM和方便的方法围绕着更烦人的事情W3C DOM API有。

用这个我可以写一个脚本展现完美悠悠适用于各种大小浏览器的网格.

预测并解决问题。

作为一个开发人员,你应该做的一件事就是对事情的破坏产生妄想。你应该能够看到什么会出错,并设置陷阱让它不会发生。

位置:固定是性感的!

固定的定位元件可以很酷。例如,您有一个很长的文档,但是不管您向下滚动的页面有多远,您都希望在旁边显示导航。另一个很酷的用法是“注释”字段,它允许您从文档中复制和粘贴引号。

将导航定位为固定,使其始终在页面上可见。

但是,如果浏览器窗口太小,则无法访问下面的元素。

这个小脚本解决了这个问题。使用getRegion,我可以得到页面上任何元素的大小,getViewPortHeight()为我提供了可用空间。如果有比需要更多的空间,可以应用固定。

一旦固定,让我们重新使用。

使用悠悠我们基于设计模式构建各种小部件的组件。

使用这些免费的小工具,你可以自己重新构建雅虎邮箱。

重复使用意味着有能力改变风格。

所有的小部件都是可使用样式CSS.你不需要知道javascript或者改变它们的代码来让它们看起来完全不同。

记录你的工作。

这个悠悠附带大量文档,两者都是根据代码中的注释(JavaDoc样式)和逐步教程创建的。从源代码生成文档的系统也可用作开放源代码。

必威体育下载以身作则。

悠悠伴随而来300个复制粘贴示例如何使用不同的组件和小部件。因为这是大多数开发人员的工作方式,我们意识到这是我们成功的一个非常重要的部分。

允许扩展。

悠悠对所有这些都使用自定义事件。这允许您将自己的代码与库完全分离。您不必调用库方法或从库中调用函数,只需触发或订阅事件即可。

知道发生了什么。

并不是每个浏览器都有一个很好的调试套件,比如Firebug或Opera的Dragonfly。这就是为什么雅虎提供了一个日志控制。

记录器允许您在任何浏览器中调试悠悠工作。除此之外,所有悠悠小部件和组件作为调试版本提供,调试版本向记录器报告它们所做的一切。这会让你完全控制正在发生的事情和发生的时间。

监控性能。

这个悠悠profiler允许您监视javascript性能,甚至是非yui脚本。

写作前先测试。

同样适用于悠悠测试套件。使用它,您可以将测试驱动的开发方法应用到JavaScript开发中。

玉3

玉三是的新版本悠悠,有很多速度和尺寸的改进,我们改变了方式悠悠显著提高安全性,执行并允许您编写更少的代码来实现您的目标。

性能

javascript性能是一回事,但是,为了提供真正成功的网站,有许多技巧可以应用于创建快乐的最终用户。雅虎开发者网络的卓越性能部分都列出来了。

耶斯洛–火狐扩展允许您根据这些提示和规则测试任何网站,并且您可以立即,有关如何提高网站性能的信息。

Brownbag在伦敦的演讲–午餐需要一些信息和问答吗?

星期日,5月31日,二千零九

今年七月和八月对我来说是一个非常缓慢的时间,因为我没有任何会议在发言,也没有黑客日计划。九月将再次包装,不过。

这就是为什么我现在正计划在伦敦地区做一些褐色的袋子展示。我已经在工控机媒体,下星期五将前往易趣网/ GunTys/Skype / PayPal/SuffPig网站在里士满,并有天空和汤姆森集团/ TUI显示一些兴趣在Twitter上。

在午餐休息时间,人们可以带着食物一起吃,布朗包的演示是按定义的。这样,您的员工可以获得一些信息或与受邀专家讨论他们的问题,而不会影响您的正常办公时间和时间。

我很高兴能过来谈谈我所热爱的一切。目前这些事情是:

  • 使用钇铝石榴石
  • 挖掘你的内容并用地理信息增强它(雅虎Placemaker)
  • 建筑专业搜索引擎(boss)
  • 无障碍,这不是魔术
  • 专业网络开发
  • Web产品的性能及其改进方法

我对其他话题开放,不过。

如果你对其中一些感兴趣,并且你在牡蛎卡区,此处注释或在Twitter上联系我我们可以谈谈约会,位置,话题和时间。我不期望任何报酬,但通常是咖啡,一些水和三明治:)。整个练习的目的是能够联系到通常没有机会参加会议的开发人员。

TTMMHTM:半恐慌,做一个麦格,嚎叫的狼,地理编码和很多视频

星期四,5月28日,二千零九

今天早上让我快乐的事情:

TTMMHTM:免费音乐手机上关于CSS的故事(或召唤)

星期二,5月26日,二千零九

今天早上让我快乐的事情:

新闻地图-使用PlaceMaker将地理位置添加到新闻源

星期五,5月22日,二千零九

我现在对新的产生器β–位置提取Web服务,2.0版本发布。使用PlaceMaker,您可以在提要、文本或Web URL中找到所有地理位置,并将它们作为一组位置返回。

作为演示,我雅虎新闻饲料并通过放置器进行操作。当您将鼠标悬停在新闻项上时,结果位置将绘制在地图上,地图将从一个位置移动到另一个位置。

结果在线http://isithackday.com/hacks/placemaker/map.php

雅虎新闻地图。

从数据馈送中获取数据并通过PlaceMaker运行数据是非常直接的。我解释了基本原理这个博客帖子在雅虎开发者网络博客上。唯一需要考虑的是正确定义输入和输出类型:


$KIK'粘贴这里是您的API密钥
$apiendpoint='http://where.yahooapis.com/v1/document';
$url='http://rss.news.yahoo.com/rss/topstosses';
$inputType='text/rss';
$outputtype='rss';
$post='appid=.$key.&documentURL=.$url。
“&documentType='.$inputType.&outputType='.$outputType;”
$ch=curl_init($apiendpoint);
卷发($ch,科洛普邮政,1);
卷发($ch,科洛普后后场,$POST);
卷发($ch,科洛普返回传输,1);
$results=curl_exec($ch);
?>

如果你看这个例子的来源您会发现PlaceMaker在提要本身中注入了ContentLocation元素:


xmlns:georss=“http://www.georss.org/georss”xmlns:cl=“http://where.yahooapis.com/v1/cle”
xmlns:xml=“http://www.w3.org/xml/1998/namespace”xml:lang=“en”>

二百五十一万四千八百一十五
华盛顿,直流美国
三十八点八九一三
-77.0337


二千三百四十二万四千七百九十三
古巴
二十一点五一一
-77.8068


二千三百四十二万四千九百七十七
美国
四十八点八九零七
-116.982.


五千五百八十四万三千八百七十二
关塔那摩湾Caimanera,<br/>关塔那摩,铜
十九点九四四五
-75.1541


您还将注意到元素的名称空间和中位置的名称。计算机数据处理系统阻碍,这两件事我都很讨厌。不是因为它们没有意义,但是因为simpleXML可以被拖动来理解它们。

我想对这些数据进行双重处理:创建杰森要在地图上绘制和显示新闻内容的地理位置数组。这就是PHP这样做:


$places=simpleXML_load_string($results,'simplexmleelement',
LIB XMLNoCDATA;
//如果找到元素
如果($places->channel->item)
开始杰森数组
$output.='[';
/启动HTML输出
$HTML=
?>

结果可以在这里看到http://isithackday.com/hacks/placemaker/map-2.php.

显示地图的javascript非常直接,或多或少是地图的演示示例美国石油学会


//将使用在中组装的数组调用PHP
功能定位图(O)
//如果有位置
如果(O.长度>0)
//创建一个新的地理点数组以保存所有位置
//这是确定原始缩放比例所必需的
//地图级别
VaR地理点=[]
//添加带有控件的映射
var map=new ymap(document.getElementByID('map'));
map.addzoomlong();
map.addpancontrol();
//循环位置
对于(var i=0;i) //定义新的地理点并将其存储在数组中
var point=新的ygopoint(o[i].lat,o[i].lon);
地理点。推(点);
//创建一个新标记并赋予它
//中定义的IDPHP.弹出标题
//当
//用户悬停在标记上
var newmarker=新的ymarker(point,o[i].id);
newmarker.addautoexpand(o[i].title+'('+o[i].name+')');
map.addoverlay(新标记);
}

//定义最佳缩放级别并显示地图
var zac=map.getBestZoomandCenter(地理点);
map.drawZoomandCenter(zac.ygeopoint,zac.zoomLevel);
}

//向结果列表中添加mouseover处理程序
雅虎.util.event.on('news','mouseover',函数(e)
//删除当前目标ID的“news”文本
//当我们将列表项命名为news0到news19时
var id=雅虎.util.event.getTarget(e).id.replace(“新闻”,“);
//如果还剩下什么,我们就有一个消息
/项目
如果(ID)!==''){
//使用循环中定义的ID获取第一个标记。
var marker=map.getmarkerObject('m'+id+'x0');
//如果有,在那里浏览地图并显示信息
//连接到它。
如果(标记){
地图.pantolatlon(marker.ygeopoint);
marker.openAutoExpand();
}

}
(});
}

//使用杰森数组
占位图

差不多就是这样。我相信它可以被提炼,但令人惊讶的是,用PlaceMaker将地理信息输入任何文本是多么容易。