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

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

5月存档二千零一十三

访问者不返回Web产品的五个原因*

星期五,5月31日,二千零一十三

  • 他们决定他们真的恨你和你所代表的一切
  • 他们被外星人绑架,正忙着接受调查
  • 他们看了太多福克斯新闻,现在退到冷战地堡吃罐头杏,直到它安全地再次出来。
  • 它们从未存在过,你实际上是在一个绑在椅子上的秘密政府机构里,他们不断给你注射神经化学物质,告诉你你是一个网页设计师。
  • 是的,但他们戴着假鼻子,假扮自己的牙齿和假发,真的把你弄得一团糟。

“哑巴”是勇敢新世界的好口号

*嘿,我从未声称它们是好的理由。我只想写一篇非常成功的博文,标题很吸引人,经常被推到微博上。

将移动网络固定在台外

星期四,5月30日,二千零一十三

最后几天我在阳光明媚的杜塞尔多夫参加了在电视之外会议,由我的好朋友和合作伙伴组织的8位犯罪,马克·蒂勒.

聚集在台下
扬声器欢迎礼包,为每个人定制

我已经说了很长一段时间了,会议的成功和质量与组织者的热情和电视台以外的人有着不可思议的联系,你击中了千斤顶,作为演讲者和与会者。我可以对这次会议的伟大程度充满诗意,除了我的同事,谈话有多多样化,地点也有多古怪。马尔科·泽赫在会议记录上做得更好.可以说,我真的很喜欢它,并认为它是目前欧洲最好的会议之一。我特别喜欢这样一个明智的决定:不必为餐饮而烦恼,而是把人们带到一个有很多餐馆的地方,给他们一个更长的休息时间。总而言之,日程安排给网络带来了很大的休息,根本没有匆忙的感觉。

在第二天的开场白上,我既害怕又非常荣幸,我的任务是在晚会结束前一天晚上叫醒人群,并为剩下的一天设定基调。

在我的主旨固定移动网络,我解释说,我担心我们的工艺缺乏对质量的热情,取而代之的是进行一场惊险的速度竞赛,发布越来越快。我还指出了我们是如何得到很多承诺的HTML5这对我们来说意味着,被那些挥舞旗帜最多的平台击倒,称之为闪电死亡。然后我解释了FireFoxOS是如何弥合这一鸿沟并履行这些承诺的,同时也是数百万新用户对网络的第一印象,我们的工作是他们首先使用的东西。

我录了一个谈话的剧本有一些音频问题,但在组织者发布高质量的视频之前,它仍然可以让你对发生的事情有一个很好的了解。

会谈结束后,我还和德国网络杂志t3n坐下来在我的谈话和会议的印象上录一段快速视频(德语).这个视频在这里.

此外,还有一个德国的录音,我用工作草图一旦他们编辑了播客,就可以更详细地了解FireFoxOS和我的演示。

总之,我要感谢所有参与的人。那些来看我们说话的人,其他演讲者都表现出色,组织者、赞助商和工作人员。很有趣,很快就会回来,那就去看看电视台那边吧。

给“图像旋转”香草网饮食治疗

星期五,5月17日,二千零一十三

在我为即将出版的第四本书撰写的章节中,我谈到了“香草网络饮食”和一些制作研讨会,我认为最好在一个例子中展示如何通过重新思考使一个看似好的解决方案变得更好。香草网络饮食原理铭记在心。

我的目标是图像旋转效果那是几天前发布在CSS技巧.我送我的解决方案对于作者来说,他非常有兴趣了解更多关于原因的信息。它的效果是有效的,它的作用是激励人们去玩它。这些评论表明,很多开发人员都有机会创建自己的解决方案,解决我将在这里讨论的一些问题。我最喜欢的可能是Eduardo Garc_a Sanz纯的CSS解决方案对我来说,如果你不需要触摸支持或键盘访问,这是一个很好的计划来达到这样的效果。


