iT邦幫忙

html5相關文章
共有 218 則文章
鐵人賽 IT技術 DAY 2
且戰且走HTML5 系列 第 2

達標好文 技術 且戰且走HTML5(2) 應用主軸:WebSocket

WebSocket是瀏覽器與伺服器交換資料的方式之一,與HTTP最大的不同是,他是一個持續的雙向的連線,所以沒有重新連線,重新傳送檔頭等多餘的負荷,反應更即時。...

鐵人賽 開發技術 DAY 35
CSS沒有極限 系列 第 31

技術 CSS3 垂直文字書寫

html最早都是應用於拉丁文上,而拉丁文主要是水平由左到右的書寫方式,而到了其他的語系國家,文字也只能用水平由左到右的書寫方式;而漢字是屬於垂直書寫由右到左的書...

鐵人賽 開發技術 DAY 11
CSS沒有極限 系列 第 11

技術 CSS沒有極限 - CSS的神奇Calc運算

今天來介紹CSS最犯規的function calc,通常會用來做數值的運算,尤其是針對於長寬等等,而他最特別的是運算的數值"不需要"相同單位...

鐵人賽 Modern Web DAY 25

技術 ?? - 目前初步做好的prototype

參考: tmp9 後面花了不少時間把這份簡報需要的動畫特效做出來,雖然不是全部,但是大致上能看了。 因為用了IE沒支援的Canvas 2D Context AP...

鐵人賽 Modern Web DAY 25

技術 ?? - 處理Office的內建圖型

