回到首頁
李明哲多媒體寫作教學

2020年4月29日 星期三

開關的思考:給讀者「停下來」的權力


互動,在文本閱讀過程的意義給出中,到底要為讀者提供出什麼?換言之,互動在文本的結構中,到底有什麼存在的理由。

對我而言,這一點,要能被理論性的論證出來。否則,並沒有什麼說服的力道去跟學生說:你要去學會互動寫作技能。

來,
人為什麼要閱讀?在於從文本中獲取「意義」。

好,
那在文本中有了互動機制的嵌入,所以,對於意義的獲取,會產生了什麼變化?這點若沒有說清楚,那麼在文本中就無法找到要去嵌入互動機制之必要的理論說明。

互動是一種內容嗎?還是一種形式?顯然,是一種形式。

所以,到目前為止,整個的推論可以如此:互動文本在於透過某種「互動形式」為文本意義的給出,增加可能性。

於是,一種文本的互動模態之設計與嵌入,能不達到這目的,就是設計之好與壞的基本判準。

那麼,設計出一種去停止互動的互動模組,會不會為文本提供意義給出呢?可以的。因為,去停止,【就形式而言】,也是一種意義。



互動範例:

在這裡,首先,DIV的寬度會自己動起來。

互動寫作者而言,如果考慮到讀者要有控制權,來決定動態文件元組是不是繼續動下下,那麼我們就要賦與讀者去「關掉」這動態文件元組的「會動狀態」。

按一下下方的 test 區塊!就停了。再按下下,重新動起來。這樣的互動模態,我稱之為「開關」。

test!!


 語法和程式:

 <style>
.testdiv {
width: 10%;
border: 1px solid gray;
background-color: lightgray;
cursor: pointer;
transition: 1s;
}

.testdivch {
width: 100%;
}
</style>


 <div id="test0429a" class="testdiv" onclick="myFun0429()"> test!! </div>


<script>

var i = 0;

setInterval (frame, 1100);

function frame() {
    if(!i ) {       //在這裡設定通不通電
    var dwcft = document.getElementById("test0429a");
    dwcft.classList.toggle("testdivch");

    } else {  }
}

