Pages

22/04/2019

stackoverflow 復古90's 網頁設計


stackoverflow 在4月1日愚人節，回到過去 90's (年代) 的復古網頁設計， 90年代的網頁是怎麼一回事?！


90年代網頁長什麼樣子

今次復古的特式有︰

  • Animation.1 GIF
  • Animation.2 跑馬燈
  • Animation.3 閃字機
  • Backgrounds.1 Repeat Background
  • Backgrounds.2 Seamless Background / Tiled Backgrounds / Tessellation
  • Backgrounds.3 Horizontal Line
  • Backgrounds.4 Gradients
  • Cursor.1 Cursor Trail
  • Guest.1 Guest Counter
  • Guest.2 Guestbook
  • Development.1 Web IDE
  • Development.2 Dynamics Content




Animation.1 GIF

網頁剛盛行，Flash / GIF 是動畫的唯一選擇。

Animation.2 跑馬燈

動畫最基本的概念是欺騙眼睛，當時非常流行以javascript 綁架 IE 狀態列 和 IE 標題，運用 windows.status 。以不斷切換文字的方式，模彷跑馬燈的效果。

後來亦發展出有跑馬燈效果的<marquee> 和閃爍效果的<blink>

Animation.3 閃字機

當時的部落格、MSN社效、網上日誌等容許有更多的個人化和自定義的網頁設計。在網上透過免費資源製作Flash 閃爍Flash/GIF 動畫 已經去到惡怖的地步，不少網站內有十分多張閃爍動畫，是混亂多於是個性的表現。

Backgrounds.1 Repeat Background

CSS 第一代，對背景圖片的控制只有4個選項。
repeat | repeat-x | repeat-y | no-repeat
不斷重複的小圖作背景是常見的事。

Backgrounds.2 Seamless Background / Tiled Backgrounds / Tessellation

寬頻 56K, 10MB, 20MB 才到了今天普遍的光纖入屋100MB(RJ54)
網速不足，螢幕標準比例是 4:3, 640x480, 800x600, 1024x768
顯示大於0.5MB圖片作背景等於是謝絕探訪，因為載入需時。

所以大多會使用一些簡單的構圖，圖片的邊緣可以無縫連接，形成循環的背景。概念有點像密鋪平面。

Backgrounds.3 Horizontal Line

以不斷重複的又長又窄的圖片扮成 horizontal line (水平線)，沒有<hr>的單調，亦不需要一張很長很長的圖片佔頻寬。

Backgrounds.4 Gradients

漸層背景簡直是夢幻效果，當時未有CSS3 Linear Gradients / Radial Gradients。
方法一︰
全靠大神編寫好的 javascript ，根據scroll bar 捲軸的位置，運算HEX color 作加數減數，再操控CSS background color。
方法二︰真實的1張背景圖片，但是圖片的大小只有1px 高或1px寬，以繪圖軟件畫出漸層，以CSS1 background repeat 屬性達到漸層效果。
方法三︰Canvas 2006年才出現
方法四︰CSS3 Gradients 2012年草擬中

Cursor.1 Cursor Trail

當時普及的OS 是 win 98、win98 SE(second edition)，OS預設的鼠標解像度一般，是會看見鋸齒。打開網頁發現鼠標變時尚，絕對會令好感度上升。
鼠標圖案切換不難，更進階便是滑鼠軌跡。
但是加了這兩種特效，容易令當時的電腦在網頁效能上大減。
是一把雙面刃。

Guest.1 Guest Counter

網頁瀏覽次數計算器 ，一般都是透過第三方服務提供，或者伺服務供應商附贈功能。

Guest.2 Guestbook

傳說中的簽到簿、留言版。
90's - 2千年，有兩個新詞。
Multimedia 多媒體︰文字Text、圖片Image、動畫Animation、聲音audio、影片video
Web2.0︰分享、增加使用者體驗、增加使用者互動。

Flash閃字/GIF = 動畫元素
部份Flash附有音效，其次，最普遍的是在網頁插入mp3 播放器

Development.1 Web IDE

IE死圖是網站常見的，因為只有到後期的Dreamweaver才附有檢查功能，一鍵檢查網站中的 broken image / broken link。
在出現檢查功能之前，唯有人手每頁檢查。

Microsoft FrontPage 1997-2003
Macromedia Dreamweaver 1997-2005
Adobe Dreamweaver 2007-現在 (相信已經被大部份專業的網頁開發者拾棄，年輕人亦不會知道)

新興的主流 IDE


  • Visual Studio Code
  • Adobe Brackets
  • 甚至只是text editor
  • Sublime Text
  • Atom
  • Notepad++


Development.2 Dynamics Content

Ajax 在 1999年才首次出現，PHP 興起之前。
完全沒有可行的動態顯示內容，
stackoverflow 那個動態更新的留言版在當時是不可能的，瀏覽者只可以不斷按F5(重新整理)，查看最新的動態。

所以Guest Counter 一般都是由第三方服務生成圖片，網頁可能只用<img> tag 讀取。

Reference

jQuery scrolling marquee in html page title tag
https://stackoverflow.com/questions/4099011/jquery-scrolling-marquee-in-html-page-title-tag

Window status Property
https://www.w3schools.com/Jsref/prop_win_status.asp

<blink>: The Blinking Text element
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink

<marquee>: The Marquee element (Obsolete)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

闪字制作- FTZ.LA
http://www.ftz.la/sz.htm

Cascading Style Sheets, level 1 - World Wide Web Consortium
https://www.w3.org/TR/REC-CSS1/#background-repeat

how to make tiled backgrounds
https://www.google.com/search?q=how+to+make+tiled+backgrounds&safe=off&rlz=1C1MSIM_enHK628HK628&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiLteD2oa_hAhUJM94KHUsQDVEQ_AUIDigB&biw=1707&bih=865#imgrc=TAvFCtn4T3cejM:

Pattern
https://en.wikipedia.org/wiki/Pattern

Canvas element
https://en.wikipedia.org/wiki/Canvas_element

Drawing an SVG file on a HTML5 canvas
https://stackoverflow.com/questions/3768565/drawing-an-svg-file-on-a-html5-canvas

How to draw SVG on HTML 5 Canvas and why you might want to
https://blog.idrsolutions.com/2012/09/how-to-draw-svg-on-html-5-canvas-and-why-you-might-want-to/

CSS Gradients
https://www.w3schools.com/css/css3_gradients.asp

Pure JavaScript Smooth Gradient Generator
https://www.cssscript.com/pure-javascript-smooth-gradient-generator/

Who Designed Clippy? The History Behind Four Legends of Early UI
https://themech.in/tech-news/who-designed-clippy-the-history-behind-four-legends-of-early-ui/

Cut & Paste Cursor Trail - JavaScript Kit
http://www.javascriptkit.com/script/script2/cursortrail.shtml

JavaScript mouse trail - CodePen
https://codepen.io/falldowngoboone/pen/PwzPYv

#齊懷念過去 #90後 #80後 #千禧世代 #Millennials #Y世代

No comments:

Post a Comment