在我被指责“痛恨”之前——代码可以作为一个演示,让创造性的果汁流动,但它有许多问题,在生产中使用时会出现。它还依赖于鼠标,不适用于触摸设备。因此,我将首先说明我对已发布的解决方案所发现的问题,然后解释如何处理该问题,使其尽可能简单和可维护。我还添加了对鼠标的支持,键盘和触摸访问,并试图达到效果,而不是阻挡人。

如果你愿意的话把这个看成是一个电影放映,这是我录下来的解释这些想法的一个,我在原始代码中发现的问题以及解决方案的工作方式。这是活生生的。

我们需要多少加价?

我们先看一下CSS技巧文章。
这个HTML如下所示:


              
              身份证件=
              “面孔”
              >
             
  
               
               身份证件=
               “面区”
               >
              
    
                
                身份证件=
                “图像-1” 
                风格=
                “显示:无;”
                >
               
      
                 
                 SRC=
                 “/images/look-left-3.jpg”图片
                 >
                
    >
    
                 
                 身份证件=
                 “图像-2” 
                 风格=
                 “显示:无;”
                 >
                
      
                  
                  SRC=
                  “/images/look-left-2.jpg”图片
                  >
                 
    >
    
                  
                  身份证件=
                  “图像-3” 
                  风格=
                  “显示:无;”
                  >
                 
      
                   
                   SRC=
                   “/images/look-left-1.jpg”图片
                   >
                   >
    
                   
                   身份证件=
                   “图像-4” 
                   风格=
                   “显示:无;”
                   >
                   
                    
                    SRC=
                    “/images/look center.jpg”图片
                    >
                    > 
                    
                    身份证件=
                    “IMAGE -5” 
                    风格=
                    “显示:无;”
                    >
                    
                     
                     SRC=
                     “/images/look-right-1.jpg/图片/look-right-1.jpg”
                     >
                     > 
                     
                     身份证件=
                     “图像-6” 
                     风格=
                     “显示:无;”
                     >
                     
                      
                      SRC=
                      “/images/look-right-2.jpg/图片/look-right-2.jpg”
                      >
                      > 
                      
                      身份证件=
                      “图像-7” 
                      风格=
                      “显示:无;”
                      >
                      
                       
                       SRC=
                       “/images/look-right-3.jpg/图片/look-right-3.jpg”
                       >
                       > 
                       
                       身份证件=
                       “面覆盖”
                       >
                       
                        
                        =
                        “三张脸” 
                        数据编号=
                        “1”
                        >
                        >
                        
                        
                        =
                        “三张脸” 
                        数据编号=
                        “2”
                        >
                        > 
                        
                        =
                        “三张脸” 
                        数据编号=
                        “3”
                        >
                        >
                        
                        
                        =
                        “三张脸” 
                        数据编号=
                        “4”
                        >
                        >
                        
                        
                        =
                        “三张脸” 
                        数据编号=
                        “5”
                        >
                        >
                        
                        
                        =
                        “三张脸” 
                        数据编号=
                        “6”
                        >
                        >
                        
                        
                        =
                        “三张脸” 
                        数据编号=
                        “7”
                        >
                        >
                        > >
                     > 
                   

警告标志1:重复HTML没有逻辑连接的结构

这是一个很常见的错误,我看到当开始这样的效果。我们创建一些包含内容的东西,然后再创建一些可以用来显示效果的东西。因此,我们失去了已经与父元素交互并使用事件处理来发现我们在哪里的好处。我想历史上这是基于“仅CSS解决方案”,需要这种分离,因为你无法计算或检测鼠标的位置CSS.

当我们为一个效果创建两个独立的标记集时,我们需要找到一种方法,将与之交互的元素连接到我们想要显示的元素。这意味着向所有元素添加ID,对我们交互的所有元素进行类处理,并使用数据属性来判断要显示的图像。这对可维护性不利。如果我们添加图像,我们还需要添加一个元素来进行交互。伟大的代码是为了使维护尽可能容易。在添加或删除图像时,我们需要处理很多依赖项。

警告标志2:缺乏语义标记


我还有一个抱怨 HTML这一点意义都没有。因为图像的顺序很重要,右边 HTML这里使用的构造是一个有序的列表。

