*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2013年4月23日 星期二

就是要「直播」:超簡單的 youtube hangout


就是要「直播」:超簡單的 youtube hangout
一定要會啦,大家都在直播了!
千萬不能做壞事啊!但是,做好事也可能會被看到哦。

教學影音:



2013年4月20日 星期六

使用 QR code :平面與網路的整合傳播

 
使用 QR code
啟動平面與網路的整合傳播

先請您用手機來「嗶」一下:

多雨的福山植物園

一種簡明的風格,在多雨氛圍中頓時成為難忘的印象。
QR code to play



 QR code一般說明影音教學


影音內容說明:
1. 影音教學所使用的條碼產生器網頁




 小世界網路組使用QR code製作流程影音教學


影音內容說明:
1. 影音教學所使用的條碼產生器網頁
2. 新聞系資料交換雲按此


2013年4月4日 星期四

按一下就可以跑出圖片、影音、image gallery、網頁、flash…

更新的教學版本,請click前往。
新版本,更好用,更簡單,更彈性。

Fancybox:全能的「分層文本」寫作利器。
按一下就可以跑出圖片、影音、image gallery、網頁、flash, 以及你自己想表現的html文字。


步驟u(1)把下列語法直接copy到<head>xxx</head>裡去,或是<body>的後面

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css"
href="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.css"
media="screen"></link>


(2)再來把下列語法直接copy到<body>的後面,用來驅動上面載入的程式

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
padding: 0,
fitToView: false,
afterLoad: function(){
this.width = $(this.element).data("width");
this.height = $(this.element).data("height");
}
});
});
</script>


步驟v再來是文章中針對要「按下去就跑出東西」寫作元素,所要運用的HTML語法。

按一下字或圖就跑出圖片的語法:

按文字:
<a class="fancybox" data-width="640" data-height="360"
href="https://lh3.googleusercontent.com/-HWwcUPP8MjA/UR4XhgWiLgI/AAAAAAAAH1c/tHutnDa-0bQ/s763/IMG_4387.JPG"
title="單純的花花草草">按我跑出圖</a>

按小圖:
<a class="fancybox"
href="https://lh5.googleusercontent.com/-QDFORrKxB7g/UVBQ8R_OUfI/AAAAAAAAIIg/bTTbPmFVMU4/s1037/P3246888.JPG"
data-width="640" data-height="480" title="植物園的春綠"><img
style="border: 0px solid ; width: 64px; height: 43px;"
src="https://lh5.googleusercontent.com/-6NjVp0bZt6E/UR4XhNku3_I/AAAAAAAAH1U/vkcbQdaIKeg/s763/IMG_4379.JPG"
alt=""></a>

實例效果:

按我跑出圖   

語法說明:
1. class="fancybox"這是使用fancybox必要的語法,一定要抄進去。
2. data-width="xxx" data-height="xxx" 是要跑出來的圖片的寬、高。這個是部分是老師參考網路再改修改的語法,所以一定要有,一定要指定所要跑出圖片的寬、高。
3. href="xxx" xxx是圖片的位置網址。
4. title="xxx" xxx是圖下的說明文字。


再來是運用fancybox處理iframe語法的能力:
(1)可以叫出以前我們教過的image gallery。例如李安Pi的動物園

<a class="fancybox fancybox.iframe" data-height="621" data-width="821" href="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/gallery1026/gallery0406/index.html" title="帶女兒看李安Pi的動物園">李安Pi的動物園</a>
影音教學:

語法說明:
1. 要使用fancybox來叫出另一網頁,例如此例是要叫出 image galley 中的index.html,千萬記得使用 class="fancybox fancybox.iframe" 這一語法標記。
2. data-width="xxx" data-height="xxx" 是所跑出 image gallery 的寬、高。因為程式設定的闗係,xxx最好是 image gallery 所設定的寬、高,再加上21px,會比較好看。例如 image gallery 設定為800 600,那麼再各加上21px,data-width="821" data-height="621"。21px是我反覆實驗後的數字,你可以自行試出想要的數字。
3. href="xxx" xxx是所要秀出網頁的位置網址。
4. title="xxx" xxx是下方的說明文字。

#Plus1「3D立體 image gallery」今年的春天正在開始ing。〔看語法
#Plus2

(2)可以「直接」叫出youtube裡面的影音。例如暑假記事 olympus ep2 with 17mm

<a class="fancybox fancybox.iframe" data-height="480" data-width="640" href="http://www.youtube.com/embed/am5MvcsDXbU?rel=0" title="一段暑假的小小回憶">暑假記事 olympus ep2 with 17mm </a>

(3) 直接叫出 Vimeo 影音:例如2013暑假記事 olympus ep2 with 35mm/3.5 。

<a class="fancybox fancybox.iframe" data-height="360" data-width="640" href="http://player.vimeo.com/video/69818548" title="2013屏東萬金聖母殿">2013暑假記事 olympus ep2 with 35mm/3.5 。</a>

又例如可以直接點「影像」就跑出 video :

<a class="fancybox fancybox.iframe" data-height="315" data-width="560" href="http://www.youtube.com/embed/MWMwLra7yXM?rel=0" title="凝望的容顏"><img style="width: 64px; height: 64px;"
src="https://lh3.googleusercontent.com/-EliUPGynLww/Ub8T0m_491I/AAAAAAAAK4A/NA7-jzwX3yU/s256-no/23_Play-256.png"></a><br>

影音教學:

語法說明:
1. 這是 class="fancybox fancybox.iframe" 的特殊運用語法,可以從 youtube 中「直接叫出」影音。
2. data-width="xxx" data-height="xxx" xxx是指在 youtube 分享/嵌入功能中所設定的寬度和高度。
3. href="xxx" xxx也是可以直接從 youtube 分享/嵌入功能中找出來。例如此例 youtube 中的分享/嵌入語法:
<iframe width="640" height="480" src="http://www.youtube.com/embed/am5MvcsDXbU?rel=0" frameborder="0" allowfullscreen></iframe>
紅色部分即是我們要的。
4. 你也可以加上  title="xxx" ,xxx當作影音的文字說明。

(4) 另一個重要的特色是可以按一下叫出Flash,用來豐富補充文本的內容。例如跑 出Flash來!(請移入滑鼠,並按一下)

<a class="fancybox" data-height="375" data-width="500" href="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/lmcsilver/20120508/20120508.swf">跑出Flash來!</a>
再來看一個 Flash 的 .swf 檔案:石碇的三月陰雨


☆☆
本例所使用的Fancybox 套裝程式與之前所教過的 videobox 套裝程式,會有相衝的現象。所以只能在這兩者間選一套使用。