iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
2
自我挑戰組

用敏捷管理我跟 HTML&CSS 的 30 天親密接觸系列 第 6

|Day 06|從 <p>、<br> 標籤來思考敏捷精神

  • 分享至 

  • xImage
  •  

<p> 標籤和 <br>標籤】

<p> 標籤:段落的概念

<p>這是第一段,這是好長的第一段,第一段有夠長的,長長的第一段,第一段很好長,我再重複一次,這是第一段,這是好長的第一段,第一段有夠長的,長長的第一段,第一段很好長</p>
<p>這是第二段,第二段也很長,希望不要比第一段長,但是還是很長,重複一次,這是第二段,第二段也很長,希望不要比第一段長,但是還是很長</p>

瀏覽器畫面如下:
https://ithelp.ithome.com.tw/upload/images/20190916/20120833KHFXHAK5Gs.png

<br> 標籤:強制換行

<p>這是第一段,這是好長的第一段,第一段有夠長的,長長的第一段,第一段很好長,我再重複一次,這是第一段,這是好長的第一段,第一段有夠長的<br>長長的第一段,第一段很好長。
</p>	

瀏覽器畫面如下:
https://ithelp.ithome.com.tw/upload/images/20190916/20120833KHJrRGz9db.png

NOTE

  • <p></p> 必須成對出現,<br>可以單獨使用。
  • 正確的段落換行請用<p>標籤,它會一個畫面滿了才跳下一行,而<br>使文字強制換行,若觀看裝置或是換瀏覽器,都會讓字產生跑版的現象。

【聊聊敏捷】

先提提敏捷,在學校裡頭透過樂高蓋房子的遊戲,來了解敏捷的精神。

遊戲是這樣子的開始 -
老師是客戶的角色,它是投資商,想要在一塊鳥不生蛋的土地上規劃一個社區,於是他給了我們 20 個客戶的面相(以下就列舉三個):

  • As 一個長者,I want a 醫院,so that 需要時可以就近治療
  • As 一為駕駛人,I want a 圓環,so that 下班時刻,市區內交通可以暢行無阻
  • As 一個市民,I want a 兩層樓高公寓,so that 我可以住在社區裡。

並從以下,要我們挑出幾個規劃一個社區先要有的重點,並在第一階段,十分鐘的時間,用樂高拼出這幾個需求:
https://ithelp.ithome.com.tw/upload/images/20190916/20120833CC0MvNM2Se.jpg

十分鐘後,客戶開始檢視:

  • 你這個醫院沒有公車站牌,長者要怎麼到呢?
  • 你這個圓環沒有紅綠燈,車輛要怎麼遵守號誌行進呢?
  • 你這個兩層樓公寓,蓋在離市中心很遠的地方,怎麼讓市民擁有好的生活品質呢?

於是第一階段,小組開始討論:

  • 應該要在醫院附近,建設良好的大眾工具運輸網:例如蓋一個車站或是公車站
  • 要在圓環路口設置紅綠燈,讓尖峰時刻的紊亂交通可以得到舒緩。
  • 社區附近應該要有個大型 mall,建立完善的生活機能。

這個遊戲,其實要讓我們了解,每一階段的產出,例如:就像剛剛明明需求是蓋一個圓環,總有理解不夠完整的地方。
所以持續性的交付,交付結果開始反思微調,也反映出敏捷的精神,規律的反覆之間,團隊會反省與思考如何更有效率,然後相對的來調整與修正團隊的開發方式。


【結語】

無論是學習和還是寫程式都是這樣子,需要正確理解客戶的需求!
就像你使用 p 標籤和 br 標籤,瀏覽器畫面看起來蠻像的,但其實背後的原理還是不太一樣的,錯用都有可能造成後期的維護困難。

從樂高遊戲中發現在第一階段的理解出了問題,都還有微調的空間,所以定期省視成果是非常必要的,才不會埋頭苦幹到了最後,卻發生了全盤皆錯的危機。

次回預告

來跟大家聊聊何謂屬性!就可以在 HTML 的字體上多些變化啦!


上一篇
|Day 05|網頁起步走:Heading 標籤和 List 標籤的認識
下一篇
|Day 07|調整 HTML 中的文字表示方式來符合使用者的期待
系列文
用敏捷管理我跟 HTML&CSS 的 30 天親密接觸30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言