亚洲六月丁香色婷婷综合久久-亚洲乱码在线视频-亚洲乱人伦精品图片-亚洲伦理精品久久-亚洲伦理一区二区

推廣 熱搜: 進口  企業  河南  未來  大地  朝鮮  曙光  上海  其他  龍江 

看波士頓環球報是如何借助HTML5實現響應式設計的

   日期:2012-01-18     來源:ZYD創業網    作者:zyidi    瀏覽:194    評論:0    

設備識別和適應屏幕的尺寸帶來的問題

Marquis:到目前為止,我們根據屏幕的尺寸來確定顯示什么樣內容和提供怎樣功能。所以,不存在這樣的情況,“OK,如果用戶使用的是安卓客戶端,他們獲取到的是XYZ,如果用戶使用iPad,他們獲取到其他的內容。”如果用戶使用的是觸控的設備,特定的功能和意愿需要額外添加Javascript來實現。因此,我們只給特定的用戶提供特定的功能。我們不會說iPad用戶使用的是這種布局,而是某個尺寸的設備會使用什么樣的布局。

Parker:我們從沒做過用戶代理檢測,這是個大忌。因此,網站完全是開放式的。我們專注于性能和兼容性,我們檢測設備,以便按照其需求動態加載內容。這就是為什么每個設備下載的內容都會有非常簡潔的體驗??赡苓@個平板能夠支持觸摸事件,而另外的一個就不行。由于分辨率的不同,它們獲取到的布局就會不同。

Marquis:顯然,我們的計劃并不包括在所有情況下,任何人都能夠使用游戲機打開它,但是,最近有人這樣做的時候,它的確表現地非常出色。

Parker:我認為最大的優勢就是我們采取的是一個不可知的辦法,而不是關注特定用戶的需求。我們的方法完全關注兼容性,這樣一來,我們使用jQuery的時候,拿到測試設備的時候(我們不間斷地拿到這些設備),在這些我們從沒見過的設備上進行測試的時候,Globe看上去非常棒,我們不需要擔心兼容性的問題。隨著設備源源不斷地面世,這會是一個兼容的方法,并且能夠在舊的設備上使用,因為我們在做漸進式增強。不久之后,在你的Newtons和舊版的Palms,或者類似的設備,都能夠閱讀Globe。

為什么這個功能現在才實現?

Parker:我想,也許一年半之前應該實現的,這只是把一些技術碎片拼在一起的問題。

Marquis:我認為,之前,某些方面是應該能夠實現的。我是說,HTML5為目標功能提供更多可用接口,比如說,檢查設備是否提供觸屏支持,從技術上來說,這是通過HTML5來實現的,雖然并不是利用HTML5標記來實現的。然而,毫無疑問,HTML5為我們實現特定的下載提供了支持。說到標記本身,HTML5通過另外的語義,為我們提供了很多功能。利用HTML4,這些功能也能夠實現,只不過標記并沒有那么豐富的語義。

Parker:對于我們來說,我們一直關注通用訪問的問題。我們大部分精力都花在這上面,算下來已經有10年了,尤其是我。我想,大多數人只是在把這些技術碎片拼起來的時候慢了一步,現在我們擁有了核心工具,我們需要讓這些工具可用。比如說,一年前我們寫了一本書,關于漸進式增強。那就是我們創建Globe的基礎。以一種簡潔、不顯眼的方式在CSS和JavaScript上增加簡潔語義的HTML語言?,F在我們做了更多區分,不如說我們提供更多的兼容性以使用戶得到更好的體驗。說穿了,我們所做的這些全都取決于用戶的屏幕尺寸,下一步,我們將把目標轉向布局。

Marquis:我想,我最喜歡舉的例子就是我們打算做的填字游戲,看上去就像是網站上的一個小部件一樣,我們開始使用由服務器端產生的有豐富語義的標記。因此,不管你的設備的兼容性如何,你都能獲取到這個字謎游戲,就像在一張平整的報紙上填答案一樣,沒有什么區別。今后,如果用戶的瀏覽器支持本地存儲,就是瀏覽器能夠存儲數據的問題,我們就能添加一個按鈕,讓用戶保存未完成的游戲,下次打開的時候接著玩。

響應設計下一步是什么?