警告标志3:缺少替代内容


另一个大 HTML错误是添加没有alt属性的图像。这意味着屏幕阅读器用户将获得向他们读出的图像的文件路径。要么提供一个明智的可选文本,要么添加一个alt=“”以对屏幕阅读器隐藏图像。

警告标志4:对元素数量的依赖性


这里对我来说一个重要的警告标志是,我们的效果取决于小部件中的图像数量,我们需要将数据属性和ID一起维护,尽管它们在不同的元素上。

我们添加的元素越多,就意味着需要维护的ID就越多。这不是编码的目的。计算机擅长为我们计算事物。

警告标志5:空元素和内嵌样式

每当我看到内联样式时,我就知道出了问题。它们没有意义,如果有的话,它们应该只由代码生成,不是人类。空的也一样HTML元素:你可能做了一些不需要的额外工作。HTML是否要包含内容或提供交互。如果有很多空的div没有明显的模板化用例,出了点问题。

没有权力CSS

这个CSS解决办法不多,它也没什么作用。可惜的是,视觉维护人员更容易改变CSS而不是更改javascript。

身体{
  背景 α333 
}
矢面 {
  高度 33 3PX
  宽度 500 px
  边缘  汽车
  边境 8倍 固体 白色
}
面面积 {
  高度 500 px
  宽度 33 3PX
  位置 相对的
}
诳面诳叠加 {
  位置 绝对的
  宽度 500 px
  顶部 
  左边 
}
矢面 他们的脸 {
  高度 33 3PX
  宽度 14.2857143%
  浮动 左边
  边缘 
  衬垫 
}

警告标志6:CSS取决于元素的数量

这里最突出的问题是“宽度:14.2857143%;”,它是通过将100%分成七部分来计算的。这意味着如果从HTML,您还需要更改CSS宽度在这里。您不应该依赖于您的CSS,因为它们很容易改变。在这种情况下,尤其是没有合理的方法来找出这是宽度的原因。CSScalc()至少可以使这一点变得明显,但一般来说,创建与一定数量元素相关的外观和感觉是一个坏主意。

金鱼JQuery

使效果起作用的jquery代码非常短:

//显示“中心”图像
变量中心图像=$()“图像-4”.显示()
//将悬停绑定到每列$()“他们的脸”.每个()功能() {$().()“鼠标开关” 功能() {$()“形象” +$().收件人()“数据号”.显示()
  }.()“鼠嘴”功能() {$()“形象” +$().收件人()“数据号”.隐藏()
  }
}
//重置中心图像$()“面部区域”.()“鼠标离开” 功能() {中心图像。显示()
}.()“鼠标器” 功能() {中心图像。隐藏()
}

它是,然而,对浏览器要求很高。减缓浏览器的速度有很多种方法——最具破坏性的是繁重的计算,访问DOM以及大量的事件处理。后两个是我们在这里做的。

警告标志7:缺少数据缓存

我们用类“.u faces”循环所有元素,并向每个元素添加mouseover和mouseout处理程序。每次开火,我们读取一个属性,用它创建一个字符串,并访问一个具有该字符串ID的元素,然后显示或隐藏它。使用jquery方法显示和隐藏是对DOM当它处理显示样式属性时。我们在前面显示和隐藏“中心图像”,也在整个父元素的另一个事件处理程序上显示和隐藏。

如果我们要添加触摸和键盘处理程序,我们会将分配的事件处理程序的数量增加三倍,因为我们将它们应用于每个图像。

我称之为金鱼代码——我们一直在向浏览器询问我们应该知道的事情。我们这里的小部件接口是静态的HTML-不加载内容,没有变化。因此,连续读取数据编号属性是什么,并要求浏览器查找具有特定ID的元素是没有意义的。缓存结果是一件非常简单的事情,性能优势是惊人的。

香草网络饮食方式的再思考

