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

2013年5月22日 星期三

正流行的互動文本表現:Content slider


十三行博物館

  • 相 傳在清朝 時,這裡曾經是重要的貿易商港,有多達十三家行郊在此經商,所以大家就將這裡稱做「十三行」。



Persistence

Content Slider 和我們平常一直說的 Image Gallery 有什麼不同呢?



Copy下列檔案。

以下請貼入<head>xxx</head>之間或貼入<body>之後:

<!-- jQuery library (served from Google) -->
 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 
  <script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/plugins/jquery.fitvids.js"></script>
<!-- bxSlider Javascript file -->
 
  <script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.min.js">
</script>
<!-- bxSlider CSS file -->
 
  <link href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.css" rel="stylesheet">


再來,下列請貼入<body>之後:

  <script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
   video: true,
   useCSS: false
});
});
  </script>
要生成 Content Slider 的語法

<div style="width: 640px; height: 480px;">
<ul class="bxslider">
  <li><img src="/images/pic1.jpg"  width="640" height="480"></li>
  <li><img src="/images/pic2.jpg"  width="640" height="480"></li>
  <li><img src="/images/pic3.jpg"  width="640" height="480"></li>
  <li><img src="/images/pic4.jpg"  width="640" height="480"></li>
</ul>
</div>

說明:
1。<div xxx>裡,首先要來決定 content slider 內的「文本區塊」的寬度(width)和高度(height)。
2。<li>xxx</li>是一次 slider 的內容。此例共有四個 slider 內容。
3。Slider 的文本內容,此例均為圖片,所以是圖片的語法<img src="xxx">。同時也設定了圖片的寬度和高度。
4。Slider 的文本內容,可以是任何 html 的內容,例如用表格來表現圖文整合的內容。但注意表格的寬度和高度要和 Div 所設定的寬、高一樣。



影音教學:





教學範例作品:


  •                 從 白天到晚上的藍!









此教學範例所使用的套裝程式軟體:bxSlider


2013年5月11日 星期六

移動滑鼠就跳出圖.文.說明框

COOL!
把滑鼠移進來看看我
移動滑鼠就跳出圖.文.說明框
                                            對要再進一步說明的地方加強敘述。




 實例示範

這是大陸福州市最有名的景點:三坊七巷。我因公出差,順道去逛了一下。當然也就拍了不少影像。就以所拍影像為例,和 這地圖配合起來,來呈現一下我所要教的這個互動功能,所能展示的互動性文本特色!

    閩都神韵:三坊七巷

三坊七巷起於晉,完善於唐、五代,至明清鼎盛。古老的坊巷格局至今基本保留完善,是中國都市僅存的一塊「里坊制度活化石」。

這裡一直是「閩都名人的聚居地」,林則徐、沈葆禎、嚴復等中國近代史史有影響力的人、皆出自於此。







                                巷弄之間游走


                                                                                依稀殘留的畫面      


                                                                                               我最喜歡的地點                          林則徐祠堂



上面【巷弄之間游走】的完整語法:
巷弄之間游走<img onmouseout="UnTip()"
style="border: 0px solid ; width: 48px; height: 48px;"
onmouseover="TagToTip('ccc01', BALLOON, false, ABOVE, true, STICKY, true, CLOSEBTN,true)"
alt=""
src="http://cdn1.iconfinder.com/data/icons/plump-by-zerode_/128/Camera-icon.png"
align="middle">

一下子看不懂,沒關係,下面我會完整的教清楚。這給同學學習參考之用。



 WZ_tooltip 套裝語法使用方法

請先 copy 下列 javascript 的語法程式,置入於<body>之後:

<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/wz_tooltip/wz_tooltip.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/tip_balloon/tip_balloon.js"></script>

若是要為文字、圖片添加滑鼠移入式的「 純文字」說明,如下範例,請使用下列語法使用方式。

                    般若三經                            

【般若三經】的文字說明語法:
<a onmouseout="UnTip()"
onmouseover="Tip('般若波羅密多心經<br>金剛般若波羅密經<br>六祖大師法寶壇經<br> ', BALLOON, true, ABOVE, true, FONTFACE, '微軟正黑體', FONTSIZE, '14px')"
href="javascript: void(0)"><big style="font-weight: bold;">般若三經</big></a>
影音教學 with KompoZer:

的文字說明語法:
<img
onmouseout="UnTip()" style="width: 32px; height: 32px;"
onmouseover="Tip('這一個文字式的說明,<br>可以看到呈現格式和左邊不同。<br>只要更動一下語法的設 定值即可。<br>很簡單的!<br>', BALLOON, false, ABOVE, true, FONTFACE, '微軟正黑體', FONTSIZE, '16px')"
alt=""
src="http://cdn3.iconfinder.com/data/icons/greenpack/PNG/128x128/icontexto-green-01.png">
影音教學 with KompoZer:

PLUS## 圖文式的說明語法:

沈 靜的凝望

語法:
<a onmouseout="UnTip()"
onmouseover="Tip('這是被放在角落的菩蕯。<br>凝望,是一種無心的堅持。<br>我常看著,想著時間的流 逝。<br> <img width=240 src=https://lh5.googleusercontent.com/-eTnXY122Fok/UTM6ZAolAZI/AAAAAAAAH6s/5TkwrGGVFIE/w1202-h802-no/IMG_4926.JPG>', BALLOON, false, ABOVE, true, FONTFACE, '微軟正黑體', FONTSIZE, '16px')"
href="https://lh5.googleusercontent.com/-eTnXY122Fok/UTM6ZAolAZI/AAAAAAAAH6s/5TkwrGGVFIE/w1202 -h802-no/IMG_4926.JPG">沈靜的凝望</a>
影音教學:


為文字、圖像添加影音、 image gallery或圖文整合式的說明,如上面三坊七巷的實例示範。這一部分需要二個步驟:

1.  先用表格做一個影音說明,如下列,再將表格的 id="xxx" 命名,以供後續語法使用,此例表格的 id="ddd01"
按此看表格語法
<table id="ddd01" style="text-align: left; width: 431px; height: 331px;"
border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"><iframe
src="http://www.youtube.com/embed/LM3IjJh31Jc?rel=0" allowfullscreen=""
frameborder="0" height="315" width="420"></iframe><br>
</td>
</tr>
</tbody>
</table>

2. 【林則徐祠堂】這一影像式說明中,對照片寫入語法使上面先做好的影音表格被改置到說明框中(在瀏覽器頁面中,上面的表格會自動的隱 藏)。語法如下:

林則徐祠堂<img onmouseout="UnTip()"
style="border: 0px solid ; width: 48px; height: 48px;"
onmouseover="TagToTip('ddd01', BALLOON, false, ABOVE, true, STICKY, true, CLOSEBTN,true, SHADOW, true)"
alt=""
src="http://cdn1.iconfinder.com/data/icons/plump-by-zerode_/128/Camera-icon.png"
align="middle">
注意事項
上例表格中的id="ddd01"(紅色字部分),要對到TagToTip('ddd01',這兩個部分要相同,才能讓效果出來。

影音教學 with KompoZer:

使用影音說明框來進一步解釋文 本。






2013年5月8日 星期三

動靜之間的照片:使用HTML5的影音功能


動 靜 之 間 的照片
既是圖像又是video;既不是圖像又不是video

「動 靜之間的照片」,這個「詞 or 術語」我也想了很久才定了心;最重要是想表達一種新形式的圖像呈現模式。如下:



這是 我在 研究某一網站文本形式時,看到的一種圖像的表現形式。
非常有「張力」。
靜態圖像與影音圖像的矛盾,融燴成一種另一意想不到的意義呈現樣態。
網路數位文本的創作樂趣也在於此!More!!
而這種圖像表現方式若和文字配合的好,帶出了一種感受意義的全新模式。



 創作技能思考方 向:

這其實是以影音檔來創作,只是將照片的播放時間拉長。
以HTML5的影音功能加以變化,來模擬這種動靜之間的照片表現。



 影音教學


一般使用語法:
<video width="460" height="345"  loop="loops" autoplay="autoplay">
<source
src="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/video201210/201305081509.mp4"
type="video/mp4"></source>
</video>

KompoZer使用語法:
<object  height="345" width="460">
<video width="460" height="345" loop="loops" autoplay="autoplay">
<source
src="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/video201210/201305081509.mp4"
type="video/mp4"></source>
</video>
</object>

影音教學說明:

1. controls="controls" 是指在影音內出現控制欄。loop="loop" 是指重覆播出。 autoplay="autoplay" 是指自動播出。不想用的功能就不要寫進去就好。例如此例,就沒有把controls="controls" 寫入,所以在影像畫面內不會有影音控制欄。
2.  <source src="xxx"></source> xxx是影片的位置網址。width="xxx" 寬度和 height="xxx" 高度要記得寫。
3. 影片請用MP4格式。
4. KompoZer的語法多出了<object width="xxx" height="xxx">xxx</object>。這是為了更方便在KompoZer的所見即所得排版功能。