Paker:我們給企業做了很多應用設計,或者類似的內容。在我看來,做更實用的東西會是一個挑戰。環球報證明,在內容布局上,可以做出一些很酷的東西來。但是,如果你有一個應用程序,它有豐富的可視化GUI,或者你正在使用類似商務應用的表格數據。我認為這是我們下一件要證明的事情。我有信心能做到的,這只是投入時間去做的問題。我們確實在為一些這個領域的客戶,做一些類似的項目。所以,這是一個有趣的時刻。

其他挑戰

Marquis:第三方服務是我們遇到的最大挑戰之一。僅僅是在提供廣告和其它功能上,我們不得不和他們周旋,找到他們默認提供的標記和腳本。

Paker:在設計過程中,需要考慮的一件事就是,目標設備的廣泛程度。從智能手機到寬屏桌面電腦,從1200像素到更大的像素。所以,在設計這些網頁時,我們思考把這些設計結合在一起會得到什么樣的產品。

Globe和Upstatement之間有非常緊密的合作關系,關于屏幕尺寸的問題,還有很多需要完善的地方。我認為,它肯定會改變設計過程,因為這沒有人會堅持一成不變的形式。

Marquis:這之間沒有一個交接的過程,在你把它交給到下一個團隊時,他們僅僅是運行它。他們需要經常性的對話。團隊之間需要經常交流。

這時,Filament Group中負責UI的 Scott Jehl,加入了我們的對話,討論他們在開發中用到的工具。

你們使用的是什么工具?

Scott Jehl:在整個網站中,我們大部分使用的是jQuery,我們在幾個地方使用jQuery Mobile,比如,照片和觸摸交互。我認為,在加載jQuery之前,我們為代碼創建一個自定義框架,來處理JavaScript的動態加載。因此,我們只需要加載很少一部分內容,然后動態加載剩余部分。正是這樣的內容使它變得非常迅速。它是一種很不錯的行為。

當然,它使主要是jQuery,然后我們在它上面的插件,不僅使布局有視覺上的相應,還有行為上的。改變所有組件的行為、適應觸摸、不同的交互和條件,這些都會使情感在確定的內容上而不會在別的方面。

在許多方面,我們使用和其它站點一樣的方式來使用jQuery。jQuery本身什么都不做。作為一個框架,它會給你提供可以使用的工具,我們在此基礎之上進行開發。我認為最主要的區別,對Globe來說這不是一個獨特的功能,我們發現如果我們動態加載jQuery,在老版的設備上會有更好的表現。比如一款老版的Blackberry,4.5或5版,沒有運行jQuery。由于網站創建的方式在游戲中會出現延遲,并且在這種設備只總提供基本功能能夠有更好的表現。

本文編譯自Lisober,原文地址

譯文出處:webapptrendocom,轉載請注明出處鏈接。

 
打賞
 
更多>同類新資訊
0相關評論

推薦圖文
推薦新資訊
點擊排行
網站首頁  |  關于我們  |  聯系方式  |  使用協議  |  版權隱私  |  網站地圖  |  排名推廣  |  廣告服務  |  違規舉報  |  豫ICP備14023129號
 
主站蜘蛛池模板: 国产精品亚洲片在线观看不卡 | a级黄色毛片三个搞一 | 女人牲交一级毛片 | 亚洲精品福利 | 国产91在线|亚洲 | 狠狠久久 | 国产精品亚洲高清一区二区 | 日韩一区二区三区四区 | 女人被狂躁的视频免费动图 | 日本一级毛片免费播 | 撸大师视频在线观看 | 国产v综合v亚洲欧美大片 | 真实国产精品视频国产网 | 中国一级片 | 欧美性猛交xxxx免费看蜜桃 | 一区二区日韩欧美 | 2022日本卡一卡二新区 | 日韩欧美中文字幕在线视频 | 1024香蕉视频 | 日韩 国产 欧美视频一区二区三区 | 一级一级女人真片 | 可以免费观看的毛片 | 亚洲欧美日产综合在线看 | 在线 亚洲 欧美 | 亚洲热图 | 国产人成亚洲第一网站在线播放 | 国产va免费精品观看精品 | 精品a视频| 久久99国产综合精品 | 欧美日韩亚洲综合 | 91在线视频在线观看 | 成人片免费看 | 末成年一级在线看片 | 日韩毛片在线观看 | 高清大学生毛片一级 | 亚洲四区| 在线播放日本爽快片 | 美国特级a毛片免费网站 | 国产一级爱c片免费播放 | 成人高清视频在线观看大全 | julia一区福利视频在线观看 |