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 taghttps://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