我通过研究我们在这里需要做的事情来找到解决方案:

  • 我们有一个特定大小的小部件,里面有图像
  • 我们有一个未知数量的图像-应该很容易删除或添加一个或全部替换它们
  • 将鼠标移动到小部件上应该循环浏览图像,同时触摸小部件也应该这样做,如果能用键盘前后翻转就好了。
  • 如果事情不能解决,最好还是有一个仍然有意义的显示器。

这个HTML-我们不需要ID或数据属性


              
              HREF=
              “//www.2-u-neek.com/productpage”页 
              身份证件=
              “翻滚”
              >
             

              
               >
              
  
             
              >
             
             
             SRC=
             “图片/img_0518.jpg”中高音
             
             >
             >
            
  
             
              >
             
             
             SRC=
             “图片/img_0517.jpg” 
             中高音=
             
             >
             >
            
  
             
              >
             
             
             SRC=
             “图片/img_0516.jpg” 
             中高音=
             
             >
             >
            
  
             
              >
             
             
             =
             “电流” 
             SRC=
             “图片/img_0515.jpg” 
             中高音=
             
             >
             >
            
  
             
              >
             
             
             SRC=
             “图片/img_0519.jpg” 
             中高音=
             
             >
             >
            
  
             
              >
             
             
             SRC=
             “图片/img_0520.jpg” 
             中高音=
             
             >
             >
            
  
             
              >
             
             
             SRC=
             “图片/img_0521.jpg” 
             中高音=
             
             >
             >
            
>
>

我们应该把它和一些东西联系起来——毕竟,像这样的美丽的效果应该会在一些销售或深度潜水中产生反应,正确的?好东西在里面HTML5链接可以包含其他元素。所以我们添加的只是一个链接。这会自动为我们提供对小部件的键盘访问,否则我们必须使用漫游选项卡索引.

因为图像的顺序很重要,ol是要使用的正确元素。每个图像都有一个空的alt属性,以确保屏幕阅读器不会遇到麻烦。我们不定义要在JavaScript中显示的第一个图像,而是将其保存在HTML,同样,通过在图像中添加一个“当前”类。

显示和隐藏CSS

身体{
  字体族阿拉里 无衬线
}
翻滚JS {
  显示 
  边缘 2EM
  Z指数 
  位置 相对的
  高度 27 0px
  宽度 200 PX
  光标 没有人
}
翻滚JS即时消息{
  宽度 100%
  位置 绝对的
  顶部 
  左边 
  能见度 隐藏的
}
翻滚JS即时消息电流 {
  能见度 看得见的
}

因为我们的功能依赖于javascript,我们的风格应该是,也是。当javascript可用时,我们可以通过向元素添加“js”类来实现这一点,并且只在需要时应用样式。这个CSS给小部件一个固定的大小,并将所有图像放在里面。

而不是在javascript中执行hide()和show()。我们需要做的就是将一个“current”类应用到我们需要显示的元素上。所有的隐藏和展示都是这样完成的CSS这意味着在未来,我们会想用“显示的”和“隐藏的”图像做其他视觉上的事情,我们只需要改变CSS.

()功能(){如果 ()文件。查询选择器 {变量倾翻=文件。查询选择器()“翻滚”倾翻。类名 = 'JS'变量图像=倾翻。查询选择单元格()“IMG”
    变量全部的=图像。长度
    变量宽度=倾翻。偏移宽度
    变量公牛=倾翻。向左偏移
    变量边界宽度=宽度/全部的
    变量现在的= 
    变量X= 
    变量指数= 
    变量感动的= 变量整定电流= 功能()指数 {
      如果 ()图像[指数] {图像[现在的].类名 = 图像[指数].类名 = '当前'现在的=指数
      }
    }变量发现指数= 功能()X {指数=帕林特()()X-公牛 /边界宽度 
      如果 ()指数!=现在的 {整定电流()指数
      }
    }倾翻。添加事件侦听器()摩斯莫夫 功能()电动汽车 {
      如果 ()感动的 {发现指数()电动汽车。客户群
      }
    } 倾翻。添加事件侦听器()“触摸开始” 功能()电动汽车 {感动的= 
    } 倾翻。添加事件侦听器()“触角” 功能()电动汽车 {感动的= 
    } 倾翻。添加事件侦听器()“触摸移动” 功能()电动汽车 {
      如果 ()感动的 {发现指数()电动汽车。改变接触[].客户群电动汽车。防止违约()
      }
    } 倾翻。添加事件侦听器()“按键” 功能()电动汽车 {
      变量钥匙=电动汽车。烧焦 _电动汽车。钥匙 _电动汽车。哪一个
      如果 ()钥匙= 三十七 {指数=指数- }
      如果 ()钥匙= 三十九 {指数=指数+ }
      如果 ()指数<  {指数= }
      如果 ()指数>全部的-  {指数=全部的- }整定电流()指数
    } 如果 ()倾翻。查询选择器()“电流” {
      对于 ()变量= <全部的++ {
        如果 ()图像[].类名 = '当前' {现在的=
          打破
        }
      }
    } 其他的 {整定电流()现在的
    }
  }
}()