既然還能發文... ECMA-376定義Office內建圖型的方法 在規格書的zip檔中,可以找到presetShapeDefinitions.xml這個檔案(...

鐵人賽 開發技術 DAY 12
CSS沒有極限 系列 第 12

技術 CSS沒有極限 - CSS的新"文字"及"尺寸"單位

大多數網站在文字的單位都是使用px,尤其在台灣多數使用者都是用windows系統,不管是什麼瀏覽器,在windows下都是以單數px是較為清楚的,如13xp.1...

達標好文 技術 Web Worker 經驗分享(一)

各位「網路工作者」大家好! Web Worker 是由 W3C 以及 WHATWG 共同制定出來的API,讓 javascript 可以獨立在背景執行而不會影響...

鐵人賽 IT技術 DAY 3
且戰且走HTML5 系列 第 3

技術 且戰且走HTML5(3) 使用Socket.io

WebSocket必須要有伺服器端的支援才能運作,所以來看看Node.js最多人使用的Socket.IO怎麼使用。 Socket.IO是Node.js上最早的W...

鐵人賽 開發技術 DAY 39
CSS沒有極限 系列 第 35

技術 CSS - display: box 與 display: flex

CSS範例:[http://ashareaday.wcc.tw/#2013-10-24 ](http://ashareaday.wcc.tw/#2013-10-...

鐵人賽 開發技術 DAY 7
CSS沒有極限 系列 第 7

技術 CSS沒有極限 - 別忘了偽元素

偽元素在IE8之後全面都有支援,而這樣功能在CSS3可以創造出更多的效果。 圖片來源:動畫 火影忍者 本篇CSS效果發表於http://ashareaday....

技術 angular、vue框架要知道SEO問題

使用前端框架(Client-side Render )可以幫你加快開發速度 但會有一個問題就是SEO SEO 俗稱 搜尋引擎最佳化(英語:search engi...

鐵人賽 開發技術 DAY 4
CSS沒有極限 系列 第 4

達標好文 技術 CSS沒有極限 - Sass 與 Compass(1)

在先前的幾篇,有提過好幾次的Sass以及Compass、Fire.app等工具,在這邊就來釐清這些是什麼樣的工具。 在先前的幾篇,有提過好幾次的Sass以及C...

鐵人賽 開發技術 DAY 9
CSS沒有極限 系列 第 9

技術 CSS沒有極限 - CSS3的漸層

本篇介紹CSS3的漸層,而就漸層這功能聽起來,似乎沒有什麼樣的變化,但其實透過復合式的背景可以堆疊出相當多的變化。 本篇CSS效果發表於<http://a...

鐵人賽 開發技術 DAY 36
CSS沒有極限 系列 第 32

技術 淺談CSS Grid system

相信許多設計師或是工程師都有用過bootstrap,他是一套Css framework,裡面提供相當大量的樣式讓使用者可以撰寫較少的CSS就可以獲得不錯的效果。...

技術 關於網站多國語言翻譯

各位先進您好!小弟有一個無法突破的問題 在各大訂房網站有多國語言功能,大都有十種語言以上 我想這不是語言包能解決的,因為語言包只能翻固定字串,各飯店的更新,不可...

鐵人賽 Modern Web DAY 25

技術 ?? - 繪製Office內建的圖型

Office使用的內建圖型定義在ECMA-376的presetShapeDefinitions.xml這份文件中。(下載規格書Part1的zip檔解開後,會看O...

鐵人賽 開發技術 DAY 42
CSS沒有極限 系列 第 38

技術 CSS - 利用jQuery套用Class(超簡單!)

CSS是專門處理網頁的樣式,在互動的部分都會使用javascript,雖然本網站之前的許多互動範例是純CSS,但會有相容性上的問題,而要簡易方式去寫互動的元件,...

鐵人賽 IT技術 DAY 3
只是路過 HTML5 系列 第 3

技術 HTML5的Video標籤(1)

應該要先講HTML5的結構 > < 但剛好最近在研究Video標籤。 今天分享筆記: 影片檔是什麼? 編譯解碼器是什麼? 簡單使用&lt...

鐵人賽 IT技術 DAY 11
且戰且走HTML5 系列 第 11

技術 且戰且走HTML5(11) Canvas基本繪圖-塗鴉

要製作一個簡單的繪圖應用,自由塗鴉應該是最基本的功能之一。所以就先來看一下怎麼做出來。 塗鴉其實只使用到2D Context的幾個操作方法,主要是lineTo與...

鐵人賽 IT技術 DAY 22
新手前端日記 系列 第 22

技術 [新手前端] HTML5的新tag 語意化標籤

談談HTML5裡面已經可以使用而且好處多多的 語意化標籤。 HTML5 其實還是HTML,只是像軟體有更新一樣,HTML也更新到HTML5而且有更多的功能,具...

鐵人賽 IT技術 DAY 30
且戰且走HTML5 系列 第 30

技術 且戰且走HTML5(30) 利用Bootstrap逐步整合出UI

我不是做美術設計的料,但是又希望成品可以美觀一點,這時還是借助一些方法來讓介面好看一點。 自從twitter發佈了bootstrap,看起來真的不少人做過嘗試。...

鐵人賽 IT技術 DAY 5
且戰且走HTML5 系列 第 5

技術 且戰且走HTML5(5) 更深入Socket.IO

除了使用簡單,Socket.IO更內建了一些Chat必須的邏輯,可以減少一些開發的工作。 如果一個Chat只能支援一個聊天室,那功能就太簡單了。今天來看一下,要...

鐵人賽 IT技術 DAY 28
且戰且走HTML5 系列 第 28

技術 且戰且走HTML5(28) 建立視訊會議

今天先建立起簡單的視訊會議做驗證。 建立視訊會議的方式,基本上就是昨天描述的過程的實作。連線資訊的傳遞,則透過之前包裝好的ws.io模組。 首先看一下伺服器:...

鐵人賽 Modern Web DAY 1
重新學習網頁設計 系列 第 1

技術 DAY 1. HTML5 表格 Table

在很久以前, 曾經人們大量的使用table來排版, 但table 帶來的巨大的限制, 我們沒辦法隨心所欲地使用它來完成多變繁瑣的佈局, 必須層層嵌套table來...

技術 CSS沒有極限 - CSS3 :target選取器,可以做出許多nojs的互動效果

CSS3多了相當多的selectors,而:target是其中一個,它可以讓html的id被套用上新的樣式,而這功能也可以讓html的互動性更高。 本篇內容同步...

鐵人賽 開發技術 DAY 20
CSS沒有極限 系列 第 16

技術 CSS沒有極限 - Web-font & icons 3連發 - 自製web font icons

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-05 (建議使用Chrome瀏覽器) 接下來會連接3篇文章都介紹web-...

鐵人賽 開發技術 DAY 22
CSS沒有極限 系列 第 18

技術 CSS沒有極限 - Checkbox的妙用

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-07 (建議使用Chrome瀏覽器) CSS3 新增了:checked的...

鐵人賽 IT技術 DAY 27
且戰且走HTML5 系列 第 27

技術 且戰且走HTML5(27) 應用的主軸:WebRTC

WebRTC主要的重點是建立瀏覽器之間的即時網路通訊,不過這個規格還很新,基本上能完整支援的瀏覽器目前只有Chrome21以上的版本。不過他能做的應用非常有趣,...

鐵人賽 開發技術 DAY 37
CSS沒有極限 系列 第 33

達標好文 技術 CSS - 伸縮自如的Flex box

Flexbox是css3的新的排版方式,過去排版主要是利用table、box、inline、float、position等等做排版,而這些都不是設計為了豐富的網...