2018年12月29日 星期六

[Back To Basic] HTML5 - XHTML


  • XHTML比HTML更嚴謹
  • XHTML = XML + HTML
  • 目的是為了解決,行動裝置上的瀏覽器在解讀HTML的容錯能力沒那麼好,所以希望從開發的時候就強制開發者遵循更嚴謹的規範,彌補容錯能力較差的瀏覽器。
相關規範如下
  • 文件結構類
    • 必須宣告doctype為XHTML,擇一版本即可
    • 必須宣告xmlns
    • 必須有這四個標籤 <html>, <head>, <title>, and <body>
  • HTML元素(elements)規範
    • 必須遵循巢狀原則
    • 必須有結尾
    • 必須為小寫
    • 必須有一個根元素
  • HTML屬性(attributes)規範
    • 必須為小寫
    • 必須用引號括住
    • 必須寫完整,不可用簡寫 e.g.checked => checked ="checked "


2018年12月27日 星期四

[Back To Basic] HTML5 - URL encode

統一資源定位 URL(Uniform Resource Locators)

藉由URL瀏覽器可以向伺服器請求頁面,HRL可以是
  • 一個名稱(e.g. https://www.google.com/)
  • IP(e.g. 8.8.8.8)
URL規則: scheme://prefix.domain:port/path/filename
  • scheme: 定義網頁服務的類型(通常是http 或 https)
  • prefix: 網域的前綴(http預設是www)
  • domain: 網域名稱
  • port: port號(預設是80)

常見的scheme

  • http: 超文本傳輸協定(最常見、無加密)
  • https: 安全超文本傳輸協定(安全網頁、有加密)
  • ftp: 檔案傳輸協定(下載或上傳檔案)
  • file: 自己主機的檔案

URL編碼

URL在網路上只能使用ASCII字符集相互轉送,如果URL使用的字符超出ASCII,這個字元就會被轉換成另外一種方式呈現。
這個轉換的過程就被稱為URL編碼(URL encoding)
e.g. 空白會被轉換成+%20

2018年12月26日 星期三

[Back To Basic] HTML5 - Charset

為了正確顯示網頁,網頁瀏覽器必須知道HTML的檔案是用什麼方式編碼的。

字符編碼(Character Encoding)

ASCII是第一個字符編碼標準(character encoding standard),亦稱為字符集(character set),其定義了128個字母符號來表示數字、大小寫英文、特殊符號。

ANSI是Windows的字符集,支援了256種不同的字符。
ISO-8859-1是HTML4預設的字符集,它也支援256種不同的字符。
HTML5預設的字符集是UTF-8
*.HTML4也支援UTF-8
*.UTF-8 (Unicode) 幾乎涵蓋了全世界所有的字符和符號
在HTML檔案的<head></head>宣告如下:
  • HTML4
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
  • HTML5
<meta charset="UTF-8">

*.如果瀏覽器發現網頁是ISO-8859-1,預設使用ANSI處理,因為ANSI涵蓋ISO-8859-1所有字符,ANSI還額外擁有32個字符
*.css檔案中,設定用UTF-8的方法:加入@charset "UTF-8";
結論: HTML5 用UTF-8就對了。

2018年12月24日 星期一

[Back To Basic] HTML5 - Entities & Symbols

字元實體(Character Entities)

HTML中有許多的保留字元,e.g. < 或 > ,想要顯示這些保留字,就是使用"Entities"的時機。舉例來說,想要顯示小於(<)這個符號時,可以寫成 &lt;&#60; 來表示。
總言之,就是可以用以下兩種方式來表示特定的字元

  • &entity_name; (實體名稱) e.g. 小於: &lt; lt=less than
    • 優點 - 方便記憶(其實我覺得不好記)
    • 缺點- 有些entity_name(實體名稱)瀏覽器可能不支援
    • 大小寫不可以打錯


  • &#entity_number; (實體編號)e.g.小於: &#60;
最常用的特殊字元,一個不斷行的空白: &nbsp;&#160;
小結: 要表達特殊字元,就用entity_number(實體編號)表達。

變音符號

其他語系可能會用一些符號代表,發音的方式。Entities也可以結合"字母"和"變音符號",呈現出發音方法的字母。
e.g. 想顯示  ̀ 加上 a,寫法: a&#768; = a&#768;

source code

特殊符號(Symbols)

特殊符號一覽表

2018年12月23日 星期日

[Back To Basic] HTML5 - Computer Code

Computer Code

這東西沒什麼用。
  • <kbd></kbd> 使用者輸入(keyboard input),純粹改變顯示字型
  • <samp></samp> 程式或系統的輸出(output),純粹改變顯示字型
  • <code></code> 計算的片段,純粹改變顯示字型
  • <pre></pre> 預先格式化的顯示方式,可以顯示寫在程式碼的原樣,e.g.有斷行就是有斷行
  • <var></var> 數學表達式中的'變數"\

[Back To Basic] HTML5 - Responsive

響應式(Responsive)

所謂的響應式網站,意即透過自動縮放、隱藏/顯示,來讓一個網站在各種裝置上的版面、外觀,看起來都是好的。

Viewport

所有的響應式網站,在meta data中都需加入以下這行code,來引導瀏覽器用正確的尺寸和比例來呈現網站。
<meta name="viewport" content="width=device-width, initial-scale=1.0">

響應式圖片

圖片的處理如下:
  1. max-width: 100% 用百分比來控制圖片寬度,用max-width比width的好處 - 圖片可以盡可能地放大,但是如果這張圖片原始檔案"沒那麼大",就以原始檔案的寬度為主。
  2. 這篇文章中有說明的<picture></picture>,可以以螢幕解析度的不同來顯示不同圖片

響應式文字

文字的大小可用vw做為單位,1vw = 1%。所以假設,font-size:1vw,螢幕解析度為1024px,那font-size = 10.24px

Media Queries

用途:依據螢幕解析度不同,可以套用完全不同的樣式

響應式網站的框架

這篇文章中,提到的css framework都有處理響應式的需求

2018年12月21日 星期五

[Back To Basic] HTML5 - Layout

版面配置(Layout)


語意化的HTML5中為了版面配置,提供了幾個常見的標籤。
  • <header></header> 整個頁面的標頭
  • <nav></nav> 導覽列
  • <section></section> 文檔的一個部分
  • <article></article> 文章
  • <aside></aside> 側邊欄或任何在側邊的內容
  • <footer></footer> 頁尾
  • <details></details> 額外的詳細內容
  • <summary></summary> <details>的標題
*. details和summary Edge不支援,sample code
*.div、section、article的分辨可參考這篇文章

五種版面配置的技巧

  • HTML tables(不推薦)
不要用
  • css float
優: 很簡單,記兩個css屬性就好,float, clear
缺: 彈性很差,因為float跟文件內容有很大的關聯性,只要稍微修改就必須調整整體頁面
  • css flexbox
優: 考量各種裝置情境
缺: 不支援ie10之前的版本
  • css framework
  1. bootstrap
  2. w3.css
  3. ...
  • css grid
優: 跟flexbox帶來的好處非常類似,在處理不同螢幕解析度的需求上更為強大
缺: 不支援ie,不支援Edge15之前的版本

2018年12月20日 星期四

[Back To Basic] HTML5 - Head

<head></head>中會放入的資訊

  • <title></title> 共有三種作用
    • 瀏覽器頁籤的文字
    • "加到我的最愛時"的文字
    • 搜尋引擎搜尋出結果時的標題
  • <style></style> 定義單一個頁面的樣式
  • <link></link> 定義外部的連結(javascript, css, 等等)
  • <script></script> 加入client端的腳本(javascript)
  • <meta> 用來指定以下四種情況(如何顯示頁面、關鍵字及其他web服務)
    • 使用的字元集
    • 頁面描述
    • 作者
    • 關鍵字
    • 其他中繼資料
<meta charset="UTF-8">
<meta name="description" content="practice web">
<meta name="keywords" content="HTML5">
<meta name="author" content="Shawn">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML5提供了viewport的方法,目的是"讓web開發人員"控制視窗(隨著裝置的螢幕解析度大小)
  1. width=device-width 隨著裝置的寬度設定寬度
  2.  initial-scale=1.0 當頁面第一次載入時,頁面縮放的比例
每個頁面強烈建議都要加上這一個中繼資料的設定
  • <base> 設定整個頁面連結預設的href、預設的target
附註: <meta http-equiv="refresh" content="30"> 這種寫法的延伸閱讀
http://www.wibibi.com/info.php?tid=416

2018年12月19日 星期三

[Back To Basic] HTML5 - with Javascript, File Paths

Javascript

js可以賦予頁面行為及互動。

<script></script>

用來定義client端的腳本,亦即Javascript,以下為script的兩種使用方式
  • 在標籤中,可撰寫自定義的javascript腳本
  • 也可在標籤上使用屬性 - src,引用外部的javascript腳本

<noscript></noscript>

在瀏覽器不支援javascript,或使用者關閉javascript時,會顯示noscript標籤的內容

HTML檔案路徑

檔案路徑分為以下2種作法:
  • 絕對路徑
    • src="整個路徑寫上來"
  • 相對路徑(盡量使用這種)
    • src="資料夾名稱/檔案名稱.檔案副檔名"
    • src="/資料夾名稱/檔案名稱.檔案副檔名": 表示資料夾在根目錄底下
    • src="../檔案名稱.檔案副檔名": .. 表示上一層
無論是網頁連結、圖片、樣式表、腳本,檔案路徑的寫法都相同。

2018年12月18日 星期二

[Back To Basic] HTML5 - Iframes

Iframes

可在頁面中嵌入其他頁面
語法: <iframe src="URL"></iframe>
*.屬性 - name,可以給定iframe名稱,搭配target使用
*.在頁面中嵌入不同網域的頁面時,會遇到一些安全性議題,詳見這篇文章
https://developer.mozilla.org/zh-TW/docs/Web/HTTP/X-Frame-Options

source code: https://github.com/ShawnTseng/HTML5-practice/commit/0a5b500b2a6599e12e85a715589df8904f370489

2018年12月17日 星期一

[Back To Basic] HTML5 - span&div, id&class

span&div 顯示方式(display value)

絕大部分的HTML元素(elements)都有預設的顯示方式
  • 直列(inline)
特性:
    • 不會從新的一列開始
    • 寬度會盡可能地只留必要的寬度

  • 區塊(block)
特性:
    • 從新的一行開始
    • 寬度會盡可能的延展到最寬

id&class

  • class
    • 群組的概念,HTML元素(elements)都可以套用class
    • 只要套用同一個class就會有同樣的格式和外觀
    • 同一個HTML元素(elements)可以有多個class
    • css用 .className來取得class群組
    • js用 document.getElementsByClassName("className")來取得class群組
  • id
    • 唯一的概念,同一份HTML文件中id不可重複
    • css用 #id來取得指定的HTML元素(elements)
    • js用 document.getElementById("id")來取得指定的HTML元素(elements)
    • id不可以有空白
    • 記得可以搭配書籤的概念使用 e.g.
<p id="test">test text</p>
<a href="#test">Jump to test</a>

2018年12月15日 星期六

[Back To Basic] HTML5 - Lists

List

清單有三種
  • 有順序
e.g.
<ol>
<li></li>
<li></li>
</ol>
屬性(attribute) - type: 可指定<ol>用什麼符號當作項目符號
屬性(attribute) - start: 可指定<ol>從第n個項目開始列表
  • 無順序
e.g.
<ul>
<li></li>
<li></li>
</ul>
  • 敘述型
    • <dl></dl> 描述清單(description list)
    • <dt></dt> 清單名稱(defined term/name)
    • <dd></dd> 一個項目的說明(description detail)

e.g.
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>

source code: https://github.com/ShawnTseng/HTML5-practice/commit/b11c5d80ba0cfb892d6654b9b5c5270db82352e6

[Back To Basic] HTML5 - Tables

Table

Table常見相關元素(elements)

  • <table></table> 資料表
  • <caption></caption> 資料表標題,<table>和<caption>中間不要有其他HTML元素
  • <tr></tr> 資料列
  • <th></th> 資料表頭
  • <td></td> 資料表cell,是資料的容器(container),可以包含任何類型的元素(elements)
e.g.
<table>
<tr>
<th>col 1</th><th>col 2</th>
</tr>
<tr>
<td>cell 1-1</td>
<td>cell 1-2</td>
</tr>
<tr>
<td>cell 2-1</td>
<td>cell 2-3</td>
</tr>
</table>

Table常見相關屬性(attributes)

  • colspan 跨欄
  • rowspan 跨列

Table相關元素(elements)

紀錄關鍵字...不常用
  • <colgroup>, <col>

2018年12月14日 星期五

[Back To Basic] HTML5 - Image

Image

  • <Image>是空元素(empty element)
  • 沒有結尾標籤
  • 圖片來源用屬性(attribute) src 指定
  • 屬性(attribute) src可指定相對位置、絕對位置、其他Server提供的圖片,也支援.gif
  • 屬性(attribute) alt 提供替代文字,使用情境以下兩種
    • 圖片無法顯示時,顯示alt
    • 視障使用者瀏覽頁面時
  • 屬性(attribute) alt 是必要
  • 強烈建議,一定要指定圖片的寬度和高度,避免載入時頁面閃爍,造成使用者體驗不佳
  • 指定方式建議使用css控制,因為用屬性(attribute) widthheight,都會被css覆蓋
綜合以上原則,寫法如下: 
<img src="imageName.gif" alt="This is an image" style="width:48px;height:48px;">

*.寬度和高度,可以指定img id或class後用外部的css檔案控制,對整個網頁可維護性會較好

Image Maps

image map是圖片延伸的功能,若想要在圖片上框選特定的區塊做一些互動可以使用此功能

Picture

<picture></picture> 搭配<source></source>,直接提供適應各種螢幕解析度圖片的解決方案

source code: https://github.com/ShawnTseng/HTML5-practice/commit/7df18342e958e8b38313dfd278e824d36b9ab897


[Back To Basic] HTML5 - Link

Link

  • HTML的Link用<a></a>表示
  • href屬性,用來指定目的位址
  • <a href="https://www.google.com/">Visit Google</a>
*.請養成好習慣在url最後要加一個正斜線,如果沒有加,很多瀏覽器會自己加上去並且再送一次request
  • href可用絕對位置,也可用相對位置
  • link的樣式可自行調整

link 的 target 屬性(attribute) 

target可設定如何開啟這個連結
  • _blank 在新分頁 / 新視窗開啟連結
  • _self 在自己這頁開啟連結(預設)
  • _parent 在父框架開啟連結
  • _top 視窗的body開啟連結
  • framename 在特定框架開啟連結
TODO: 補範例

link 的 title 屬性(attribute) 

可以設定要顯示的tooltip

link 的 書籤(bookmark) 屬性(attribute) 

可以輔助使用者跳到網頁特定的地方
e.g.
<h1 id="test1">Title 1</h1>
<a href="#test1">Jump to Title 1</a>

也可跳到別頁去
<a href="anotherPage.html#test1">Jump to test1</a>




2018年12月13日 星期四

[Back To Basic] HTML5 - CSS和HTML關係建立

層疊樣式表 CSS(Cascading Style Sheets)

CSS加入HTML元素(elements)的三種方式
  • 內嵌(Inline) 用屬性(attribute)-Style直接針對某個元素(element)加入
e.g.

<h1 style="color:blue;">Blue Heading</h1>
  • 內部(Internal) 在<head></head>中使用<style></style>的元素加入
e.g. 

<head>
<style>
h1   {color: blue;}
</style>
</head>
  • 外部(External) 使用外部CSS檔案
e.g.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

建議使用外部(External)加入CSS,可維護性會較好

[Back To Basic] HTML5 - Styles, Colors

Styles

HTML中提供"Styles"這個屬性(Attributes),賦予HTML元素(Elements)樣式。但在可維護性的考量上,CSS盡量不要用這種方式撰寫。CSS和HTML應該拆成兩個檔案來維護,才符合關注點分離的原則。

Colors

顏色有6種表現方式
  • 預先定義好的顏色名字 e.g. Orange, Red...
  • RGB
三原色光模式,寫法: rgb(red, green, blue),值為0~255,e.g. rgb(180,180,180)
  • HEX
三原色光模式改成十六進制表示,寫法: #ffffff
  • HSL
色相(hue), 飽和(saturation), 亮度(lightness)表示方式,寫法: hsl(hue, saturation, lightness)
色相(hue)範圍 0~360
飽和(saturation) 範圍 0%~100%
亮度(lightness) 範圍 0%~100%
  • RGBA
三原色光模式+透明度,寫法: rgba(red, green, blue, alpha)
alpha的範圍:0.0~1.0
  • HSLA
概念同上,寫法: hsla(hue, saturation, lightness, alpha)

2018年12月12日 星期三

[Back To Basic] HTML5 - 標籤重點摘要

HTML 標題(Headings)


  • 標題(headings)包含h1~h6
  • 搜尋引擎會透過標題(headings)來索引整個網頁的內容
  • 不要用標題(headings),來放大字體或粗體,請用css做

The HTML <head> 元素

  • <head>跟headings一點關係都沒有
  • <head>的職責在於中繼資料(metadata)的宣告,中繼資料(metadata)並不會顯示在畫面上,但是是跟HTML文件有關的資料

中繼資料(metadata)

中繼資料(metadata)包含以下幾種資訊:
  • 文件標題<title>
  • 字元集/字元編碼(character set)
  • 樣式(style)
  • 外部連結(links)
  • 腳本(scripts)\
  • 其他

<p>、<br>、<pre>

  • <p></p> 段落
  • <br> 換行
  • <pre></pre> 保留原本一段文字的換行

格式設置(formatting)

word中可以對文字做的格式配置,HTML都有相對應的標籤
  • <b></b> 粗體(bold) = <strong></strong> 功能與粗體相同,多了"重要"的概念
  • <i></i> 斜體 (italic) = <em></em> 功能與斜體相同,多了"重要"的概念
  • <mark></mark> 標記(黃底標記)
  • <small></small> 相對於旁邊較小
  • <del></del> 刪除線
  • <ins></ins> 底線
  • <sub></sub> 下標字
  • <sup></sup> 上標字

罕見的標籤(沒什麼用處)

  • <q></q> 用於較短的引言,瀏覽器通常會在文字前後加上引號
  • <blockquote></blockquote> 一個區塊的引言,通常是來自另一個來源
  • <abbr></abbr> 縮寫,可以幫助搜尋引擎及翻譯系統功能更齊全
  • <address></address> 網站的作者或擁有者聯絡資訊
  • <cite></cite> 通常用於"作品"的標題
  • <bdo></bdo> 可以改變文字的方向,由左至右 / 由右至左

注釋(comments)

HTML註解的寫法 <!-- 內容 -->

source code: https://github.com/ShawnTseng/HTML5-practice/commit/a825251a5d3e6637e18f7012a9a39546683d5ec5

2018年12月10日 星期一

[Back To Basic] HTML5 - 屬性(Attributes)

屬性(Attributes)

提供元素(Elements)額外的資訊

  • 所有的元素(Elements)都有屬性(Attributes)
  • 屬性(Attributes)都被寫在起始標籤中
  • 屬性(Attributes)通常伴隨著屬性名稱(name)和屬性值(value), e.g.name="value"

常見的屬性

  • href
"href"和"元素<a>"一起使用,提供特定的連結

e.g. <a href="https://www.google.com/">link</a>
  • src
"src"和"元素<img>"一起使用,提供圖片的名稱

e.g. <img src="https://pbs.twimg.com/profile_images/927645314630193158/ufoYTbbi_400x400.jpg">
  • width, height
可以元素(elements)的寬度、高度
  • alt
兩個主要功能
    1. 圖片無法顯示時,可以顯示替代的文字
    2. 視障的使用者可以透過輔助器,聽到這些文字訊息
  • style
用來設定元素(elements)的外觀,e.g. 顏色、字體...
  • lang
用來設定整份html的語言,對無障礙環境搜尋引擎而言特別重要
e.g. <html lang="en-US">
前面兩個字母是語言,後面兩個字母是方言(可省略)

延伸學習(關於lang)

https://www.injerry.com/blog-view.php?PID=5&sn=125
  • title
滑鼠移過該元素(elements)時,會顯示的提示文字
e.g. <p title="tooltip"></p>

屬性建議用小寫(lowercase attributes)

理由和標籤一樣,W3C建議屬性都用小寫,其他格式e.g.XHTML,可能會嚴格強制小寫,所以就保持好習慣吧

屬性建議用引號把屬性值框住

e.g. <a href="https://www.google.com/">
雖然 <a href=https://www.google.com/> 也會正常執行,但有可能會有預期之外的錯誤,強烈建議要加引號,保持好習慣

單引號和雙引號的抉擇

雙引號是最為常見的,單引號也可以正常執行。但有時候屬性值(attribute value)本身帶有引號
e.g. <p title='Shawn "Awesome" Tseng'> 或 <p title="Shawn 'Awesome' Tseng">

此時便可交錯使用。


[Back To Basic] HTML5 - 元素(Elements)

HTML元素(elements)

HTML元素(elements)有兩種

1. 一般元素(element)

<tagname>內容</tagname>
開始標籤  內容   結尾標籤
e.g. <h1></h1>

2.空元素(empty element)

<tagname>
只有單一標籤,沒有內容也沒有結尾標籤
e.g. <br> 換行

巢狀HTML元素

HTML元素可以是巢狀的,也就是說,HTML元素可以包含HTML元素

別忘了結尾標籤(end tag)

有些標籤(tag),就算忘記結尾標籤(end tag),還是可以正常顯示
e.g. <p>This is a paragraph
但是這種習慣非常不好,絕對不要這樣做,有可能會造成意想不到的錯誤

標籤建議用小寫(lowercase tags)

W3C建議標籤都用小寫,其他格式e.g.XHTML,可能會嚴格強制小寫,所以就保持好習慣吧

[Back To Basic] HTML5 - 常用的功能(簡介)

常見標籤(tags)

標題

  • <h1></h1>
  • <h2></h2>
  • <h3></h3>
  • <h4></h4>
  • <h5></h5>
  • <h6></h6>

段落

  • <p></p>

連結

  • <a href="https://www.google.com">google</a>
*.href是一種屬性(attribute),屬性(attribute)可以提供標籤(tags)額外的資訊,之後再精讀。

圖片

  • <img src="https://pbs.twimg.com/profile_images/927645314630193158/ufoYTbbi_400x400.jpg" alt="ninja" width="104" height="142">
*.alt: 圖片還沒載入完成時,顯示的文字
*.src: 圖片來源
*. height: 圖片高度
*. width: 圖片寬度

按鈕

  • <button>Click </button>

清單

  • 無順序清單
<ul>
  <li>item1</li>
  <li>item2</li>
</ul>
  • 有順序清單
<ol>
  <li>item1</li>
  <li>item2</li>
</ol>

*.ul: unordered list / bullet list
*.ol: ordered list / numbered list

source code: https://github.com/ShawnTseng/HTML5-practice/commit/fe824c0711ae2b9aef5eb10fadf0dc5a1e13d83c

[Back To Basic] HTML5 - Editor

編輯器

我們通常會使用文字編輯器來開發網頁,加速開發的效率。
我個人習慣使用Visual Studio Code

Step1 安裝 VS Code

https://code.visualstudio.com/

Step2 安裝HTML snippet

https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

Step3 新增一個檔案,檔名為index.html

3-1 VS Code開啟這個檔案
3-2 在這個檔案裡面輸入'doc'
3-3 按下tab鍵,便可快速完成一個網頁基本的程式碼

註: 
*.其他標籤(tags)也可快速輸入,可以自己試試
*.跑出來看不懂的程式碼可以自己查查看其用意

[Back To Basic] HTML5 - Introduction

什麼是HTML?

HTML是建立網頁的標準標記語言

HTML文件說明

source code: https://github.com/ShawnTseng/HTML5-practice/commit/77c636afbc76e1d9c6555a5b89fdc64346f8a1b7

  • <!DOCTYPE html> 通常寫在第一行,宣告這份檔案的HTML版本,這樣寫代表HTML5
  • <html></html> 頁面的根元素(root element)
  • <head></head> 包含的中繼資料(meta data)
  • <title></title> 頁面的標題,會顯示在瀏覽器的頁籤上
  • <body></body> 真正會呈現的內容'

HTML標籤(tags)說明

<tagname>...</tagname>
  • 標籤名稱(tagname)
  • 標籤有開始標籤(start tag/opening tag)、結尾標籤(end tag/closing tag)
  • 開始和結尾標籤類似,但是多一個斜線符號(/)在標前名稱前方

瀏覽器

瀏覽器(e.g. IE, Chrome, Firefox)會讀取HTML文件,並且展現它。雖然這些標籤(tags)不會被展現出來,但是會透過這些標籤(tags)決定如何呈現。

HTML頁面結構






















這是整個HTML頁面的結構,只有白色的部分會顯示在瀏覽器上。

<!DOCTYPE>的宣告

<!DOCTYPE>是幫助瀏覽器判斷文件的類型(type),瀏覽器才能正確地顯示網頁。這個宣告只能出現一次,而且必須在整個檔案的最上方。
早期有很多種版本,不過之後都用HTML5,宣告方式如下
<!DOCTYPE html>

2018年12月4日 星期二

[React Native]Getting Start

這幾天面試了很多間公司,每間要求的資料都很多,常常搞到12點都沒時間寫日記,今天早上花2小時來了解React Native的文件吧

Step1
安裝Expo到自己的電腦裡面, command: npm install -g expo-cli

Step2
用Expo建立一個React Native的專案, command: expo init ProjectName
功能等同於 angular cli command: ng new ProjectName

Step3
接著就用熟悉的開發工具打開,npm start就可以模擬上線的結果, 要模擬系統執行在android或ios的裝置上的話,必須做以下這N件事情:
3-1. 安裝Expo client在要模擬的手機上(android&ios的client端)
3-2. 讓這支手機和電腦連到同一個網域
3-3. 用這支手機直接掃描Server提供的QR code, 即可看到執行結果

2018年12月2日 星期日

舞蹈培訓-派對舞蹈(DoublePop) Day-2

連續上了兩天的培訓課程,對於有氧舞蹈老師(一對多的團體課程)總算有些認識,當一個老師確實不容易。

一堂派對舞蹈課程需準備的事項如下:
14首的編舞(動作及口指令)
熟悉課程臨場感
互動、指導、表演一體到位
包括課程的安全、課程的經營等等,確實比預期還要來得複雜,謝謝九折學長讓我初步的了解這個產業,未來還有很長的路要走,很多東西可以學習,加油加油,全身痠痛中...

2018年12月1日 星期六

舞蹈培訓-派對舞蹈(DoublePop)

今天去參加派對舞蹈的培訓課程,一堂授課中,含14首歌曲及編舞,並且嘗試了平時不擅長的舞風-MV、拉丁。
明天要交作業...暫停寫blog一天。
https://www.facebook.com/DoublePopTaiwan/

2018年11月30日 星期五

[Day11]React - run on redux

今天將redux整個串聯起來。
source code: https://github.com/ShawnTseng/react-for-fun/commit/2cbcf515971365909734ee67f07dbeef40ffbbf5

2018年11月29日 星期四

[Day10]Redux: Action, Middleware

Q: Action是什麼?
A: 規範所有改變資料的行為
Q: 改變資料的行為有哪些?
A:可分為"同步"和"非同步"

  • 同步(reducer可處理): 接收到Action就對應到特定的處理方式
  • 非同步(thunk): 接收到Action等待資料回傳
Q: 要在什麼時候將Action分類並且用適合的方式處理
A: 透過Middleware分類

src:
https://github.com/ShawnTseng/react-for-fun/commit/9e05f026f42d3c1ba99d96205726bfedeac572f9
https://github.com/ShawnTseng/react-for-fun/commit/a5185d5bf791de385ca45c9723bf4857c555a577

2018年11月28日 星期三

[Day9]redux初探 - reducer實作

Flux這個單向資料流的解決了很多資料同步的問題,最致命的缺點在於Store這個角色承擔了二個職責:

  1. 儲存資料狀態
  2. 根據Action改變資料狀態
因此Redux主要的目的就是將上述兩者拆開,拆法如下:
  1. 儲存資料狀態=>用狀態樹紀錄(一個應用程式只會有一個Store,裡面包含多個State)
  2. 改變資料狀態=>用Reducer解決 (Reducer概念源於Elm architecture)

整體改變:
1.Store從多個變成一個,因為被多個State和Reducer取代,原本的Store概念變成所有State集合的地方。
2.因為1.,所以就不需要Dispatcher來分配Action到Store,因為只有一個Store,因此移除Dispatcher
3.加入Reducer的概念管理資料變更

source code:
https://github.com/ShawnTseng/react-for-fun/commit/b0d325de9e4a26fbf2f4b0fc8a167845d2bbd0a6
https://github.com/ShawnTseng/react-for-fun/commit/f4bea26a2dad81f5ead9f6d930f0d8f5801ff5a5

2018年11月27日 星期二

[Day8]Flux Utils應用

Flux Utils

目的: 用更簡單的寫法實現Flux中Store的邏輯
作法: extends Flux Utils 中的 ReduceStore
ReduceStore API文件: https://facebook.github.io/flux/docs/flux-utils.html#reducestore-t
source code: https://github.com/ShawnTseng/react-for-fun/commit/2bee9924a00eed7a437fbea7d777220103986118

 心得: 寫法真的方便很多, 不過要花一些時間成本讀API文件

2018年11月26日 星期一

[Day7]react.js Container Pattern

使用目的:
        實現關注點分離、符合單一職責原則
使用結果:
        和Store、Action邏輯放入Container, UI邏輯放在原本的Component中
練習code:
https://github.com/ShawnTseng/react-for-fun/commit/8ed1a9f001acc77ac04f47a230c8e528a656d194

註記: Design Pattern在使用時,要特別注意是否達到目的,Design Pattern不是用越多越好

2018年11月25日 星期日

[Day6]react.js中 Flux概念理解

Flux簡言之,就是一種單向資料流的設計模式(Design Pattern),主要想要解決的問題是資料一致性,在這個設計模式中,主要有四種角色: Action、Dispatcher、Store、View

Action

定義系統的所有行為,例如增刪修查資料(CRUD)、登入登出等。

Dispatcher

將Action告訴Store(有註冊的才通知)

Store

儲存商務邏輯、資料,只能取得(get)資料,不能變更(set)資料

View

渲染(Render)畫面,並且監聽使用者的操作,例如Click。

好處顯而易見,以關注點分離的面向而言,各個角色各司其職,提高資料的一致性。真的有點複雜,要實際寫過才能內化。

2018年11月24日 星期六

[Day5]用VS Code對react.js不友善

Github: https://github.com/ShawnTseng/react-for-fun/commit/8388043fd166323872cab7aa17bfe8028a3b7981

今天假日用自己的筆電開啟vscode寫react,排版時(Shift + Alt + F),整個亂掉無法執行,因此作了以下調整:
1.安裝套件
npm install babel-eslint eslint-plugin-jsx-a11y eslint-plugin-react --save-dev
npm install prettier-eslint --save-dev
2.設定vscode/settings.json
// Format a file on save.
// A formatter must be available,
// the file must not be auto-saved,
// and editor must not be shutting down.
"editor.formatOnSave": true,

// Enable/disable default JavaScript formatter (For Prettier)
"javascript.format.enable": false,

// Use 'prettier-eslint' instead of 'prettier'.
// Other settings will only be fallbacks
// in case they could not be inferred from eslint rules.
"prettier.eslintIntegration": true
3.將副檔名js改成jsx
3-1.匯入檔案時的副檔名也要記得改

2018年11月23日 星期五

[Day4]React 練習

原始碼: https://github.com/ShawnTseng/react-for-fun

Angular學得滿完整的,在自學react的過程中,有非常多概念可以共用,目前把 React的 props, state, Component開發, validate, CRUD實作過了。
目前進入到Flux整個概念的了解與熟悉。

參考資料:
https://github.com/shiningjason/react-quick-tutorial

2018年11月22日 星期四

[Day3]Angular i18n part1

功能目的: 讓Web應用程式國際化 - 讓世界各地的使用者有友善的體驗
開始前的兩種概念建立:
  1. 國際化 - 讓應用程式支援多種語系
  2. 在地化 - 讓國際化的應用程式,進入特定的語言環境
國際化總共做4件事情:
  1. 日期、數量、百分比、貨幣可轉換成各國格式
  2. 一般文字的翻譯
  3. 單字的單複數處理
  4. 翻譯HTML屬性的替代文字
在地化 - 藉由angular cli產生在地的應用程式

angular在地化的概念是在建置(Build)的過程中實現的,所以分為兩種情境
  1. JIT(Just In Time)
  2. AOT(Ahead Of Time)
  • JIT加入i18n概念的作法
在根模組(AppModule)中註冊LOCALE_ID
  • AOT的作法 - 使用angular cli指令佈署
ng serve --i18nFile=path --i18nFormat=xlf --i18nLocale=fr
ng build --i18nFile=path --i18nFormat=xlf --i18nLocale=fr
--i18nFile: 多國語系檔案路徑
--i18nFormat: 檔案格式
--i18nLocale: 語系名稱

以上是在地化的處理,明天寫以下兩件事
  1. 研究國際化的具體實作細節
  2. 補上在地化的範例程式碼

未完待續...

2018年11月21日 星期三

[Day2]NgLocalization & NgLocaleLocalization

Common Module封裝了很多Directive, Pipe,還有一個很特殊的Providers:
{
provide: NgLocalization,
useClass: NgLocaleLocalization
}
官方文件的說明非常少,簡單來說就是應用在
1.各國語系的複數型態的規則訂定及表達
2.各種單位的複數型態的規則訂定及表達

abstract class NgLocalization

這是一個抽象類別,裡面只包含一個抽象方法
 abstract getPluralCategory(value: any, locale?: string): string
而且唯一擴充這個抽象類別的類別就是 NgLocaleLocalization

class NgLocaleLocalization extends NgLocalization

往深層的code track後發現一份規格 - CLDR(Common Locale Data Repository),由萬國碼(unicode)聯盟訂定的規範
http://cldr.unicode.org/index/cldr-spec/plural-rules
這份規格在描述各種語言
1.名詞的複數如何表達
2.單位的複數如何表達(e.g."hour" vs "hours")

語言複數規則的詳細列表
http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html

不過目前從source code觀察,似乎angular團隊在這個領域還沒有積極的發展,在angular5的時候很多相關的API都被列為deprecated。

github:https://github.com/ShawnTseng/angular-api-research/commit/2fc5c38129a732bf2ed709b1a66d31e3905e6c30

這些API跟多國語系(i18n)相關性較高,明天先讀I18N的章節( https://angular.io/guide/i18n ) 



2018年11月20日 星期二

[Day1]Angular API Overview & common(package)

Angular API(https://angular.io/api)
版本 - v7.0.4

所有Angular提供的API以package分為28包(可用:25, 棄用:3)
animation
animations/browser; animations/browser/testing
common/http; common/http/testing
common; common/testing
core; core/testing
elements
forms
platform-browser; platform-browser/testing
platform-browser/animations
platform-browser-dynamic; platform-browser-dynamic/testing
platform-server; platform-server/testing
platform-webworker; platform-webworker-dynamic
router; router/testing
router/upgrade
service-worker
upgrade/static
http; http/testing
upgrade

每個package都有一堆API,一眼看過去大約有400~600個左右。
大多數的API都有出現在教學或功能分類中,重點是有些沒有。所以這一系列的文章就是要用地毯式搜索的方式,一個個看過,找出埋藏在Angular框架中的寶藏。


今天就從common這個package出發吧。
Package:common
說明:顧名思義,就是實作了一些基本的angular的directive, pipe
進入點:
主要
        @angular/common
次要
        @angular/common/http - 提供http通訊協定的client端
        @angular/common/http/testing
        @angular/common/testing



CommonModule(NgModule)
說明:匯出所有基本的angular的directive, pipe
p.s.BrowserModule包含了CommonModule,所以如果已經import了BrowserModule,就不需要import CommonModule。

https://github.com/ShawnTseng/angular-api-research/commit/f9f769cf5138589ed28975c39e8f90af1265f541

待續...明日進度:
NgLocalization
NgLocaleLocalization
NgClass
NgComponentOutlet
NgForOf
NgIf
NgPlural
NgPluralCase
NgStyle
NgSwitch
NgSwitchCase
NgSwitchDefault
NgTemplateOutlet

2018年11月19日 星期一

立定目標;把Angular API讀過一次

今天和保哥前往客戶家的途中,他鼓勵我寫些跟技術有關的議題。

漫無目標的我心裡想著,離開學校4年多,在職場中載浮載沉,對有興趣的人事物也都追求過、嘗試過了,但終究也沒找到自己在社會中的定位與價值,似乎在人生的旅途中迷失了自我。或許消逝的熱忱是因為沒有目標吧。

進入軟體產業的時間也不算短,對於軟體業中,生產面整體的概觀及輪廓還算明白,也該訂定自己在這個行業中的定位了。

根據現在的資源、知識及能力來做為決策標竿的話,我決定深耕前端工程(Front-End),來累積自我的價值。

前端工程(Front-End),是深不見底的一個大坑,短時間內想囊括前端的全貌是不可行的,因為知識含量過高。為了最有效率的累積相關的學理及實務,往後的學習策略與行動 - 站在巨人的肩膀上:Google推行的Angular - 前端框架是一群專家搞出來的產物。

因為相較於Vue、React,我比較熟悉這套框架,加上個人有很強烈的控制慾,所以偏愛Angular 2+。

因此在今日立定目標:把Angular API全部讀過一次。必要時寫些Code、讀個原始碼,往後會將每個API的學習心得記錄於此。