比jquery更长,但请容忍我,因为这会做得更多,要求也更少。我们将代码包装在一个闭包中,以确保不会留下任何令人讨厌的全局数据。这应该永远是第一步。

然后我们测试浏览器是否支持document.queryselector。这是jquery的$()的标准答案,许多优秀的浏览器都支持它。旧的和过时的浏览器不支持它,这就是为什么测试它是一个好主意。这意味着旧的Internet Explorer版本将不会产生效果,而是将图像作为编号列表(当我们CSS依赖于用javascript应用的类)。这很好,因为这意味着我们不需要在这些旧浏览器上测试,这很难做到,坦率地说,是浪费我们的时间。

我们使用document.queryselector()。并添加“js”类。这将隐藏所有图像,并设置小部件的外观和感觉-所有这些都在CSS.不需要循环遍历许多元素,也不需要使用内联样式来隐藏它们。

接下来我们得到所有DOM我们需要的元素,并计算出当鼠标光标或手指位于小部件的某一部分时,我们需要找出显示什么。

首先,我们得到所有的图像并将它们存储在图像.当页面打开时,这不会改变,和查询选择单元格()。给了我们所有的参考。我们将图像的数量存储在全部的与以后的比较。

接下来,我们动态地做原始解决方案手工做的事情——计算显示和隐藏图像的不同交互条带的宽度。我们通过阅读偏移宽度在中定义的小部件CSS,所以我们不知道也不想在我们的javascript中硬连接任何宽度。我们通过阅读向左偏移财产和存储公牛.然后,我们通过将小部件的宽度除以图像的数量来计算交互边界的宽度,并将其存储在边界宽度.

这使得小部件可以灵活地随时更改CSS图像的变化或数量。如果删除或添加图像,边界宽度是新计算的。无需更改CSS以反映这种宽度。我们现在只需添加或删除列表项就可以维护它。

我们将当前显示的图像索引定义为0,预设的X变量为0,定义当前指数检测到的移动为0并设置感动的错了。

这个指数将图像的索引显示在交互的某个点上。当前显示的索引存储在现在的X将被检测到鼠标或手指在屏幕上的位置感动的定义当前是否触摸屏幕。

这个设置当前()函数隐藏最后显示的图像,并通过将“当前”类从一个类移动到另一个类来显示新的图像。然后它将新的图像索引存储在current中。这是一种非常简单的方法,可以在一组一次只能显示一个状态的事物中显示一个新状态。当我们可以将它存储在变量中时,无需询问浏览器哪一个是可见的现在的.

这个查找索引()函数将检测到的鼠标光标或用户手指的水平位置转换为图像数组的索引。您所需要做的就是减去小部件本身的左侧位置,然后将值除以边界宽度。将其转换为整数并与当前索引进行比较,如果不同,呼叫设置当前().

剩下的就是分配事件处理程序来实现魔力。第一个是调用查找索引()当没有任何接触时。当前水平鼠标位置存储在客户群移动鼠标事件。

