2013-06-10

iPad上的HTML Editor蒐集...

From Evernote:

iPad上的HTML Editor蒐集...

大概是買了藍牙鍵盤後想好好利用一下,用iPad一直找有沒有好用的HTML Editor,結果找到幾款看起來介面還不錯的軟體,先彙整一下,日後來找適合自己的。

我想我平常對HTML Editor的需求有幾個:

  1. 可以立刻做預覽
  2. 可以Highlight(針對HTML、JavaScript、CSS當然越漂亮越好)
  3. 最好可以Auto Complete(能搭配套件更好)
  4. 可以跟GitHub同步(變相的作法跟Dropbox同步clone的版本也是可以)
  5. 有檔案樹狀圖可以清楚知道專案架構
大概就這幾個需求來說,有打到點的幾個HTML Edit:

Koder
這套主要是以有php編輯為賣點,對於Dropbox有支援(不過不知道是作為同步用,還是可以存取上面檔案),看起來編輯介面也頗順眼,有Firebug之類的debugger tool。

Markup
如其名所述,看起來只是個單純的文字編輯器+版面預覽工具,Highlight的部份很簡陋,也沒有什麼同步工具(只支援ftp),一套還要9.99......

Yelena
看起來是主打多種Highlight選擇的編輯工具,支援ftp/Dropbox等同步工具,神奇的是他似乎有自己的版控系統(這意味著用Git clone出來丟在Dropbox上的專案可能會跟他打架?)

Gusto
以專案管理為主的編輯工具,同樣只有ftp等同步手段,似乎沒什麼特別好提...

Textastic
看起來包山包海的Code Editor,HTML/JS/CSS/C++/Obj-C/PHP/Perl/Python等等一堆,所以Highlight功能完整,也支援Dropbox,但問題就在於他包山包海,所以沒有專屬HTML Preview的工具...

Diet Coda
在OSX上面紅極一時的HTML Editor,現在也有iPad版(也是一樣好貴...),基本上Highlight/Preview等功能應該都跟Mac版本一樣,還可以跟Coda2合體當做debugger tool,特別的是有內建SSH Terminal,等於送你一套SSH軟體(好不好用還不知道),但可惜的是只支援ftp同步,

另外,在搜尋的過程中找到一個看起來也頗有趣的玩具,也順手整理一下:

Codea
Codea似乎不是一般的Editor,他可以透過自己的API跟素材庫,用拖拉的方式做出一個可以動的APP,感覺滿炫的…

整理起來頗雜亂,日後再生一篇表格式的整理好了...

2013-06-07

Apple Wireless Keyboard + iPad初體驗...


天氣越來越熱,我的macbook air三不五時就透過鋁製外殼不斷地對我進行熱感應攻擊,我想在接下來如果沒有冷氣房我應該沒辦法跟他好好相處,於是就趁機買了一把Apple Wireless Keyboard...加上mba外接螢幕轉接線和滑鼠,就變成一臺假準系統,足以取代桌機使用,也不會燙手了...(然後我的桌機就正好壞掉了,這就是傳說中的抓交替嗎...

這篇文章是用Apple Wireless Keyboard跟iPad合體打出來的,主要是測試鍵盤跟iPad搭配起來好不好用,不過因為一般使用mba還是習慣用鍵盤切換軟體,所以在iPad上使用鍵盤總是有說不出的彆扭...不過以後出門也就不一定非得帶著mba不可,雖說取向還是不同,不過起碼可以切換平板模式和打字模式...


測試了幾個可能會大量輸入文字的App,Facebook使用上還算良好,Blogger也很棒(目前就是用Blogger軟體打文章),但是在Evernote上就很詭異,可能是Evernote必須要無時無刻跟雲端同步的原因,打的字會停頓很久才慢慢出現,這對於大量輸入來說只有痛苦而已。
這把鍵盤的按鍵配置和大小完全跟macbook air一模一樣,所以使用mba的人幾乎不會不適應,連保護膜之類的週邊也完全相容,就是價格有點硬,但是網拍上有許多沒有中文印刷的美版鍵盤,少了中文印刷其實還滿有質感的...另外還買了一組充電器,其實六顆1900am電池加上2Bay的充電器賣990的價格還算可以吧...

2013-05-30

iOS Safari配合桌機版Safari進行javascript的debug

From Evernote:

iOS Safari配合桌機版Safari進行javascript的debug

對於寫Web App的人而言,以往最麻煩的地方就是在行動裝置上非常難以debug,除了塞進一些在介面上顯示資訊的方式外幾乎別無他法,但是時代進步了,Apple跟Google聽到了長久以來開發者的哀號,都各自加入了本家瀏覽器跨裝置的debug tool。目前就iOS的Safari和Android上的Chrome都可在PC/Mac平台上與相對應的瀏覽器進行偵錯,這裡就先提iOS的部份。

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

iOS一向對開發者非常友善,Web Inspector功能在iOS6.0之後新增,Safari的debug設定流程也相當簡單。


iOS版的Safari可以在設定->Safari->Advanced中開啟Web Inspector功能。


PC/Mac版則是在偏好設定->進階當中,勾選"在選單列中顯示開發選單"。

到此已經設定完畢了,之後只要:
1. 接上iOS的USB後,利用Safari開啟網頁
2. 在PC/Mac的Safari選單列->開發->裝置當中,選擇你的裝置以及開啟的分頁

此時桌機的Safari就會打開偵錯工具,你可以利用此工具盡情的噴console.log以及盡情的下break point或是watch expression了!

LinkWithin

Related Posts with Thumbnails