HTML5頁面制作工具,大體分為兩類:基於HTML5的網站工具和手機APP工具(當然還有壹些其他的,例如基於微信公眾號的等,下面也會介紹)。
先總的說壹下個人感受
1.基於HTML5的工具網站:功能較強大,單頁面的操作性較強,可完成各種頁面交互效果;但是某些時候會有操作“失靈”的現象,如上傳圖片失敗,點擊保存失敗,生成失敗等。原因妳懂得~
2.手機工具APP:相比起工具網站來講,顯得比較順手,有大量模板套用,制作簡單快捷;但是拘泥於現有的模板,使得單頁面不會有較大的可操作空間,從而無法實現DIY交互效果。
下面展開說下每個使用過的工具吧
基於HTML5的工具網站:
兔展
優點:頁面DIY程度較高,動效實現起來也簡易方便,可制作比較任性的H5頁面。
缺點:屏幕界面大小不可調節,上傳的圖會比例失調;生成後到各尺寸屏上頁面會存在拉伸現象。
(此圖意在說明上傳的圖片的尺寸都是網站自己默認的壹個尺寸,不是圖片本身的尺寸,不利於使用者調整)
可以具體編輯,單頁操作性較高,有新手(有模板)和高階(無模板)兩種編輯模式;翻頁效果比兔展多,模板也更強大壹些。
居高互動刊
優點:最簡單易上手的工具之壹,根據提示壹步壹步的添加,***4步,最後生成微雜誌。相比其他在線工具,較穩定。
缺點:目前沒試通制作單頁上的交互效果,沒找到開啟pro功能的入口。
ANIMATRON
優點:像flash的在線版,功能強大,可以創建HTML5動畫。適合有動畫基礎的人做演示制作。
缺點:需要動畫制作基礎;工作界面響應時間長;貌似只能分享到twitter、Facebook、google+、tumblr?
iSpring7
噱頭是PPT轉HTML5工具,完美與PPT兼容,可制作Html5移動課件。
不過,目前我只能連著VPN再用Safari才能打開網站鏈接。
秀制作
優點:版式輕松,制作快捷,寬帶穩定。
缺點:對圖片和文字在各種屏幕上的顯示沒有做很好的適配;不能對模板中文字的編輯調整位置。
手機工具APP:
初頁
優點:模板質量高,套用模板編輯時效率高,操作簡單快捷,效果和體驗在制作H5頁面的APP工具裏面算是出類拔萃。
缺點:單頁面可操作性較低,僅支持套用模板。
快邀約快速制作邀請函
優點:易上手,省時高效,便於統計。
缺點:頁面簡陋,只能選擇固有模板創建文字和添加圖片。
易企秀中小微企業的移動場景營銷管家
優點:套用模板,創建快捷,用來做企業介紹、產品推薦。擁有強大的推廣統計、客戶管理功能。嗯,這裏應該贊壹個。
缺點:只能用模板,DIY程度低;統計數據是否準確需要進壹步確認,目前看來可能有遺漏數據的現象(在小範圍測試中,統計到的數量小於應有的數量)。
微貼:通過微信公眾號創建H5頁面
優點:手機公眾號內直接創建簡單頁面,根據提示創建即可,無腦方便快捷。
缺點:只是單頁面展示,承載不了交互效果等特效和更多內容。
總結
工具網站做的H5頁面,多註重單獨頁面的自定義交互方案,DIY程度高,相對來說用時較長,又受制於帶寬因素,故影響操作;
工具APP做的H5頁面,多註重效率,目前都是套用模板,因而對單頁面的DIY程度較低,交互效果受限。
作為我個人而言,移動互聯的新任PM,我平時常用到的是MAKA和兔展,這兩個相對來說更適合半天時間來完成;如想快速制作展示頁面就用初頁,這個在功能效率與設計感方面更突出壹些;組織活動、制作邀請函、分發活動通知等用快邀約;平時推廣新產品、聯絡客戶和招聘新人用易企秀。
如何在移動端上,也就是在手機上開發HTML?您說的是html5開發,針對移動端網頁設計必學的知識體系。
壹、HTML5支持測試列表
在開始之前,妳需要了解現代的瀏覽器以及移動平臺對於HTML5的支持情況。
主流瀏覽器HTML5功能支持壹覽
移動平臺HTML5支持壹覽
HTML5支持測試
HTML5演示
二、讓HTML5元素可用
老版本的IE瀏覽器不能識別新的HTML元素。但是,可以使用壹些JavaScript或CSS解決方案來彌補這個缺陷。
HTML5Shiv:此腳本可以使IE瀏覽器識別HTML5元素。
HTML5Enabler:功能與HTML5Shiv類似。
Modernizr:它使得開發者可以在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進行開發,同時又不會犧牲其他不支持這些新技術的瀏覽器的控制。
HTML5Reset:它提供了壹組HTML、CSS文件,讓妳能夠以最少的時間來啟動壹個新的項目。它使用modernizr來支持HTML5和CSS3。
三、瀏覽器插件
下面是壹些JavaScript插件,可以彌補壹些瀏覽器對HTML5的支持問題。
1.VideoJS
VideoJS是壹個HTML5的視頻播放器,可以在所有瀏覽器中使用,包括IE6和移動設備。對於不支持HTML5的瀏覽器則自動使用Flash播放器來播放。
2.AudioJS
HTML音頻播放器。用來讓HTML5的
標簽可以在各種瀏覽器上使用,包括移動設備。
3.HTML5Widget
HTML5的表單模塊,包括日歷,調色板,滑動部件,客戶端驗證等。
4.Webforms2
HTML5表單屬性的支持,例如pattern、required和autofocus。
5.LimeJS
LimeJS是HTML5的遊戲框架,用於為現代觸摸設備和桌面瀏覽器創建快速、本地化的遊戲。
6.FlexieJS
支持CSS3彈性盒子模型(FlexibleBoxModel)。
四、在線工具
此外,還有壹些在線工具,可以幫助開發者加快HTML5項目的開發。
1.HTML5Boilerplate
是壹個HTML/CSS/JS模板,是實現跨瀏覽器正常化、性能優化、穩定的可選功能如跨域Ajax和Flash的最佳實踐。開發者稱之為技巧集合,目的是滿足妳開發壹個跨瀏覽器,並且面向未來的網站的需求。
2.SwitchtoHTML5
非常有用的在線工具,可以根據妳的喜好生成HTML5文檔結構。
pdf文件如何在線生成html呢？用的是php的網站系統？如果簡單點,直接<a></a>鏈接那個pdf文件就可以把。這樣做要用戶機子裝了adobeflash,用戶也可以直接下載妳的pdf文件。
還可以將pdf轉成swf格式,用戶不好直接下載,但是要在網站後臺先轉換好。如果是外文pdf,用pdf2swf和flexpaper,中文pdf會麻煩些。