需要启动触摸交互(至少在我这里测试的chrome中),因此我们设置感动的当一个真触启发生错误的时间接触端检测到。

当用户在小部件上移动手指时,浏览器将激发触摸移动事件和当前水平位置存储在客户群性质改变接触数组。在这种情况下,我们只检测第一根手指。

键盘检测不能给我们在屏幕上的位置,所以我们要做的就是直接操作图像索引。我们倾听键盘按下事件并检查按下的键的代码。如果是左箭头,我们从当前索引中减去一个,如果是右箭头,我们向其添加一个。我们确保索引保持在允许的范围内并调用设置当前().

最后要做的是显示当前图像。如果有一个在HTML我们需要找出它的索引,我们通过循环查找它们直到找到正确的索引。如果没有,我们只将当前类应用于第一个映像(在脚本开始时定义)。

同一想法的许多解决方案

我希望这能给你一个想法,当你想把它投入生产的时候,如何达到这样的效果。当然还有其他的方法,但我想确保一些经常被遗忘的事情:

  • 整个效果现在是由HTML,因此,创建新的旋转所需做的就是添加其他图像
  • 整个外观和感觉在CSS您可以调整小部件的大小,而不必担心不同边界的大小。
  • 它可以和键盘一起使用,鼠标或触控设备
  • 这个DOM交互作用保持在绝对最小值,这意味着低规格设备的性能非常好,好得多
  • 没有jquery依赖项

关于“移动网络”和网站的几个问题和答案。应用程序

星期三,5月15日,二千零一十三

我刚被要求为“移动网络专家”的一项调查提供一些答案,我认为在这里重复使用这些答案会很好。所以这里是:

网站和Web应用程序有什么区别?


有一些不同之处。在一个非常基本的层面上,应用程序是为做事情而设计的,而网站则是为消费提供内容。网站从结构化开始,相互关联的学术文件。后来,我们添加了多媒体内容,使它们更具吸引力,但所有这些内容都固定在它们的状态中。
应用程序更加动态。它们允许对界面进行定制,并存储发生的情况,这样当您回到界面时,您可以从停止的地方继续。

应用程序的用例应该总是与它有关。这可以简单到投票决定你是多么喜欢一张小猫的照片,甚至可以直接在你的浏览器或设备上编辑视频内容。基本的例子是作为应用程序的Webmail客户端和作为网站点击的纯图像库。

网站是静态的,而Web应用程序有原子更新,而且它们本身的占地面积非常小,因为大多数内容随后会被加载,并且每次使用它时都会发生更改。

总而言之,它是一个滑动比例,例如,如果一个图像库允许您上传自己的图像,或者编辑和重新混合浏览器中的现有图像,那么它很容易成为一个应用程序。这是Web技术的主要好处之一,它非常灵活,允许对最终产品进行快速简单的更改,而不会受到复杂编译的阻碍,打包和部署过程。

一个网站应该具备什么样的功能才能成为一个Web应用程序?


再一次,有很多事情要考虑。一个主要的问题是一个应用程序可以很好地完成一件事和一件事。它可以帮助你做一些事情。

从技术上讲,它应该表现得像旧的胖客户端应用程序:它应该保留我的状态和设置,允许我根据需要定制接口,它需要离线工作。后者在定义上不是技术上的必要性,但对我来说却是至关重要的可用性。看到我们的连接有多不稳定——我在飞机上写这篇文章——我们的应用程序应该使人们尽可能有效,这意味着我们不应该依赖于连接。这个界面应该在我们脱离电网的时候可用,并且一上线就同步。

定制和个性化的界面和互动性使我成为一个应用程序。这可能只是一个游戏,我可以改变我的性格,得到额外的我玩得越多。对我来说,一个合适的“web”应用程序也应该尽可能地使用web。例如,我对在手机上玩游戏感到非常沮丧,当我在平板电脑上玩同一个游戏时,虽然设备知道我是谁,但我的分数和成就并没有同步。那为什么要上网呢?