function myFun0429() {     //這 是開關的地方,按一下「閉」,再按一下「開」
var addi = i+1;
var addkey = addi%2;
  i = addkey;

     
</script>
  
   


2020年4月23日 星期四

滑動是一種互動的身體姿態:scroll




互動文本的互動,是要考量「以什麼身體的姿式」來讓文本動起來。就網路的閱讀環境而言,可以被選擇而考量的身體互動姿態,並不多。

按下去,即 Click ,是最常看到的。但另一種動作,滑動網頁,scroll,也是常被使用的去「和文本進行互動」的動作。

就數位文本的寫作而言,每一種可能的動作姿態,都要進入其對互動文本的設計思考範圍內。透過這種動作,於是,讀者和文本,產生了一種理解上的可能性,這種可能性有著「互動」為中介。

至於,有「互動為中介」的閱讀狀況,會形成什麼不同的意義理解模式,那就又是另個要討論的問題了。

請往下滑動網頁吧!中標會變顏色。







我是中標。變色,是為了引起注意。











我是中標。變色,是為了引起注意。













我是中標。變色,是為了引起注意。
















我是中標。變色,是為了引起注意。



語法程式碼:

<style>
.test01 {
font-family: '微軟正黑體';
font-size: 130%;
font-weight: bold;
padding: 5px 1em;
border: 3px solid black;
}
</style>

<div class="test01">
我是中標。變色,是為了引起注意。
</div>

<script>
window.onscroll = function() {myFunction()};      //啟動計算滑的動作

function myFunction() {
  var elmnt = document.documentElement;
  var x = elmnt.scrollTop;              //網頁向上滑動的高度
  var y = document.getElementsByClassName("test01");
 
  for (var i= 0; i< y.length; i++) {
  var yy = y[i].offsetTop;   //中標到內文區頂端的高度
  yy += 370;                      //這是本部落格用的,是內文區到頁頂的高度
   if (yy - x < 110) {
   y[i].style.color= "red";
   } else {
   y[i].style.color= "black";
   };
  }
}
</script>







2020年4月22日 星期三

按文字跑出相應的圖像(組)




互動文中,在於讓讀者可以經驗到更多,從文本的互動中。但,什麼是可以讓讀者經驗到更多的方法呢?「更多的資料」,是一種答案。很不錯的答案。

但,我在思考的是,「互動形式」如何可以讓讀者「得到更多」,在閱讀的經驗中。

於是,如果這種想法是對的話,那麼,什麼是「對的互動形式」,就進入了可以被討論的論證範圍!成為創作過程中,具有創造意義呈現的某種關鍵性技能。

就此,一位作者的「程式掌握」能力,就是文本結構的必要寫作技能。換言之,寫程式是作者要會的技能,而不是丟給程式設計的委派工作。

於是,在數位文本的教學中,教程式就獲得了合法的理論論證。那麼,這一篇,這是對的互動形式嗎?

Click !! ↓↓

海邊看海

小廟香火

渡天宫的入口

石頭在海水中

顏色鮮鮮的香火

居高臨下





程式語法:



 <div id="test0422">
      <p onclick="myfunction0422(this, 0)">海邊看海</p>
      <p onclick="myfunction0422(this, 1)">小廟香火</p>
      <p onclick="myfunction0422(this, 2)">渡天宫的入口</p>
      <p onclick="myfunction0422(this, 3)">石頭在海水中</p>
      <p onclick="myfunction0422(this, 4)">顏色鮮鮮的香火</p>
      <p onclick="myfunction0422(this, 5)">居高臨下</p>
    </div>
    <br>

   <img style="width:100%;" src="https://images.pexels.com/photos/4196318/pexels-photo-4196318.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"
      alt="" id="aaa02"><br>


  <script>

     var imgarry = [
       "https://images.pexels.com/photos/4196318/pexels-photo-4196318.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
       "https://images.pexels.com/photos/4196316/pexels-photo-4196316.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
       "https://images.pexels.com/photos/4196315/pexels-photo-4196315.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
       "https://images.pexels.com/photos/4183204/pexels-photo-4183204.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
       "https://images.pexels.com/photos/4183201/pexels-photo-4183201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
       "https://images.pexels.com/photos/4183199/pexels-photo-4183199.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"];  //共六張圖

    function myfunction0422(objj, ind) {  //指定第幾張圖
      objj.style.display = "none";
      document.getElementById("aaa02").src = imgarry[ind]; };
   
 </script>





2020年4月20日 星期一

往圖按下去就一直換圖:陣列的使用概念




一張照片,如果我們按一下它,於是就會變成另外一張照片。一共有三張,如下:

Click! ↓↓


這是互動,文本的互動。沒錯。但我們其實更要問:為什麼要做這種互動?做這種互動,對於閱讀而言,到底能夠給了什麼助益,而且這種助益是傳統文本所無法給的。

在數位文本中,文本中的互動,到底是為了什麼?

互動,往往可以把「潛藏」的內容,拉到可視的區域。這一過程,透過受眾的互動行為,讓更多「被設計好但潛藏著」的資訊,浮了出來。

文本,成為了在內容的結構上是「有深度的」文本;有待讀者去「挖」出來。讀者,在此,可說有了閱讀上的「主動性」。

本例,我們使用陣列的觀念來創作。這一範例,在於讓你了解陣列的儲藏作用。儲藏是讓文本有深度的方法。

陣列(Arrays)語法結構如下:  

var cars = [
  "Saab",
  "Volvo",
  "BMW"
];

陣列的選擇是:  cara[0] ;是指選到第一個。 cara[1] ;是指選到第二個。


本例互動文本語法:

<img onclick=" chimg(this) " src="https://images.pexels.com/photos/3966242/pexels-photo-3966242.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940">

<script>

var cars = [
  "https://images.pexels.com/photos/3966242/pexels-photo-3966242.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/3870087/pexels-photo-3870087.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/3903661/pexels-photo-3903661.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
];  //陣列使用

var i200421 = 1;

function chimg(obj) {
i200421 = i200421 % 3; //取餘數,有三張照片所以用 3 除。
obj.src = cars[i200421];
i200421 = i200421+1;
}

</script>







2020年4月19日 星期日

對所有選中元素設置 onmouseover




讓所選用中的所有元素,都具有特定 onmouseover / onmouseout 的效果。

這裡的困難是,並不是單獨在每一個 HTML元素裡面設定 onmouseover 互動功能,而是「寫一段程式」來讓所有被選中的元素都具有互動功能。

在範例中,所有具有 class="demo" 的元素,都被賦與了特定的 mouseover 的互動作用。


範例:

請 mouseover ↓↓

Mouse over me

4
Hi, 5 is good.
6

this is p!



語法:

<style>
.demo {
margin-bottom: 1em;
cursor: pointer;
}
</style>

<h1 class="demo">Mouse over me</h1>
<div class="demo">4</div>
<div class="demo">Hi, 5 is good.</div>
<div class="demo">6</div>
<p class="demo">this is p!</p>

<script>

var elms = document.getElementsByClassName("demo");
var n = elms.length;

for(var i = 0; i < n; i ++) {
    elms[i].onmouseover = function() {
        this.style.cssText = "color: red; padding-left: 3em; border-left: 3px solid gray;";
    };
    elms[i].onmouseout = function() {
       this.style.cssText = "color: black; padding-left: 0em; border-left: 0px solid gray;";;
    };
}

</script>



對比單獨HTML元素的設置

在範例中,mouseover 的功能是直接設置在HTML元素裡面。這其實對「文本寫作者」而言是更「切適」的方法。

因為,可以很精準的控制想要去設置的元素,同時,在設置的過程,也是較為直覺的一種「數位文本寫作」方法。


語法:

<h1 class="demo" onmouseover="this.style.cssText = 'color: red; padding-left: 3em; border-left: 3px solid gray;'" onmouseout=" this.style.cssText = 'color: black; '">Mouse over me in HTML</h1>


效果:

Mouse over me in HTML




2020年4月18日 星期六

對所有選出的元素進行變化




選出所有你想選出的元素,然後又一一的對這些元素進行變化。在 javascript 中,你要寫程式才能對一一元素來進行變化。

Hello World!

Hello You!

Click the button to change the color of all p elements.


# 按我回復



語法:

<style>
.sall {
padding: 1em;
border: 1px solid gray;
}
</style>

<p class="sall">Hello World!</p>

<p class="sall">Hello You!</p>

<p class="sall">Click the button to change the color of all p elements.</p>

<button onclick="myFunction()">按我全部的P變紅色</button>

<script>
function myFunction() {
  var myCollection = document.querySelectorAll("p.sall");
  var i;
  for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.color = "red";
  }
}
</script>





基礎動畫的形成




這是動畫的形成的基本語法。

請你按一下下列的 DIV,那麼寬度就會慢慢的變化,直到720px的界限!

click here !!


按我恢復原狀


語法:

<div onclick = "move()" id="mo0417" style="width: fit-content; border: 1px solid gray; padding: 1em;"><span>click here !!</span></div>
<br>
<br>
 



<script>

function move() {
var divw = document.getElementById("mo0417");
var id = setInterval (frame, 1);
var width = divw.firstChild.offsetWidth;
 function frame() {
if (width >= 720) { 
   clearInterval (id);
   }
else {
width = width+3;
divw.style.width = width+"px";
}
 }
}

</script>