许多设计不好的Web应用程序只是一些内容的包装,比如新闻提要。例如,将博客变成应用程序是一个毫无意义的练习。它只是增加了安装包装器的开销,当我厌倦了博客,但没有给我定义应用程序的“做点什么”部分时,更新并卸载它。

如果我不与它互动,除了阅读,没有任何意义使它成为一个应用程序。在打包时,您会失去很多Web的灵活性HTML作为本地应用程序,最重要的是不透明更新。托管在网络上的应用程序可以进行修补和升级,而无需最终用户下载兆字节的数据。这对于缓慢或脆弱的连接非常有用。而不是整个应用程序,你只下载更改。

移动友好型网站和移动Web应用程序有什么区别?


移动友好型网站是一个检测显示设备功能的网站,它不会假设我的屏幕有多大,是否有鼠标和键盘。它在设备的浏览器中运行,因此受到其局限性的阻碍——在旧的Android设备中,这确实是相当有限的。它在显示变化方面迎合了移动空间——单列显示,较大字体,较大的按钮。

移动Web应用程序是一个应用程序,它使用独立运行的Web技术构建,全屏幕包装,而不是在浏览器中。它利用了当前环境允许的所有功能。例如,它在本地存储内容和内容本身,而不是每次打开时都必须在线请求所有新内容。它可以访问某些环境的特殊功能,如刷卡手势,用于交互或访问相机以获取内容的加速度计。它的目的是让我做一些事情,而不仅仅是像访问网站一样访问它。

你认为是什么使HTML5(与Flash和Java相反)开发移动Web应用程序的1个选择?


灵活性是 HTML5.很容易做一个 HTML5应用程序适应新环境,并制作一个界面,显示和隐藏依赖于设备或环境功能的内容和功能。Java和Flash都不是“Web母语”,也就是说,在看到结果之前,您需要在浏览器中启动和执行自己的代码环境。这阻碍了包含文档和Flash电影或Java小程序的内容的交互性。虽然Java和Flash都有非常好的开发工具和能力,一旦它们可用,它们对运行的硬件就非常苛刻。这就是iOS设备没有闪存的原因。已经有了一个完全可用的环境——浏览器——在其中执行另一个环境意味着要使用大量资源。在移动设备上,这意味着更短的电池寿命和设备快速加热。

HTML5我们有机会改进移动设备,支持网络的设备已经必须具备——一个浏览环境。这些都是开放源码和免费的(火狐,Chromium和其他公司)和开发人员可以在不需要注册一家公司的情况下构建应用程序SDK开始。

所有环境都有它们的用途,而且有一些事情在闪存中比在HTML5.把赌注押在开放技术和浏览器上意味着你很可能有足够的灵活性来适应即将到来的下一个环境。网络总是围绕着市场的需求不断发展和变化。这就是为什么多媒体HTML5只是文档的另一个元素,而不是不能与其他浏览器或文档交互的黑洞。

你认为移动网络的发展方向是什么?你看到移动网络的未来吗?


没有移动网络。这就是网络。现在我们开始越来越多地在移动设备上使用它。太酷了。网络已经完全准备好了,因为它足够灵活,可以适应。

如果您使用Web标准技术构建期望某个设备的应用程序,屏幕的固定大小,一种特殊的用户交互方式或期望快速连接,您正在构建一个非常有限且非常快过时的软件。

在过去的几年里,我们应该知道硬件是一种商品,很容易受到突然变化的影响。必威体育下载一个惊人的硬件,现在是热门的新事物,明天可能会令人尴尬地过时。

当你构建你的网络应用程序仅仅是为了迎合这个需求时,你会尝试成为本地代码,这是一个你无法取胜的竞赛。许多本地应用程序的建立是为了推广新的硬件并让人们升级。这是一种销售更多产品的古老技术,称为“内置过时”。

Web应用程序应该超出这个范围。我们的工作是为最终用户提供当前设备上可能的最佳体验,但不使其成为必要条件。我们在过去犯过这个错误,这就是为什么你看到Web应用程序告诉你需要“像Internet Explorer 6这样的现代浏览器”和“至少800×600分辨率”的原因。

高端设备上的本地应用程序现在做得非常好,但我可以预见,人们会厌倦每年都要买一部新手机,只是为了获得新的功能,而这些功能在你考虑成本时并不那么重要。对于那些想用自己的方式消费和创造,而不是依赖某个公司的成功或目标的人来说,网络将一直是开放的选择。

“只需使用技术$X”是一个问题的糟糕答案。

星期一,5月13日,二千零一十三

几天前垂直视频染上病毒学生杰夫·布利斯因为老师不好而训斥老师。他们只是分发材料却不解释。

我们都为他的胆量和求知欲以及指出教育体系中明显的缺陷而喝彩。必威体育下载教师工资不够,被视为一个成绩优秀的学生而不是理解力强的人,他们的压力更大,他们必须提供他们不相信但被迫通过的课程材料,因为这些材料是容易标记的。

可怕的,不是吗?那么,为什么我们这个小小的网络开发世界里的人们总是自愿地变得如此糟糕呢?无聊和无能的老师?

我在说什么?我提到的事情今年我在培根会议上的演讲中有很多细节但对于那些想要140个字符的东西,或者想要一个上面有大字的可爱形象的一代人来说:

每当你用“只需使用$X”回答另一个开发者的问题时,你就会培养出一个专家级的白痴。你什么都没教他们,你展示了一种学习的方法。必威体育下载

在我正在进行的消除生活混乱的任务中,我刚刚在Google+上取消了几个社区的订阅,即HTML5社区和JavaScript。不是因为我对这些事不再感兴趣,恰恰相反:因为我非常关心这些社区,我所发现的一切都是挫折和烦恼。几乎每一个新开发人员提出的问题都有三种答案:

  • 使用jquery–这里有一个插件
  • 只需要谷歌
  • 您需要使用框架$x/javascript和/或HTML5还不够好

如果你真的想帮助那些需要解决问题并学习如何在未来重复解决问题的人,这些答案都不是令人满意的。必威体育下载在大多数情况下,后者都是一个很明显的谎言,表明你把对某项技术缺乏兴趣归咎于它。

回答得太快的是“如何”——如何在不考虑或不理解您所应用的解决方案的情况下实现一个非常复杂的结果(但必须证明这是真正必要的)。我们假设这已经足够了,而且我们正在做一些好事——我们让一个新的开发人员有一个非常快取得成果的积极经验,这显然会吸引他或她学习更多,并在以后进行更详细的探索。必威体育下载

不一定是这样。我们向人们展示了一条捷径,以及如何专注于结果,并希望他们理解自己正在做的事情的步骤能在稍后到来。不幸的是,在很多情况下,这种情况永远不会出现,但它让人们充满了虚假的信心,一旦他们在一家真正关心自己建设的公司接受了第一次工作面试,这种信心就会崩溃。

如果你想教人,让他们理解“为什么”,让他们找到自己的“如何”.这是很难的工作,但当你看到它们成长和探索的时候,你会得到更多的回报。

我们不教人们如何通过复制和粘贴其他作者的风格来写作。我们告诉他们关于明喻的事,隐喻,修辞手段,拼写和语法规则。为什么要这样?我们可以让他们看看TXTSPK并解释说,任何懂英语的人都会理解他们试图表达的意思。我们这样做的原因是我们教你玩语言和找到自己的风格的乐趣。

“但我没有时间去做这件事——我只是想帮助别人解决他们的问题。”

是很常见的,好极了,但错误的想法。你所做的就是宣传你认为最有意义的解决方案,因为你已经解决了这个问题。你把学习经验从别人身上偷走,必威体育下载我们学习的方式是我们最个人的财产,而且在每个人身上都有很大的不同。

如果你不想真正地教导和看到人们以自己的方式成长和学习,必威体育下载请不要在人们来学习的地方说真话和“最好的快速解决方案”。必威体育下载如果他们只想让你解决他们的问题,他们应该雇你来帮他们。

不要做你学会了先鄙视,后怜悯的脾气暴躁的老师。必威体育下载我们可以在网上做得更好。